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
Motion is an animation library and suite of developer tools for making beautiful animations.
12
14
13
-
It's the only library with first-class APIs for JS, React and Vue. It's also the only library with a **hybrid engine**, combining the power of JS animations with the performance of native browser APIs.
15
+
```bash
16
+
npm install motion
17
+
```
14
18
15
-
## 🍦 Flavours
19
+
## Table of Contents
16
20
17
-
### JavaScript
21
+
1.[Why Motion?](#why-motion)
22
+
2.[🍦 Flavours](#-flavours)
23
+
3.[🎓 Examples](#-examples)
24
+
4.[🎨 Studio](#-studio)
25
+
5.[⚡️ Motion+](#-motion)
26
+
6.[👩🏻⚖️ License](#-license)
27
+
7.[💎 Contribute](#-contribute)
28
+
8.[✨ Sponsors](#-sponsors)
18
29
19
-
```javascript
20
-
import { animate } from"motion"
30
+
## Why Motion?
21
31
22
-
animate("#box", { x:100 })
23
-
```
32
+
Motion is an animation library for making beautiful animations.
24
33
25
-
Get started with [JavaScript](https://motion.dev/docs/quick-start).
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.
26
37
27
-
### React
38
+
##🍦 Flavours
28
39
29
-
```bash
30
-
npm install motion
31
-
```
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).
41
+
42
+
<details>
43
+
<summary>React ⬇</summary>
32
44
33
45
```jsx
34
46
import { motion } from"motion/react"
@@ -38,9 +50,25 @@ function Component() {
38
50
}
39
51
```
40
52
41
-
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).
54
+
55
+
</details>
56
+
57
+
<details>
58
+
<summary>JavaScript ⬇</summary>
59
+
60
+
```javascript
61
+
import { animate } from"motion"
62
+
63
+
animate("#box", { x:100 })
64
+
```
65
+
66
+
Get started with [JavaScript](https://motion.dev/docs/quick-start).
67
+
68
+
</details>
42
69
43
-
### Vue
70
+
<details>
71
+
<summary>Vue ⬇</summary>
44
72
45
73
```html
46
74
<script>
@@ -52,6 +80,23 @@ Get started with [Motion for React](https://motion.dev/docs/react-quick-start).
52
80
53
81
Get started with [Motion for Vue](https://motion.dev/docs/vue).
54
82
83
+
</details>
84
+
85
+
## 🎓 Examples
86
+
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.
88
+
89
+
## ⚡️ Motion+
90
+
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
97
+
98
+
[Get Motion+](https://motion.dev/plus)
99
+
55
100
## 🎨 Studio
56
101
57
102
@@ -64,21 +109,6 @@ Motion Studio is a versatile suite of developer tools allowing you to:
64
109
65
110
Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
66
111
67
-
## 🎓 Examples
68
-
69
-
[Motion Examples](https://examples.motion.dev) offers 100s of free and Motion+ examples for beginners and advanced users alike. Easy copy/paste code to kickstart your next project.
70
-
71
-
## ⚡️ Motion+
72
-
73
-
[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:
74
-
75
-
- Cursor
76
-
- Ticker
77
-
- AnimateNumber
78
-
- splitText
79
-
80
-
[Get Motion+](https://motion.dev/plus)
81
-
82
112
## 👩🏻⚖️ License
83
113
84
114
- Motion is MIT licensed.
@@ -103,11 +133,11 @@ Motion powers Framer animations, the web builder for creative pros. Design and s
0 commit comments