Version: Next

Stagger

Stagger component provides a declarative API to add Staggered Transitions.

Example#

Props#

Name Type Description Default
initial ISupportedTransitions Initial styles before the transition starts -
animate IStaggerStyleProps The styles to which each child should animate to while entering. -
exit IStaggerStyleProps The styles to which each child should animate to while exiting. -
visible boolean Determines whether to start the animation -

IStaggerStyleProps#

interface IStaggerStyleProps extends ISupportedTransition {
transition?: {
stagger?: {
/**
* Delay to add to each child
*/
offset: number,
/**
* When true, delay is added from the last child
*/
reverse?: boolean,
},
type?: 'timing' | 'spring',
easing?: (value: number) => number,
overshootClamping?: boolean,
restDisplacementThreshold?: number,
restSpeedThreshold?: number,
velocity?: number | { x: number, y: number },
bounciness?: number,
speed?: number,
tension?: number,
friction?: number,
stiffness?: number,
mass?: number,
damping?: number,
delay?: number,
duration?: number,
useNativeDriver?: boolean,
};
}