Arc

Whenever you're animating an element and you want it to take a curved path from start to finish, arc is the way to go.

Syntax

Here's a super simple implementation of arc

<motion.div
  animate={{
    x: flip ? -100 : 100,
  }}
  transition={{
    ...spring,
    path: arc(),
  }}
  className="absolute size-4 bg-blue-500  inset-y-0 my-auto rounded-full"
/>

path: arc() is responsible and is the only thing required for the animation to work.

There are a few properties available the you can play with to customize the trajectory of the animation.

1. strength - Bend strength
2. peak - Where the bend reaches its max heignt
3. direction - cw for clockwise and ccw for counter-clockwise
4. rotate you want to rotate the element along the path

Stack Cards

Using layoutId and arc to create an arc animation.