OptionalenterCSS class(es) for the enter animation target state. Applied after enterFrom is removed to trigger the transition.
Use ! prefix (Tailwind important) if needed for specificity:
OptionalenterCSS class(es) for the initial state before enter animation starts.
Should include transition-* and duration-* for CSS transitions.
These are removed after the first frame to trigger the transition.
OptionalenterEnter-only group override. Takes precedence over group for the enter animation only.
OptionalenterCSS class(es) for the final state after enter animation completes. These persist on the element after animation ends.
OptionalexitCSS class(es) to apply at the start of exit animation.
Should include transition-* and duration-* for CSS transitions.
OptionalexitExit-only group override. Takes precedence over group for the exit animation only.
OptionalexitCSS class(es) for the target state of exit animation. Applied after exit to trigger the transition.
Use ! prefix (Tailwind important) if needed for specificity:
OptionalgroupAttach this animation to a shared AnimationGroup — the animation
waits for the group's gate before starting, and signals completion when
it finishes. Combined with Animation.sequence(), this lets you
choreograph animations across multiple blocks (e.g. one each per word
in a headline).
Applies to both enter and exit unless narrowed by enterGroup / exitGroup.
OptionalmoveReorder (FLIP) animation config. When set, each animates items
that change position within a reactive update — the classic
"toggle-and-sort" case where a row slides to its new slot instead
of teleporting.
Two fields, mirroring the enter/exit split of enterFrom/enter:
transform: given the delta between the element's old and new
positions, return the CSS transform value that puts the element
back at its old spot. Applied inline, prepended to any
existing computed transform so class-based transforms are preserved.
Use one of the built-in helpers (Animation.moveTranslate3d, etc.)
or supply your own function for exotic effects (rotation-on-move,
overshoot, etc.).transition: CSS class(es) that carry the transition-* /
duration-* / easing for the release. Matches the enter/exit
convention — a class rather than an inline transition string so
Tailwind / your design system stays in charge of timings.move: {
transform: Animation.moveTranslate3d,
transition: "transition-transform duration-300 ease-out",
}
For clean composition with enter / exit in the same batch, keep
the move duration / easing matched to the enter/exit ones — the
two animations sum layout-wise, and mismatched timings drift out of
phase mid-play.
OptionalonCalled before enter animation starts, after element is in DOM
OptionalonCalled before exit animation starts
OptionalonCalled after enter animation completes
OptionalonCalled after exit animation completes, before element is removed from DOM
OptionalrespectWhether to skip animations when user prefers reduced motion. When true and reduced motion is preferred, animations complete instantly.
OptionalstaggerStagger timing for list items.
OptionaltimeoutMaximum time in milliseconds to wait for animation/transition to complete. If exceeded, animation is considered complete.
Troubleshooting: If animations consistently hit this timeout,
the transitionend event isn't firing. Check that your CSS classes
include both transition-* AND duration-* properties.
Options for list animations (used with
each)