loading code fetching the highlighted snippet
FIG-001/ VARIANTS
named variants.
A variants map gives you named animation states. Pass the label string to animate and motion looks it up and tweens there — the workhorse pattern for any binary toggle.
- Each variant is an animation target object keyed by a label. The shape is identical
to what you'd pass to
animate={ opacity, scale, … }directly — variants are just a way to name those targets. -
animate={isOpen ? "open" : "closed"}swaps between labels. Motion tweens between the two variant objects automatically — no need to spread the props manually or duplicate the transition config. - The real power kicks in when the parent's variant cascades into descendants — every
child
motion.*with matching variant keys animates together. Seevariants-propagationfor that.
category · variants
sheet · sheet 01 / 01
⟳ to re-run