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 an accessible accordion component with smooth animations. Each item can expand and collapse to reveal content, with animated height transitions and visual effects.
This tutorial uses several Motion APIs: the animate prop to control animation states, variants to define reusable animation configurations, layoutId for the shared focus ring animation, and the MotionConfig component to set default animation options across multiple elements.
Motion makes animating height: auto easy, which is normally difficult with CSS alone. The example also demonstrates how to combine multiple animated properties like height, opacity, and filter to create polished UI transitions.
