Animate

A versatile component allowing for full control of your animations. The Animate component allows you to define your own animations, use predefined animation Clips or bind reactive Links.

Importing

1 
import { Animate } from '@infinityfx/lively';

Usage

Properties

children:React.ReactNode

The child elements wrapped and animated by the component.

animate?:ClipOptions | Clip = {}

Defines default animation keyframes played on mount or bound to reactive AnimationLinks.

initial?:ClipInitials | string = {}

Initial property state values assigned before the animation begins.

clips?:{ [key: string]: ClipOptions | Clip } = {}

Defines a dictionary of named animation clips that can be referenced within triggers.

triggers?:AnimateTriggers = { animate: ['mount'] }

Map linking named animation clips to reactive values or lifecycle events like 'mount' and 'unmount'.

inherit?:boolean | number = false

Whether to inherit clips from a parent Animate component and allow animation triggers to cascade.

stagger?:number = 0.07

Delay in seconds between staggered animations across multiple child elements.

staggerLimit?:number = 10

Maximum number of child elements to stagger before animating remaining elements simultaneously.

correction?:CorrectionAlignment | ScaleCorrection = 'self'

Enables scale distortion correction for border radii, box shadows, and nested child elements.

transition?:TransitionOptions | boolean

Configures transition animations during morphing or layout changes (requires a parent LayoutGroup for layout updates).

morph?:string

A globally unique ID enabling automatic morphing animations when elements with matching IDs mount or unmount.

paused?:boolean = false

Whether all playback state for this animation is currently paused.

onAnimationEnd?:(animation?: string) => void

Callback fired when an animation sequence finishes playing.

ref?:React.Ref<Animator>

React ref object giving direct access to the underlying Animator instance.