A slider is a choice between items. Parallax is scenery moving while the page moves.

What about background-attachment fixed?

That is a different trick. Prefer a real layer and ScrollTrigger.

What does reduced motion do?

Everything sits. The still stack has to be the design.

Parallax

Parallax moves stacked layers at different speeds as the page scrolls, so a foreground travels further than a background and the scene reads with a little depth.

ScrollBuild difficulty: MediumScrollTrigger

Also called Scroll parallax, Layered scroll, Depth scroll, Parallax layers, Multi-speed scroll.

Here it is working.

Scroll the box. The back is slow. The front is quicker.

For designers

A product page can take a small shift on a hero image or a decorative shape. The trap is treating every section as a diorama. If the copy has to be read, the type stays still. If a control has to be pressed, it stays still. Depth is for the scenery. Keep the travel short. A few percent of the layer height is enough to feel. Watch the edges: a layer that moves needs extra image, or it uncovers a gap.

Use this when

There are 2 or 3 layers, and one of them is allowed to be decorative.
The shift is small enough that the scene still makes sense if nothing moves.
You can tie the movement to the section, not the whole document.
Reduced motion can freeze every layer in its resting place.

Reach for something else when

You wanted a block to arrive, then sit. Use Element reveal or Mask reveal.
One image should morph into a sequence of frames. Use Flip zone.
Named steps should hold the screen. Use Step-by-step timeline.
The page tint should change. Use Background colour.
Someone is choosing between items in a row. Use a slider, not a parallax on a list.

How to build it

Stack the layers. Give the moving ones a little extra size so a shift does not flash empty space at the edge. Tie each layer Y to the section scroll progress. ScrollTrigger with scrub is the honest route. Different speeds are just different distances. Do not parallax the heading, the form, or anything with a hit target. Translate a child, leave the layout box where it was. Two layers beat five. On reduced motion, park every layer at its resting position.

Official GSAP

ScrollTrigger with different y distances.

gsap.to('.back', { y: 40, ease: 'none', scrollTrigger: { scrub: true } });
gsap.to('.front', { y: -40, ease: 'none', scrollTrigger: { scrub: true } });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Is this a slider?: A slider is a choice between items. Parallax is scenery moving while the page moves.
How much movement?: A little. A few percent.
Does type ever move?: Almost never.
What about background-attachment fixed?: That is a different trick. Prefer a real layer and ScrollTrigger.
What does reduced motion do?: Everything sits. The still stack has to be the design.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Element reveal