Does every row need a unique image?

No. Repeats are fine. Empty rows should not flash the last picture. Clear the preview on leave.

Focus on a row can show the matching image in a fixed place.

Will this work on a phone?

The follow will not. The list at rest is the design.

What does reduced motion do?

No follow. Show a still preview beside the active row, or none.

Image follow list

An image follow list is a list of names or titles where one preview tracks the pointer as it moves along the rows.

Lists and cardsBuild difficulty: MediumquickTo

Also called Follow image list, Hover preview list, Cursor image list, Project list hover.

Here it is working.

Text revealMask revealCard fanMarquee

Move down the names. The tile follows the row.

For designers

You reach for this when the words do the scanning and the picture is a check. The list stays still. The preview swaps as the pointer crosses a row, and eases after the pointer by a fraction. If the picture needs to sit in the row, you wanted Hoverable list. If pictures should spawn behind the pointer with no list, you wanted Image trail. The names have to work without the preview. Touch has no pointer to follow, so a tap can pin a still image next to the row, or show none. Do not hide the label in favour of a photograph that has not loaded.

Use this when

People scan a list of names and want a picture as confirmation.
Hover is a real input, and the list is readable on its own.
One preview is enough, swapped per row, not a new image each time.
Touch and keyboard can use the list without the follow.

Reach for something else when

The image belongs in the row. Use Hoverable list.
There is no list, only pictures behind the pointer. Use Image trail.
The items are cards in a stack. Use Card fan.
People should drag a field of pictures. Use Infinite draggable grid.

How to build it

Keep a real list in the document. One preview element sits aside or over the list, hidden until a row is active. On row enter, swap the source, then use quickTo on x and y so the preview eases after the pointer. Translate the preview drawing, not the rows. Leave the hit targets where they were. Preload images or set sizes so the first swap does not jump. On touch, skip the follow. On reduced motion, pin a still preview or show none.

Official GSAP

gsap.quickTo.

const yTo = gsap.quickTo(pic, 'y', { duration: 0.4, ease: 'power3' });
yTo(index * 36);

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

Common questions

Does every row need a unique image?: No. Repeats are fine. Empty rows should not flash the last picture. Clear the preview on leave.
What about keyboard?: Focus on a row can show the matching image in a fixed place.
Will this work on a phone?: The follow will not. The list at rest is the design.
Should the image be a link?: Prefer the row as the link.
What does reduced motion do?: No follow. Show a still preview beside the active row, or none.

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: Hoverable list