Motion for React
An open source, production-ready animation library
Previously Framer Motion. Also available for JavaScript and Vue
Motion for React is an open source, production-ready library thatβs designed for all creative developers.
It's the only animation library with a hybrid engine, combining the power of JavaScript animations with the performance of native browser APIs.
It looks like this:
```jsx
```
It does all this:
- [Springs](https://motion.dev/docs/react-transitions#spring)
- [Keyframes](https://motion.dev/docs/react-animation#keyframes)
- [Layout animations](https://motion.dev/docs/react-layout-animations)
- [Shared layout animations](https://motion.dev/docs/react-layout-animations#shared-layout-animations)
- [Gestures (drag/tap/hover)](https://motion.dev/docs/react-gestures)
- [Scroll animations](https://motion.dev/docs/react-scroll-animations)
- [SVG paths](https://motion.dev/docs/react-animation#svg-line-drawing)
- [Exit animations](https://motion.dev/docs/react-animation#exit-animations)
- [Server-side rendering](https://motion.dev/docs/react-motion-component#server-side-rendering)
- [Independent transforms](https://motion.dev/docs/react-motion-component#style)
- [Orchestrate animations across components](https://motion.dev/docs/react-animation#orchestration)
- [CSS variables](https://motion.dev/docs/react-animation#css-variables)
...and a whole lot more.
## Get started
### π Quick start
```bash
npm install motion
```
```jsx
import { motion } from "motion/react"
function Component() {
return
}
```
Get started with [Motion for React](https://motion.dev/docs/react-quick-start).
## π¨ Studio
Motion Studio is a versatile suite of developer tools allowing you to:
- Visually edit CSS and Motion easing curves in VS Code
- Generate CSS springs with LLMs
- Load Motion docs into your LLM
Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
## π Examples
[Motion Examples](https://examples.motion.dev/react) offers 100s of free and Motion+ examples for beginners and advanced users alike. Easy copy/paste code to kickstart your next project.
## β‘οΈ Motion+
[Motion+](https://motion.dev/plus) is a one-time fee, lifetime membership that unlocks over 100 premium examples, early access, powerful Studio tools, a private Discord, and exclusive APIs like:
- Cursor
- Ticker
- AnimateNumber
- splitText
[Get Motion+](https://motion.dev/plus)
### π Contribute
- Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion/blob/master/CONTRIBUTING.md) has you covered.
### π©π»ββοΈ License
- Motion for React is MIT licensed.
## β¨ Sponsors
Motion is sustainable thanks to the kind support of its sponsors.
### Partners
#### Framer
Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
### Platinum
### Gold
### Silver
### Personal
- [OlegWock](https://sinja.io)
- [Lambert Weller](https://github.com/l-mbert)
- [Jake LeBoeuf](https://jklb.wf)
- [Han Lee](https://github.com/hahnlee)