Skip to main content

Animated component

The <Animated /> component renders a container that can be animated.


const MyComposition = () => (
Scale({ by: 1, initial: 10 }),
Move({ y: -40, start: 50 }),
Move({ y: 40, start: 100 }),
Fade({ to: 0, start: 150 }),
Scale({ by: 0, start: 150, mass: 75 }),
<HelloWorld />


animationsAnimation[]List of all animations for this element. (The order is relevant if there are multiple animations that affect the same property.)
absolute?booleanIf true, the animation container will be positioned absolutely. Defaults to false.
in?numberFrame number at which the animation container starts being visible ("In" point), if set.
out?numberFrame number after which the animation container stops being visible ("Out" point), if set.
delay?numberNumber of frames by which all animation starts are delayed. Does not affect in and out. Defaults to 0.
className?stringClass name that is applied to the animation container.
children?React.ReactNodeChildren that are rendered inside the animation container.
style?React.CSSPropertiesStyles that are applied to the animation container.