Draggable inertia slider

<!-- Page settings → Before </body> tag --> <script> document.addEventListener("DOMContentLoaded", () => { gsap.registerPlugin(Draggable, InertiaPlugin, Observer); const viewport = document.querySelector(".slider_viewport"); const track = document.querySelector(".slider_track"); const bar = document.querySelector(".slider_bar"); const cards = gsap.utils.toArray(".slider_card"); // ── measurements live in a function, re-run on resize ─────────────── let minX = 0, points = []; function measure() { minX = Math.min(0, viewport.offsetWidth - track.scrollWidth); points = cards.map(c => gsap.utils.clamp(minX, 0, -c.offsetLeft + track.offsetLeft)); } measure(); const setBar = gsap.quickSetter(bar, "x", "px"); const paint = () => { const x = gsap.getProperty(track, "x") || 0; setBar(minX === 0 ? 0 : (x / minX) * (bar.parentElement.offsetWidth * 0.78)); }; // Velocity tracking must be switched on explicitly before you can read it. InertiaPlugin.track(track, "x"); const skew = gsap.quickTo(cards, "skewX", { duration: 0.5, ease: "power3" }); function tick() { const v = InertiaPlugin.getVelocity(track, "x"); skew(gsap.utils.clamp(-11, 11, -v / 260)); // clamp HARD. 11deg, not 30. paint(); } const [drag] = Draggable.create(track, { type: "x", inertia: true, // the whole point cursor: "grab", activeCursor: "grabbing", allowNativeTouchScrolling: true, // vertical page scroll still works on a phone edgeResistance: 0.9, // rubber-band at the ends instead of a hard stop bounds: () => ({ minX, maxX: 0 }), // Snap runs THROUGH the throw, not instead of it: the physics still play // out, they just resolve onto a card edge. snap: { x: v => gsap.utils.snap(points, v) }, onDrag: tick, onThrowUpdate: tick, onThrowComplete: () => { skew(0); paint(); } }); // Trackpad / wheel — horizontal deltas only, so the page still scrolls. Observer.create({ target: viewport, type: "wheel", onChangeX: self => { const x = gsap.utils.clamp(minX, 0, (gsap.getProperty(track, "x") || 0) - self.deltaX); gsap.to(track, { x, duration: 0.6, ease: "power3.out", overwrite: true, onUpdate: tick }); } }); addEventListener("resize", () => { measure(); drag.applyBounds({ minX, maxX: 0 }); gsap.set(track, { x: gsap.utils.clamp(minX, 0, gsap.getProperty(track, "x") || 0) }); paint(); }); paint(); }); </script>