Framer Motion
A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams. Proudly open source.
Production-ready declarative animations.
A simple declarative syntax means you write less code. Less code means your codebase is easier to read and maintain.
View the APITweak the parameters to animate.
<motion.div animate={{ x: 0, y: 0, scale: 1, rotate: 0, }}/>
Animations that work like magic.
When animating between two separate components, Framer Motion will take care of everything in between.
Get startedTap to open a card.
const [selectedId, setSelectedId] = useState(null) <AnimateSharedLayout type="crossfade"> {items.map(item => ( <motion.div layoutId={item.id} onClick={() => setSelectedId(item.id)}> <motion.h5>{item.subtitle}</motion.h5> <motion.h2>{item.title}</motion.h2> </motion.div> ))} <AnimatePresence> {selectedId && ( <motion.div layoutId={selectedIdentifier}> <motion.h5>{item.subtitle}</motion.h5> <motion.h2>{item.title}</motion.h2> <motion.button onClick={() => setSelectedId(null)} /> </motion.div> )} </AnimatePresence></AnimateSharedLayout>
Complex events and gestures.
Framer Motion offers more advanced listeners and also extends the basic set of React event listeners.
View the APITap and drag the circle.
- onTapCancelpoint: { x: 544, y: 4627 }
- onDragEndpoint: { x: 7, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 7, y: -2 }
- onDragpoint: { x: 7, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 7, y: -2 }
- onDragpoint: { x: 6, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 6, y: -2 }
- onDragpoint: { x: 6, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 6, y: -2 }
- onDragpoint: { x: 6, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 6, y: -2 }
- onDragpoint: { x: 6, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 6, y: -2 }
- onDragpoint: { x: 6, y: -2 }, delta: { x: 0, y: 0 }, offset: { x: 6, y: -2 }
- onDragStartpoint: { x: 0, y: 0 }, delta: { x: 3, y: -1 }, offset: { x: 3, y: -1 }
- onTapStartpoint: { x: 537, y: 4629 }
Features
Explore the latest features. See why Framer Motion is the best React animation library.
See more examplesAnimation
Variants
Gestures
Drag
Scroll
Path
Get started with Framer Motion.
There’s a whole lot more to discover, dive into the complete API reference for Motion.
MotionValue
useSpring
- Server-side rendering
- CSS variable support
- Unmount animations
- Position transitions
- Accessibility options
- Handoff from Framer