A slider is a row or a ring you page. A grid is a field you pan.

Will links still work?

Yes, if you ignore a press that moved more than a few pixels.

Enough to fill the view plus one set for the wrap.

What does reduced motion do?

A static grid that scrolls in the usual way.

Can it loop a small set?

It can, but repeats will be obvious.

Infinite draggable grid

An infinite draggable grid is a field of items you can drag in x and y, wrapping so the set never shows an edge.

Lists and cardsBuild difficulty: HardDraggable

Also called Endless grid, Draggable gallery, Wrap grid, Infinite tile field.

Here it is working.

Drag in any direction

Drag the tiles. They stay inside the window.

For designers

You reach for this when the job is browsing a lot of similar pieces: images, tiles, covers. People drag, throw, and keep going. If they need to land on one item as a choice in a row, you wanted Draggable slider. If nobody is choosing, only watching a row pass, you wanted Infinite marquee. The wrapping has to be invisible. A jump at the loop is worse than a hard edge. Items that are links need a drag threshold so a pan does not count as a press. Reduced motion can show a normal wrapping grid that scrolls, with no throw.

Use this when

The set is large and the items are equivalent to browse.
Dragging in two axes is better than paging.
You can wrap the tiles so the loop does not jump.
Press and drag can be told apart.
Reduced motion can fall back to ordinary scroll.

Reach for something else when

Someone is choosing one item in a row. Use Draggable slider, Circular slider or Infinite parallax slider.
The row should move on its own and nobody is picking. Use Infinite marquee.
The set is a handful of faces. Use Card fan.
The set is names to scan. Use Hoverable list or Image follow list.

How to build it

Lay out enough tiles to fill the viewport plus a buffer. Duplicate the set so wrapping has copies to slide in. Draggable on x and y, with InertiaPlugin so a throw continues after release. On each move, wrap position: when a tile leaves one side, place it on the other. The travel has to match the tile size. Set a clickable test so a pan does not fire the link. On reduced motion, skip Draggable and let the grid scroll.

Official GSAP

Draggable type x,y.

Draggable.create('.grid', { type: 'x,y', bounds: '.mask', edgeResistance: 0.8, inertia: false });

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

Common questions

Slider or grid?: A slider is a row or a ring you page. A grid is a field you pan.
Will links still work?: Yes, if you ignore a press that moved more than a few pixels.
How many tiles?: Enough to fill the view plus one set for the wrap.
What does reduced motion do?: A static grid that scrolls in the usual way.
Can it loop a small set?: It can, but repeats will be obvious.

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: Mega menu