Does this replace the live Accordion page?

No. Structure, single versus multiple, details versus ARIA, deep links and print all live there. This page is the open and close.

How long should it run?

150 to 250 milliseconds. If someone can click twice before it finishes, it is too slow.

Height. The page has to move. A fade on a panel that is already taking up space looks like a mistake.

What about nested accordions?

Do not. Two levels of collapse is a content problem, and motion will not save it.

What does reduced motion do?

The panel still opens. What you skip is the tween.

Accordion

Accordion motion is the open and close: the panel eases to its height, the chevron turns, and the rows below shift rather than jump.

Buttons and controlsBuild difficulty: Easygsap.to

Also called Expand collapse, Height animation, Disclosure motion, FAQ animation, Collapsible motion.

Here it is working.

Open a question. Only the height moves.

For designers

The live Accordion page owns the decisions that matter first: whether this should be an accordion at all, headings, single versus multiple, the native details element, and the accessibility pattern. Read that page if any of those are still open. This page is only the movement. Keep it short. The live page already names 150 to 250 milliseconds as the window where the reflow finishes before it feels like a wait. Longer than that, and people click twice. Animate height or the grid row, and rotate one chevron. Fade the panel if you must, but do not make fade the only signal.

Use this when

The live Accordion page has already settled the structure, and you now need the open and close to feel considered.
The panel has a real height to travel, more than a single line.
Rows below should slide with the panel instead of popping.
Reduced motion can snap open and closed with no tween.

Reach for something else when

You are still choosing accordion, tabs, a plain heading or a menu. Start with the Accordion page.
A whole block should arrive as someone scrolls, with no click. Use Element reveal or Mask reveal.
Tiles should rearrange when someone picks a category. Use Flip filter.
Named steps should play as the page is scrolled. Use Step-by-step timeline.

How to build it

Build a real accordion first. Heading, button, panel, aria-expanded, the chevron that actually turns. Then animate. Measure the panel height, or animate the grid row from 0 to 1fr. Tween that, not a scaleY, or the text squashes. 150 to 250 milliseconds, an ease that starts quickly and settles. Rotate the chevron in the same window. If the rest of the page should slide into the new layout, capture the items with Flip, toggle the open class, then Flip.from so siblings travel. Kill a running tween if the same header is pressed again. On reduced motion, set the panel open or closed in one frame.

Official GSAP

gsap.to with height: 'auto'.

gsap.to(panel, {
  height: open ? 'auto' : 0,
  duration: 0.4, ease: 'power2.inOut',
});

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

Common questions

Does this replace the live Accordion page?: No. Structure, single versus multiple, details versus ARIA, deep links and print all live there. This page is the open and close.
How long should it run?: 150 to 250 milliseconds. If someone can click twice before it finishes, it is too slow.
Height or fade?: Height. The page has to move. A fade on a panel that is already taking up space looks like a mistake.
What about nested accordions?: Do not. Two levels of collapse is a content problem, and motion will not save it.
What does reduced motion do?: The panel still opens. What you skip is the tween.

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: Morphing accordion