How is this different from Infinite marquee?

A marquee shows a set. This slider still asks someone to pick.

No. If the loop is the only extra, a wrapping [Draggable slider](/motion/draggable-slider/) is enough.

Yes, if the copies are not the same width, if images land late, or if the wrap is not an exact set width.

Arrow keys should step one item.

What does reduced motion do?

Keep the ability to choose. Drop the depth.

Infinite parallax slider

An infinite parallax slider is a looping strip you still use to pick an item, with layers that shift at different rates as it moves.

SlidersBuild difficulty: MediumxPercent

Also called Looping parallax carousel, Infinite depth slider, Parallax carousel.

Here it is working.

Two speeds, no seam. The front row wins the race.

For designers

The neighbour is Infinite marquee. A marquee shows a set and nobody has to land on one item. This page is a choice that wraps, with depth on the move. If you add the loop and skip the choice, you wanted the marquee. If you keep the choice and skip the depth, you wanted Draggable slider. Too much depth and the item people are trying to pick slides apart. Keep the shift small, snap to an item, and pause when someone is hovering or focusing a slide. Reduced motion can loop with no parallax, or show a static row with buttons.

Use this when

People are choosing one item, and the set should wrap.
A little depth on the move helps, without splitting the slide.
Drag, buttons or a wheel can all land on an item.
You can pause it, and reduced motion can drop the depth.

Reach for something else when

Nobody is choosing. Use Infinite marquee.
You want a choice with no loop and no depth. Use Draggable slider.
The choice sits on a ring. Use Circular slider.
The field uses 2 axes. Use Infinite draggable grid.

How to build it

Build a slider first: items in a row, Draggable on x, snap to each item, InertiaPlugin for the throw. Duplicate the set so the wrap has copies, and jump by exactly one set width when you pass the join, with no easing on that jump. Parallax is extra. Move a child layer, often the image, by a fraction of the slide travel, opposite the drag. Buttons step by one snap. On reduced motion, keep snap and skip the depth. Pause on hover, focus and press.

Official GSAP

gsap.to xPercent, two durations.

gsap.to('.front', { xPercent: -50, duration: 18, ease: 'none', repeat: -1 });
gsap.to('.back', { xPercent: -50, duration: 28, ease: 'none', repeat: -1 });

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

Common questions

How is this different from Infinite marquee?: A marquee shows a set. This slider still asks someone to pick.
Do I need parallax?: No. If the loop is the only extra, a wrapping Draggable slider is enough.
Will the loop jump?: Yes, if the copies are not the same width, if images land late, or if the wrap is not an exact set width.
What about keyboard?: Arrow keys should step one item.
What does reduced motion do?: Keep the ability to choose. Drop the depth.

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: Draggable slider