How much extra can a row hold?

A line or two. If the extra is a panel of groups, you wanted [Mega menu](/motion/mega-menu/) or [Expanding strip](/motion/expanding-strip/).

Does every row need motion?

No. A colour change on the active row is often enough.

There is no hover. A tap can open the extra or go to the item. Pick one.

Should the image follow the pointer?

See [Image follow list](/motion/image-follow-list/).

What does reduced motion do?

Keep the active state. Skip the grow and the slide.

Hoverable list

A hoverable list is a still list where each row reacts on hover or focus, so people can compare items without opening a new view.

Lists and cardsBuild difficulty: Easyx

Also called Interactive list, Hover rows, Reveal list, Animated index.

Here it is working.

Text revealMagnetic buttonFlip filterMarquee

Point at a row. It steps right, then home.

For designers

You reach for this when the names are the product: people, articles, work, settings. A row can change colour, grow a line of extra, or show a small action. The list does not go away. If a picture should chase the pointer, you wanted Image follow list. If the row should turn over, you wanted 3D card flip. The resting list has to work. Keyboard focus should match what hover does. Reduced motion can keep the highlight and skip the grow.

Use this when

People are scanning and comparing items that stay on the page.
A small extra on the row helps, without a new screen.
Hover and focus can show the same state.
The list is readable with the extra closed.

Reach for something else when

A picture should follow the pointer beside the list. Use Image follow list.
The items are a small stack of faces. Use Card fan.
The extra is the reverse of a card. Use 3D card flip.
Pictures should spawn behind the pointer. Use Image trail.
Nobody needs to react, only to see a set pass by. Use Infinite marquee.

How to build it

Use a real list. The row is the hit target. On enter and on focus, tween a background, a bit of padding, or a hidden extra to full height. If neighbours must move, Flip is the official way. Keep the extra in the document, hidden when shut. Do not make hover the only way to reach an action. On reduced motion, snap the extra open and keep a still highlight.

Official GSAP

gsap.to x.

gsap.to(row, { x: 10, duration: 0.25 });

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

Common questions

How much extra can a row hold?: A line or two. If the extra is a panel of groups, you wanted Mega menu or Expanding strip.
Does every row need motion?: No. A colour change on the active row is often enough.
What about touch?: There is no hover. A tap can open the extra or go to the item. Pick one.
Should the image follow the pointer?: See Image follow list.
What does reduced motion do?: Keep the active state. Skip the grow and the slide.

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: Infinite draggable grid