Animation #

Animation component is a set of animation components. You can achieve animation effects by configuring related properties.

Import #

• Animation.Fade Fade animation.
• Animation.Collapse Collapse animation.
• Animation.Bounce Bounce animation.
• Animation.Slide Slide animation.
• Animation.Transition Custom animation.

Examples #

Fade #

Collapse #

Bounce #

Slide #

Transition #

Configure the following className in Transition and customize the related css animation.

exitedClassName="custom-exited"
exitingClassName="custom-exiting"
enteredClassName="custom-entered"
enteringClassName="custom-entering"

Child refs #

Animation components preserve object and callback refs on their child, including React 19 callback-ref cleanup. A stable child ref stays attached while the animation changes state.

const inputRef = React.useRef(null);

<Animation.Fade in transitionAppear onEntered={() => inputRef.current?.focus()}>
  <input ref={inputRef} />
</Animation.Fade>;

A ref on the Animation component itself refers to the Transition instance. Render-function children must forward the provided props and ref to their animated node.

Reduced motion #

Animation.Fade, Animation.Collapse, Animation.Bounce, Animation.Slide and Animation.Transition respect the system's prefers-reduced-motion setting by default. Set reduceMotion to true to disable motion, or false to allow it explicitly, including when the system requests reduced motion.

<Animation.Fade in><div>Use the system preference.</div></Animation.Fade>
<Animation.Bounce in reduceMotion><div>Reduce motion.</div></Animation.Bounce>
<Animation.Slide in reduceMotion={false}><div>Allow motion.</div></Animation.Slide>

The component setting takes precedence over CustomProvider reduceMotion, which takes precedence over the system preference. Component defaults configured through CustomProvider components follow the existing default-prop merge rules.

Reduced transitions still call onEnter, onEntering, onEntered, and the corresponding exit callbacks in order, without waiting for CSS completion events or timeout. Enabling reduced motion during a transition completes the current request. Restoring motion affects the next enter or exit; it does not replay a completed animation.

This policy removes CSS transition durations and reduces CSS animations to one zero-duration, zero-delay iteration on the animated node only. Keyframes, animation direction and fill mode still determine its final styles, including for custom looping animations. Nested content and unrelated animations are unaffected. Render-function children must forward the provided props and ref to that node. Server-rendered automatic transitions use the system preference through CSS before hydration.

Props #

<Animation.Fade> #

<Animation.Collapse> #

<Animation.Bounce> #

<Animation.Slide> #

<Animation.Transition> #

Placement #

type Placement = 'top' | 'bottom' | 'right' | 'left';