Motion

Usage#

Pass motionProps to a component's animatable element to configure enter/leave transitions. Collapsible components accept it on Root, popup components accept it on Popup.

motionProps={{ name: 'slide', cssVarPrefix: 'content', hideStrategy: 'none' }}

Behavior#

Animation Phases#

The motion system applies six CSS classes during the transition lifecycle based on the name prefix.

Enter phase — applied when the element appears:

Leave phase — applied when the element disappears:

Use these classes to define CSS transitions or keyframe animations.

motionProps={{ name: 'fade' }}

.fade-enter-from {
    opacity: 0;
    transform: translateY(-10px);
}
.fade-enter-active {
    transition: all 200ms ease-out;
}
.fade-enter-to {
    opacity: 1;
    transform: translateY(0);
}
 
.fade-leave-from {
    opacity: 1;
    transform: translateY(0);
}
.fade-leave-active {
    transition: all 200ms ease-in;
}
.fade-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}

CSS Variable Prefix#

Use cssVarPrefix to inject element dimension variables during animations. The motion system measures the element and sets these CSS custom properties, enabling height/width-based transitions without hardcoded values.

motionProps={{ name: 'expand', cssVarPrefix: 'content' }}

.expand-enter-active,
.expand-leave-active {
    transition: max-height 300ms ease;
    overflow: hidden;
}
 
.expand-enter-to,
.expand-leave-from {
    max-height: var(--content-height);
}
 
.expand-enter-from,
.expand-leave-to {
    max-height: 0;
}

Hide Strategy#

Use hideStrategy to control how content is hidden after the leave animation completes.

Collapsible content typically uses 'none' with CSS-driven height transitions, while popups work well with the default 'display' strategy.

Headless#

See useMotion for the underlying hook API, imperative methods, lifecycle callbacks, and mount/unmount control.