Accordion Expand
One section opens as the previous one closes, both heights easing over the same beat so the list never jumps.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Accordion Expand
*
* One section at a time. Opening a row closes whichever row was open,
* and both heights ease over the same beat so the list resettles insteadAbout this pattern
The workhorse of help centres, settings pages and long forms. Height is one of the few properties worth animating outright, because here the motion genuinely is a size change — but it runs as a short eased tween rather than a spring, since a panel that springs past its own content flashes clipped text at the end of every open. Keeping exactly one section open is what makes the list feel calm: the closing panel and the opening one run over the same duration, so the rows below travel once, in one direction, instead of jumping twice. Inside the panel the answer is laid out at its final width from the first frame and simply revealed by the clip, so no glyph is ever scaled or reflowed by the container moving around it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
Toggle sections unfold in place with the marker rotating.
Related patterns
- Tree Node ExpandA folder's chevron turns as its children unfold with a small stagger.
- Reasoning Steps UnfoldA collapsed trace line opens into numbered reasoning steps, each arriving as the panel grows.
- Pagination Page TurnThe current rows leave in the direction you asked for and the next set arrives from the opposite side.