By default, Motion will create an appropriate animation for a snappy transition based on the types of value being animated. For instance, physical properties like x or scale will be animated via a spring simulation. Whereas values like opacity or color will be animated with a tween.

When a component mounts, it'll automatically animate to the values in animate if they're different from those defined in style or initial. You can set the initial prop to false to use the value in animate as the component's mounted state to disable mount animations.

Values in animate can also be set as a series of keyframes. This will animate through each value in sequence.

<motion.feGaussianBlur
animate={{ stdDeviation: [0, 5, 0] }}
/>

By default, a keyframes animation will start with the first item in the array. To use the current value instead, null can be passed as a placeholder. This way, if a keyframes animation starts while the value is currently animating, the transition will be more natural.

<motion.circle cx={500} animate={{ cx: [null, 100] }} />

Each of these keyframes will be spaced equidistantly throughout the animation, but you can override this by setting a times prop on the transition prop.

This is an array of the same length as the animation target with numbers between 0 and 1 that define when in the animation each keyframe should be hit.

Target objects are useful for simple, single-component animations. But sometimes we want to create animations that propagate throughout the DOM, and orchestrate those animations in a declarative way. We can do so with variants.

Variants are sets of pre-defined target objects.

const variants = {
visible: { opacity: 1 },
hidden: { opacity: 0 },
}

They're passed into motion components via the variants prop.

<motion.div variants={variants} />

These variants can be referred to by label, wherever you can set an animation target.

By default, all these animations will start simultaneously. But by using variants, we gain access to extra transition props like when, delayChildren, and staggerChildren that can let parents orchestrate the execution of child animations.

Auto-animating components will animate any changes to their layout. These layout changes can be anything: a change in the component's parent's flexbox, CSS grid, or switching between position: absolute and position: fixed.

For example, this component is animated by switching justify-content between flex-start and flex-end:

All layout animations are performed using the transform property rather than properties like width or top. This results in smoother animations, because it does not trigger expensive layouts during the animation.

Animating width and height with scaleX and scaleY can sometimes visually distort children. You can correct this by also applying animate to those children if they are motion elements:

Transform:animatedoesn't currently automatically animate transform, because the transform prop is currently reserved for performing layout animations.

Drag: The layoutTransition prop that animate={true} replaces used to have a hacky way to integrate it with drag that powered the drag-to-reorder demos. The plan is to properly fix integration with drag rather than re-expose this kind of API.

Inline components: Components that are set to display: inline aren't compatible with layout animations as they don't accept the CSS transform property. Try using display: inline-block instead.