You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<h1align="center"> <imgwidth="35"height="35"alt="Motion logo"src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion for React</h1>
5
3
<h3align="center">
6
-
An open source, production-ready animation library
4
+
An open sourceanimation library<br />for React
7
5
</h3>
8
-
<palign="center">Previously Framer Motion. Also available for <ahref="https://github.com/motiondivision/motion/tree/main/packages/motion">JavaScript</a> and <ahref="https://github.com/motiondivision/motion-vue">Vue</a></p>
Motion is an animation library for making beautiful animations.
50
33
51
-
...and a whole lot more.
34
+
* The **only** library with first‑class APIs for React, JavaScript, **and** Vue.
35
+
* Powered by a **hybrid engine** that blends JavaScript flexibility with native browser APIs for **120fps GPU‑accelerated** motion.
36
+
* Tiny footprint, tree‑shakable, and fully TypeScript‑typed.
52
37
53
-
## Get started
38
+
## 🍦 Flavours
54
39
55
-
### 🐇 Quick start
40
+
Motion is available for [React](https://motion.dev/docs/react), [JavaScript](https://motion.dev/docs/quick-start) and [Vue](https://motion.dev/docs/vue).
56
41
57
-
```bash
58
-
npm install motion
59
-
```
42
+
<details>
43
+
<summary>React ⬇</summary>
60
44
61
45
```jsx
62
46
import { motion } from"motion/react"
@@ -66,42 +50,72 @@ function Component() {
66
50
}
67
51
```
68
52
69
-
Get started with [Motion for React](https://motion.dev/docs/react-quick-start).
53
+
Get started with [Motion for React](https://motion.dev/docs/react).
70
54
71
-
## 🎨 Studio
55
+
</details>
72
56
73
-
57
+
<details>
58
+
<summary>JavaScript ⬇</summary>
74
59
75
-
Motion Studio is a versatile suite of developer tools allowing you to:
60
+
```javascript
61
+
import { animate } from"motion"
76
62
77
-
- Visually edit CSS and Motion easing curves in VS Code
78
-
- Generate CSS springs with LLMs
79
-
- Load Motion docs into your LLM
63
+
animate("#box", { x:100 })
64
+
```
80
65
81
-
Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
66
+
Get started with [JavaScript](https://motion.dev/docs/quick-start).
Get started with [Motion for Vue](https://motion.dev/docs/vue).
82
+
83
+
</details>
82
84
83
85
## 🎓 Examples
84
86
85
-
[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.
87
+
[Motion Examples](https://motion.dev/examples) offers 100s of free and Motion+ examples for beginners and advanced users alike. Easy copy/paste code to kick‑start your next project.
86
88
87
89
## ⚡️ Motion+
88
90
89
-
[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:
90
-
91
-
-Cursor
92
-
- Ticker
93
-
- AnimateNumber
94
-
- splitText
91
+
Learn, Design, Build. [Motion+](https://motion.dev/plus) is a one-time fee, lifetime update membership that provides:
92
+
- 160+ premium Motion Examples
93
+
-Motion UI features like Cursor and Ticker
94
+
-Motion Studio animation editing for VS Code `alpha`
95
+
-Early access content
96
+
-Private Discord
95
97
96
98
[Get Motion+](https://motion.dev/plus)
97
99
98
-
### 💎 Contribute
100
+
##🎨 Studio
99
101
100
-
- Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion/blob/master/CONTRIBUTING.md) has you covered.
102
+
101
103
102
-
### 👩🏻⚖️ License
104
+
Motion Studio is a versatile suite of developer tools allowing you to:
103
105
104
-
- Motion for React is MIT licensed.
106
+
- Visually edit CSS and Motion easing curves in VS Code
107
+
- Generate CSS springs with LLMs
108
+
- Load Motion docs into your LLM
109
+
110
+
Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
111
+
112
+
## 👩🏻⚖️ License
113
+
114
+
- Motion is MIT licensed.
115
+
116
+
## 💎 Contribute
117
+
118
+
- Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion/blob/master/CONTRIBUTING.md) has you covered.
105
119
106
120
## ✨ Sponsors
107
121
@@ -119,11 +133,11 @@ Motion powers Framer animations, the web builder for creative pros. Design and s
0 commit comments