Can the cards hold links?

Yes, once spread. While stacked, only the top face should take the press.

What does reduced motion do?

Show a row or an already-spread set. No arc.

How is this different from a slider?

A slider pages a choice. A fan shows a small set at once.

Card fan

A card fan is a small stack that spreads into an arc so each face can be seen at once.

Lists and cardsBuild difficulty: Mediumrotation

Also called Fan of cards, Spreading cards, Deck hover, Stack fan, Playing-card spread.

Here it is working.

Tap the stack

Hover the stack. The cards fan, then close.

For designers

You reach for this with a handful of items that share a shape: plans, people, featured pieces. Closed, it is a stack. Open, the cards rotate apart from a common origin so the faces peek out. If you need to read full body copy on every card, you wanted Hoverable list. If you have 20 items, you wanted Infinite draggable grid or a slider. Keep a way to spread without hover. Thumbs cannot hover a fan into existence. One card should be selectable without the rest eating the press. Reduced motion can show the cards already spread, or as a simple row.

Use this when

The set is small, often 3 to 8 cards with a shared size.
Seeing the faces together is the point, not reading long copy.
A press or a focus can spread the stack, not only a pointer.
Reduced motion can show a spread or a row with no rotation.

Reach for something else when

The set is a list of names to scan. Use Hoverable list or Image follow list.
There are many items to browse. Use Infinite draggable grid or Draggable slider.
You need the other side of one card. Use 3D card flip.
The cards should track the pointer as a trail. Use Image trail.

How to build it

Stack the cards in one container. Set a shared transform origin, usually the bottom centre. On open, tween each card to a rotation and a little x, staggered by 20 to 40 milliseconds. On close, reverse to a stack. Keep the hit target of each card in its spread position. A press on the stack can spread it. A press on a card can select it. Draggable if a card should be pulled out. On reduced motion, skip the arc and show a row.

Official GSAP

gsap.to rotation + x.

gsap.to(cards, { rotation: (i) => (i - 1) * 14, x: (i) => (i - 1) * 28, duration: 0.4, ease: 'power2.out' });

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

Common questions

How many cards?: Enough to read as a hand, not a deck. Past about 8, a list or grid is kinder.
Hover or click?: Click, tap or focus should spread it. Hover can be extra on a pointer.
Can the cards hold links?: Yes, once spread. While stacked, only the top face should take the press.
What does reduced motion do?: Show a row or an already-spread set. No arc.
How is this different from a slider?: A slider pages a choice. A fan shows a small set at once.

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: Image follow list