motion 12.23.12 → 12.23.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -40
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
1
|
<h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion</h1>
|
|
3
2
|
<h3 align="center">
|
|
4
3
|
An open source animation library<br />for JavaScript, React and Vue
|
|
@@ -11,31 +10,32 @@
|
|
|
11
10
|
<img alt="NPM License" src="https://img.shields.io/npm/l/motion?color=FF2B6E">
|
|
12
11
|
</p>
|
|
13
12
|
|
|
14
|
-
|
|
15
13
|
```bash
|
|
14
|
+
# React / JavaScript
|
|
16
15
|
npm install motion
|
|
16
|
+
|
|
17
|
+
# Vue
|
|
18
|
+
npm install motion-v
|
|
17
19
|
```
|
|
18
20
|
|
|
19
21
|
## Table of Contents
|
|
20
22
|
|
|
21
23
|
1. [Why Motion?](#why-motion)
|
|
22
|
-
2. [🍦
|
|
24
|
+
2. [🍦 Platforms](#-platforms)
|
|
23
25
|
3. [🎓 Examples](#-examples)
|
|
24
|
-
4. [
|
|
25
|
-
5. [
|
|
26
|
-
6. [
|
|
27
|
-
7. [
|
|
28
|
-
8. [✨ Sponsors](#-sponsors)
|
|
26
|
+
4. [⚡️ Motion+](#-motion)
|
|
27
|
+
5. [👩🏻⚖️ License](#-license)
|
|
28
|
+
6. [💎 Contribute](#-contribute)
|
|
29
|
+
7. [✨ Sponsors](#-sponsors)
|
|
29
30
|
|
|
30
31
|
## Why Motion?
|
|
31
32
|
|
|
32
|
-
|
|
33
|
+
- **Simple API:** First-class React, JavaScript, and Vue packages.
|
|
34
|
+
- **Hybrid engine:** Power of JavaScript combined with native browser APIs for 120fps, GPU-accelerated animations.
|
|
35
|
+
- **Production-ready:** TypeScript, extensive test suite, tree-shakable, tiny footprint.
|
|
36
|
+
**Batteries included:** Gestures, springs, layout transitions, scroll-linked effects, timelines.
|
|
33
37
|
|
|
34
|
-
|
|
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.
|
|
37
|
-
|
|
38
|
-
## 🍦 Flavours
|
|
38
|
+
## 🍦 Platforms
|
|
39
39
|
|
|
40
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
41
|
|
|
@@ -84,30 +84,19 @@ Get started with [Motion for Vue](https://motion.dev/docs/vue).
|
|
|
84
84
|
|
|
85
85
|
## 🎓 Examples
|
|
86
86
|
|
|
87
|
-
[Motion Examples](https://motion.dev/examples)
|
|
87
|
+
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.
|
|
88
88
|
|
|
89
89
|
## ⚡️ Motion+
|
|
90
90
|
|
|
91
|
-
|
|
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
|
-
|
|
100
|
-
## 🎨 Studio
|
|
101
|
-
|
|
102
|
-
|
|
91
|
+
A one-time payment, lifetime-updates membership:
|
|
103
92
|
|
|
104
|
-
|
|
93
|
+
- **180+ premium examples**
|
|
94
|
+
- **Premium APIs** like [Cursor](https://motion.dev/docs/cursor) and [Ticker](https://motion.dev/docs/react-ticker)
|
|
95
|
+
- **Visual editing** for VS Code (alpha)
|
|
96
|
+
- **Private Discord**
|
|
97
|
+
- **Early access content**
|
|
105
98
|
|
|
106
|
-
|
|
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).
|
|
99
|
+
[Get Motion+](https://motion.dev/plus)
|
|
111
100
|
|
|
112
101
|
## 👩🏻⚖️ License
|
|
113
102
|
|
|
@@ -121,27 +110,27 @@ Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
|
|
|
121
110
|
|
|
122
111
|
Motion is sustainable thanks to the kind support of its sponsors.
|
|
123
112
|
|
|
124
|
-
|
|
113
|
+
[Become a sponsor](https://motion.dev/sponsor)
|
|
125
114
|
|
|
126
|
-
|
|
115
|
+
### Partner
|
|
127
116
|
|
|
128
117
|
Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
|
|
129
118
|
|
|
130
|
-
<a href="https://
|
|
131
|
-
<img alt="Framer" src="https://github.com/user-attachments/assets/
|
|
119
|
+
<a href="https://framer.link/FlnUbQY">
|
|
120
|
+
<img alt="Framer" src="https://github.com/user-attachments/assets/22a79be7-672e-4336-bfb7-5d55d1deb917" width="250px" height="150px">
|
|
132
121
|
</a>
|
|
133
122
|
|
|
134
123
|
### Platinum
|
|
135
124
|
|
|
136
|
-
<a href="https://
|
|
125
|
+
<a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/f9ce44b4-af28-4770-bb6e-9515b474bfb2" width="250px" height="150px"></a> <a href="https://figma.com"><img alt="Figma" src="https://github.com/user-attachments/assets/1077d0ab-4305-4a1f-81c8-d5be8c4c6717" width="250px" height="150px"></a> <a href="https://sanity.io"><img alt="Sanity" src="https://github.com/user-attachments/assets/80134088-f456-483f-8edd-940593c120ce" width="250px" height="150px"></a>
|
|
137
126
|
|
|
138
127
|
### Gold
|
|
139
128
|
|
|
140
|
-
<a href="https://
|
|
129
|
+
<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/1d5f2571-8bc3-4367-9fec-14d291168ff0" width="250px" height="150px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/33d1cb98-238a-4eed-a0df-9c7ab097d65b" width="250px" height="150px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/28eddbe5-1617-4e74-969d-2eb6fcd481af" width="250px" height="150px"></a> <a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/abc473bd-07ae-4a7d-9833-efe9dadb3773" width="250px" height="150px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/ac282433-6adb-4ad2-9fd2-5c6ee513c14b" width="250px" height="150px"></a>
|
|
141
130
|
|
|
142
131
|
### Silver
|
|
143
132
|
|
|
144
|
-
<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/
|
|
133
|
+
<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/f16e3eb9-f0bd-4ad1-8049-f079a3d65c69" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/2c44e7f4-5c2a-4714-9050-1570538665ff" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/e32205a7-3ab1-41ec-8729-a794058fd655" width="150px" height="100px"></a> <a href="https://bolt.new"><img alt="Bolt.new" src="https://github.com/user-attachments/assets/7932d4b2-bb6c-422e-82b9-6ad78a7e3090" width="150px" height="100px"></a>
|
|
145
134
|
|
|
146
135
|
### Personal
|
|
147
136
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "motion",
|
|
3
|
-
"version": "12.23.
|
|
3
|
+
"version": "12.23.13",
|
|
4
4
|
"description": "An animation library for JavaScript and React.",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/es/index.mjs",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"postpublish": "git push --tags"
|
|
77
77
|
},
|
|
78
78
|
"dependencies": {
|
|
79
|
-
"framer-motion": "^12.23.
|
|
79
|
+
"framer-motion": "^12.23.13",
|
|
80
80
|
"tslib": "^2.4.0"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
@@ -95,5 +95,5 @@
|
|
|
95
95
|
"optional": true
|
|
96
96
|
}
|
|
97
97
|
},
|
|
98
|
-
"gitHead": "
|
|
98
|
+
"gitHead": "5593dc9504b136e1f108471554cf401ce72b51f1"
|
|
99
99
|
}
|