Animation

There are multiple ways to animate in Framer Motion, scaling to the complexity of your needs.

Simple animations

Most animations will be performed with the motion component and the animate prop.

<motion.div animate={{ x: 100 }} />

When any value in animate changes, the component will automatically animate to the updated target.

Transitions

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.

However, you can define different types of animation by passing a default transition to the transition prop.

<motion.div
  animate={{ x: 100 }}
  transition={{ ease: "easeOut", duration: 2 }}
/>

Enter animations

When a motion component is first created, 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 disable enter animations.

<motion.div animate={{ x: 100 }} initial={false} />

Exit animations

In React, when a component is removed from the tree, it's removed instantly. Framer Motion provides the AnimatePresence component to keep components in the DOM while they perform an exit animation.

<AnimatePresence>
  {isVisible && (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    />
  )}
</AnimatePresence>

Keyframes

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

<motion.div
  animate={{ x: [0, 100, 0] }}
/>

We can use the current value as the initial keyframe by passing a wildcard keyframe, null.

<motion.div animate={{ x: [null, 100, 0] }}/>

This way, if a keyframes animation starts while the value is currently animating, the transition will be more natural. It also reduces duplication in our code.

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

Each keyframe will be spaced evenly throughout the animaton. You can override this by setting the times option via transition.

times is an array of the same length as the keyframes array, with numbers between 0 and 1 definining where in the animation each keyframe should be hit.

<motion.circle
  cx={500}
  animate={{ cx: [null, 100, 200] }}
  transition={{ duration: 3, times: [0, 0.2, 1] }}
/>