Motion pattern
Parallax Scroll
A parallax scroll moves layers at different rates as the user scrolls, so foreground and background drift apart and the page gains a sense of depth. Done with restraint it adds dimensionality; overdone it reads as dated. Built with GSAP ScrollTrigger's scrub, animating transforms only so it stays at 60fps.
Updated June 2, 2026
Components that solve this
Infinite Parallax SliderA horizontal slider that loops forever with layers moving at different speeds for depth.ParallaxElements move at different speeds as you scroll so the page feels layered, slower in the back and faster up front.Multi FlipA stack of cards that fans out from a messy pile into a neat grid as you scroll, each one starting overlapped at a random angle.
Tuning the pattern
- Layer rate spread
- Parallax exposes `speed` from 0.1 to 2 (default 0.5, half scroll speed); keep layers near 0.8 to 1.2 for a quiet, readable drift behind text, and only spread toward 0.3 or 1.7 on purely decorative layers, since a wide rate gap behind body copy makes it hard to read and can trigger motion sickness.
- Pin vs free scroll
- Free-scroll drift (the Parallax component, layers move during normal scroll) is simpler and right for most section backgrounds; a pinned scene (Multi Flip's pinned scrub) holds the viewport and gives you precise control over a choreographed reveal, at the cost of taking over the scroll, so use it only when the scene is the moment, not a backdrop.
- Mobile behaviour
- Reduce, do not always kill it; Parallax ships a `disable` flag and wraps the effect in matchMedia, so cut the rate spread sharply below your breakpoint where the small viewport flattens the depth illusion anyway, and fully skip it for prefers-reduced-motion since parallax fights touch momentum scroll.
When parallax fits
Parallax adds depth to layered compositions. It works when there's a clear foreground/background relationship to exploit.
- Hero scenes with a layered illustration or photo composite
- Section backgrounds that should drift behind foreground content
- Editorial layouts where images and captions move at different rates
- Product showcases where a device drifts against its backdrop
Subtlety is the whole game
Large rate differences make text hard to read and trigger motion sickness. Keep layer speed differences small unless the layer is purely decorative. On touch devices, reduce or disable parallax entirely - it fights momentum scroll.
How parallax works
Each layer gets a ScrollTrigger with scrub: true and a different y end value. The further a layer should appear, the slower it moves. Because progress is scroll-bound, the layers stay locked together at every scroll position, forward and backward.
script.js
Annnimate components that solve this pattern
- The Parallax component handles multi-layer depth with per-layer rate control, scrub binding, and a matchMedia mobile fallback
- The Infinite Parallax Slider combines parallax depth with an infinite horizontal loop
- The Multi Flip uses scroll-scrubbed transforms in a pinned scene, a close cousin of the parallax technique
Common questions
- Why does my parallax feel janky?
- Almost always because you're animating a layout property (top, margin, background-position) instead of a transform. Animate
y/yPercentonly - they're GPU-composited. Also confirmease: 'none'under scrub; an eased scrub fights the scroll position. - Should I disable parallax on mobile?
- Usually reduce, not always disable. Parallax fights touch momentum scroll and the small viewport flattens the depth illusion anyway. Wrap the effect in
gsap.matchMediaand either cut the rate spread sharply or skip parallax below a breakpoint. Always honor prefers-reduced-motion. - How many parallax layers is too many?
- Three to four meaningful depth planes is plenty. Beyond that the rates blur together and you're paying compositing cost for an effect users can't perceive. Depth comes from clear separation between a few layers, not from many layers moving slightly differently.
PreviousPage TransitionA page transition animates the move between routes instead of a hard cut, a cover that wipes across, a shared element that morphs from one page to the next, or a fade that masks the swap.NextScramble TextA scramble text effect cycles each character through random glyphs before settling on the final letter, like a terminal decrypting a message.
