Accordion
An example of an accordion component using Motion for React. Animate accordion content using height: auto and accessible markup. Uses focus events and shared layout animations for keyboard accessibility.
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.