Accordion
Matt Perry
In this tutorial, we're going to build the Accordion example step-by-step.
This example is rated intermediate difficulty, which means we'll spend some time explaining the Motion APIs we've chosen to use, but it assumes familiarity with JavaScript as a language.
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The Accordion tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
Introduction
The Accordion example shows how to build a fully accessible accordion component with smooth animations. It uses the press event handler from Motion to detect button clicks and the animate function to create smooth height transitions, content fade effects, and chevron rotations.
One of the most challenging aspects of building accordions is animating to height: auto. While browsers now support this via interpolate-size: allow-keywords, browser support is still limited. Motion makes this easy by automatically calculating the final height and creating smooth animations that work across all browsers.
