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
- AnimatePresence | React exit animationsmotion.dev
- On layout choreographykarlkoch.me
- Animate with springs - WWDC23 - Videos - Apple Developerdeveloper.apple.com
- 10 Principles for Fluid UIkarlkoch.me
- Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
- Anime.js | JavaScript Animation Engineanimejs.com
- animations.devanimations.dev
- Inside Framer's Magic Motionnan.fyi
- Figma Motion: Animation Tool for Designers & Developersfigma.com
- useAnimate | Manual React animation controls | Motion for Reactframer.com
- Animated Elements | React Springreact-spring.dev
- GitHub - vasturiano/force-graph: Force-directed graph rendered on HTML5 canvasgithub.com