How to Animate an Accordion Without Jank
Why animating height is expensive, the two reliable techniques, how to treat the content inside, and the accessibility rules an accordion must keep.
Core Takeaway
Animating height forces the browser to recalculate layout on every frame, which is why accordions often stutter. The reliable fix is to animate a transform or a clipped container instead of the height itself, or to measure the content and animate to a known pixel value. Keep the content readable while it moves, and never let the animation break aria-expanded or keyboard access.
Why height animation is expensive
Height is a layout property. When it changes, the browser recalculates the position of everything below it, on every frame. On a small panel this is usually fine; inside a long page or a list of accordions it is not. Transform and opacity can be handled by the compositor, which is why they are the usual advice for animation.
Two techniques that work
The first is to measure the content height in JavaScript and animate from zero to that pixel value, then set height back to auto when the transition ends. The second is to keep the container fixed and animate a CSS grid row from 0fr to 1fr, or clip a transform. Newer browsers are adding animatable intrinsic sizes, but support is not universal, so the measured approach is still the safe default.
Treat the content, not just the box
Text that slides while it fades can look blurred or messy. A short opacity fade, or a small stagger for rows inside the panel, reads better than moving paragraphs vertically. Do not animate every child; pick the one or two that carry the hierarchy.
Open slowly, close quickly
Opening reveals information, so the user needs a moment to follow it. Closing is a dismissal and can be faster. If several sections can be open at once, avoid animating the collapse of three panels at full length; shorten the close so the page settles.
Accessibility rules the animation must not break
The header should be a button with aria-expanded, and the panel should be linked with aria-controls. Hidden content should not be reachable by keyboard or screen readers. If you animate with a wrapper, make sure the wrapper does not trap focus or leave collapsed content announced. The WAI-ARIA accordion pattern is the reference.
Reduced motion and long lists
For reduced motion, skip the height movement and show the panel immediately, or use a very short fade. In long lists, consider animating only the panel that changed and letting the rest of the page settle without motion.
Production Implementation Snippet
/* Grid-row technique: no JavaScript measurement */
.panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 220ms ease;
}
.panel[data-open="true"] {
grid-template-rows: 1fr;
}
.panel > div {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.panel {
transition: none;
}
}Key Principles to Remember
- Height is a layout property, so animating it can drop frames
- Measure the content or clip a transform instead of animating auto
- Fade content in rather than sliding paragraphs
- Opening can be slower than closing
- Keep aria-expanded and keyboard access working throughout
Frequently Asked Questions
Sources
- Accordion Pattern — W3C WAI-ARIA Authoring Practices
- Animation performance and frame rate — web.dev
- prefers-reduced-motion — MDN Web Docs