Chapter 62: arc()

Core Idea

Use Motion's arc() factory to animate elements along a curved path. Configure strength, peak, direction, and tangent rotation. Works with motion components, useAnimate, and layout animations across React, Vue, and JavaScript.

Key Concepts

• Keyframe animations: transition.path works anywhere a transition is accepted.
• Layout animations: Pass arc() to transition.layout.path to curve the motion of a layout animation.
• Springs: transition.path only describes the curve.
• strength: Default: 0.5
• peak: Default: 0.5
• direction: Default: automatic
• rotate: Default: false
• Memoisation: When using automatic direction
• Stay in the loop.: Deep dives on animation

Code Examples

import { arc, motion } from "motion/react"

<motion.div
  animate={{ x: 200, y: 100 }}
  transition={{ duration: 1, path: arc() }}
/>

• What it demonstrates: Core usage pattern for arc().

Key Takeaways

1. arc() supports Keyframe animations.
2. arc() supports Layout animations.
3. arc() supports Springs.

Connects To

• animate(): related Motion doc page.
• React transitions: related Motion doc page.
• Layout animations: related Motion doc page.