Chapter 7: Animation

Core Idea

Radix Primitives can be animated with plain CSS keyframes (simplest path) or with JS animation libraries via the forceMount prop, which hands mount/unmount control to the animation library instead of Radix.

Key Concepts

• CSS-keyframe animation: works out of the box — Radix suspends unmount while a CSS exit animation plays, so data-state="closed" animations complete before the element leaves the DOM.
• forceMount prop: available on many components' content parts; when set, Radix always renders the part (skips its own mount/unmount logic) so an external library can control presence based on its own animation state.
• Exit-animation delegation: without forceMount, a JS animation library can't animate an element out because Radix would have already removed it from the DOM/React tree.

Code Examples

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

.DialogOverlay[data-state="open"] { animation: fadeIn 300ms ease-out; }
.DialogOverlay[data-state="closed"] { animation: fadeOut 300ms ease-in; }

• What it demonstrates: the minimal CSS-only pattern — target data-state for both mount and unmount animation, no JS involved.

Key Takeaways

1. Default to CSS keyframes first — it requires no forceMount wiring and Radix handles the unmount delay for you automatically.
2. Reach for forceMount + a JS animation library (react-spring, Framer Motion/Motion, GSAP) only when you need animation Radix's CSS-suspend approach can't express (e.g. layout animations, spring physics).
3. When using forceMount, you take over full responsibility for conditionally rendering the part based on the animation library's own open/closed state.

Connects To

• Styling: data-state is the same attribute driving both CSS styling and CSS animation here.
• Dialog / Popover / DropdownMenu: components whose Content/Overlay parts commonly need forceMount for JS-driven exit animations.