Motion Showcase
Parallax Depth
Six ways to fake a third dimension with nothing but scroll position. Scroll slowly — every layer on this page moves at a different rate, and one scene moves with your cursor.
01 — Rate-split background
This copy scrolls at normal speed. The valley behind it is scrubbed to −20% of its own height across the section, so it lags — the speed difference alone reads as depth.
The cheapest parallax there is: one image, one tween, one scrub. Perfect for long editorial pages.
gsap.to(bg, { yPercent: -20, ease: 'none', scrollTrigger: { scrub: 0.6 } })03 — Foreground overshoot
Nearest layer
This card travels faster than the scroll itself — the closer an object is, the more it should outrun the world behind it.
gsap.fromTo(card, { y: 150 }, { y: -150, scrollTrigger: { scrub: 0.6 } })04 — Mouse parallax
Same four plates, driven by your cursor instead of the scrollbar. Move the mouse across the scene — near layers push against you, the sky drifts with you. Disabled on touch devices.
const xTo = gsap.quickTo(layer, 'x'); onMove → xTo(dx * depth) // gsap.matchMedia('(pointer: fine)')05 — Depth-of-field
near: blur(2px) + yPercent -30 · far: yPercent -8 — two scrubs, camera-lens depth06 — Velocity parallax
Flick the scroll hard, then stop. The row is offset by scroll velocity — clamped so it never flies apart — and springs back elastically when you settle.
onUpdate: (self) => clamp(self.getVelocity() / -25) → elastic.out back to 0Keep exploring