Motion
An open source animation library
for JavaScript, React and Vue
```bash
# React / JavaScript
npm install motion
# Vue
npm install motion-v
```
## Table of Contents
1. [Why Motion?](#why-motion)
2. [🍦 Platforms](#-platforms)
3. [🎓 Examples](#-examples)
4. [⚡️ Motion+](#-motion)
5. [👩🏻⚖️ License](#-license)
6. [💎 Contribute](#-contribute)
7. [✨ Sponsors](#-sponsors)
## Why Motion?
- **Simple API:** First-class React, JavaScript, and Vue packages.
- **Hybrid engine:** Power of JavaScript combined with native browser APIs for 120fps, GPU-accelerated animations.
- **Production-ready:** TypeScript, extensive test suite, tree-shakable, tiny footprint.
**Batteries included:** Gestures, springs, layout transitions, scroll-linked effects, timelines.
## 🍦 Platforms
Motion is available for [React](https://motion.dev/docs/react), [JavaScript](https://motion.dev/docs/quick-start) and [Vue](https://motion.dev/docs/vue).
React ⬇
```jsx
import { motion } from "motion/react"
function Component() {
return
}
```
Get started with [Motion for React](https://motion.dev/docs/react).
JavaScript ⬇
```javascript
import { animate } from "motion"
animate("#box", { x: 100 })
```
Get started with [JavaScript](https://motion.dev/docs/quick-start).
Vue ⬇
```html
```
Get started with [Motion for Vue](https://motion.dev/docs/vue).
## 🎓 Examples
Browse 100+ free and 180+ premium [Motion Examples](https://motion.dev/examples), with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
## ⚡️ Motion+
A one-time payment, lifetime-updates membership:
- **180+ premium examples**
- **Premium APIs** like [Cursor](https://motion.dev/docs/cursor) and [Ticker](https://motion.dev/docs/react-ticker)
- **Visual editing** for VS Code (alpha)
- **Private Discord**
- **Early access content**
[Get Motion+](https://motion.dev/plus)
## 👩🏻⚖️ License
- Motion is MIT licensed.
## 💎 Contribute
- Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion/blob/master/CONTRIBUTING.md) has you covered.
## ✨ Sponsors
Motion is sustainable thanks to the kind support of its sponsors.
[Become a sponsor](https://motion.dev/sponsor)
### Partner
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)