How many images in the trail?

A handful on screen. If you can count more than about 8 at once, the pool is too loud.

Will this tank the page?

It will if you spawn nodes forever. Pool, reuse, and bound the area.

Image trail

An image trail leaves a short run of pictures behind the pointer as it moves, then lets them fade.

ScrollBuild difficulty: Hardgsap.quickTo

Also called Cursor trail, Mouse trail images, Pointer gallery, Hover trail.

Here it is working.

Move the pointer across

Move inside the box. Tiles follow, then go.

For designers

You reach for this on a spacious hero or an about page, where the pictures are a mood, not a catalogue. The pointer moves, the next image in a pool appears at that point, older ones fade. If people need to scan names and check a picture, you wanted Image follow list. If they need to choose one item, you wanted a slider or a grid. This effect exists for a pointer. Thumbs get nothing, so the page at rest still has to hold up. Keep it off buttons, fields and links.

Use this when

The page has room, and the pictures are extra, not the task.
Hover is a real input.
You can cap how many images sit on screen at once.
Reduced motion can skip the trail entirely.

Reach for something else when

People are scanning a list of names. Use Image follow list or Hoverable list.
People need to pick one picture. Use Draggable slider, Circular slider or Infinite draggable grid.
One control should ease towards the pointer. Use Magnetic button.
A set should loop on its own with no pointer. Use Infinite marquee.

How to build it

Hold a small pool of image elements, 5 to 12, already in the document. Observer watches pointer move on the area. On a move, take the next image in the pool, put it at the pointer, and tween opacity or scale in, then out. Reuse the oldest. Do not create a new node on every pixel. Ignore moves that are only a few pixels. Pointer events on the images should be none. On touch, do nothing. On reduced motion, do nothing.

Official GSAP

gsap.quickTo plus a small pool of elements.

gsap.set(tile, { x, y, autoAlpha: 1 });
gsap.to(tile, { autoAlpha: 0, scale: 0.4, duration: 0.7 });

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

Common questions

How many images in the trail?: A handful on screen. If you can count more than about 8 at once, the pool is too loud.
Can the images be links?: Not in the trail.
Will this tank the page?: It will if you spawn nodes forever. Pool, reuse, and bound the area.
What about mobile?: Skip it.
What does reduced motion do?: Show no trail.

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: 3D card flip