arc() | Animate along a curved path | Motion
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.
arc can change the path between two points from a straight line to a curved one. By default, when Motion animates x and y between two values, the element travels in a straight line. arc() can bend that line. import { arc, motion } from "motion/react" <motion.div animate={{ x: 200, y: 100 }} transition={{ duration: 1, path: arc() }} /> arc() is passed to transition.path. It works with motion components, animate, and useAnimate. Add to basketOpen example Usage Import arc from "motion" or "motion/react". import { arc } from "motion" When passed to transition.path, it will automatically…
saved by
related reading
- Animate with springs - WWDC23 - Videos - Apple Developerdeveloper.apple.com
- The physics behind spring animations - The Blog of Maxime Heckelblog.maximeheckel.com
- On layout choreographykarlkoch.me
- Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
- Great Animationsemilkowal.ski
- Anime.js | JavaScript Animation Engineanimejs.com
- animations.devanimations.dev
- Not a Numbernan.fyi
- Figma Motion: Animation Tool for Designers & Developersfigma.com
- Chloe's Gardenchloeyan.me
- The Easing Blueprintanimations.dev
- Jitter · A fast and simple motion design tool on the webjitter.video