framer-motion 12.23.11 → 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 +70 -71
- package/dist/cjs/client.js +1 -1
- package/dist/cjs/{feature-bundle-PNQ-8QDo.js → feature-bundle-CEbtLyJA.js} +3 -4
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/m.js +3 -4
- package/dist/dom.js +1 -1
- package/dist/es/motion/utils/use-motion-ref.mjs +3 -4
- package/dist/framer-motion.dev.js +8 -6
- package/dist/framer-motion.js +1 -1
- package/dist/size-rollup-dom-animation-m.js +1 -1
- package/dist/size-rollup-m.js +1 -1
- package/dist/size-rollup-motion.js +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,62 +1,42 @@
|
|
|
1
|
-
<
|
|
2
|
-
<img width="42" height="42" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" />
|
|
3
|
-
</p>
|
|
4
|
-
<h1 align="center">Motion for React</h1>
|
|
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 for React</h1>
|
|
5
2
|
<h3 align="center">
|
|
6
|
-
An open source
|
|
3
|
+
An open source animation library<br />for React
|
|
7
4
|
</h3>
|
|
8
|
-
<p align="center">Previously Framer Motion. Also available for <a href="https://github.com/motiondivision/motion/tree/main/packages/motion">JavaScript</a> and <a href="https://github.com/motiondivision/motion-vue">Vue</a></p>
|
|
9
|
-
|
|
10
|
-
<br>
|
|
11
5
|
|
|
12
6
|
<p align="center">
|
|
13
|
-
<a href="https://www.npmjs.com/package/
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
<img src="https://img.shields.io/npm/dm/framer-motion.svg?style=flat-square" />
|
|
18
|
-
</a>
|
|
19
|
-
<a href="https://twitter.com/mattgperry" target="_blank">
|
|
20
|
-
<img src="https://img.shields.io/twitter/follow/mattgperry.svg?style=social&label=Follow" />
|
|
21
|
-
</a>
|
|
7
|
+
<a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/v/motion?color=0368FF&label=version" alt="npm version"></a>
|
|
8
|
+
<a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/dm/framer-motion?color=8D30FF&label=npm" alt="npm downloads per month"></a>
|
|
9
|
+
<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.jsdelivr.com/package/npm/motion"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/framer-motion?logo=jsdeliver&color=FF4FBA"></a>
|
|
10
|
+
<img alt="NPM License" src="https://img.shields.io/npm/l/motion?color=FF2B6E">
|
|
22
11
|
</p>
|
|
23
12
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
Motion for React is an open source, production-ready library that’s designed for all creative developers.
|
|
27
|
-
|
|
28
|
-
It's the only animation library with a hybrid engine, combining the power of JavaScript animations with the performance of native browser APIs.
|
|
29
|
-
|
|
30
|
-
It looks like this:
|
|
31
|
-
|
|
32
|
-
```jsx
|
|
33
|
-
<motion.div animate={{ x: 0 }} />
|
|
13
|
+
```bash
|
|
14
|
+
npm install motion
|
|
34
15
|
```
|
|
35
16
|
|
|
36
|
-
|
|
17
|
+
## Table of Contents
|
|
37
18
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
- [Exit animations](https://motion.dev/docs/react-animation#exit-animations)
|
|
46
|
-
- [Server-side rendering](https://motion.dev/docs/react-motion-component#server-side-rendering)
|
|
47
|
-
- [Independent transforms](https://motion.dev/docs/react-motion-component#style)
|
|
48
|
-
- [Orchestrate animations across components](https://motion.dev/docs/react-animation#orchestration)
|
|
49
|
-
- [CSS variables](https://motion.dev/docs/react-animation#css-variables)
|
|
19
|
+
1. [Why Motion?](#why-motion)
|
|
20
|
+
2. [🍦 Platforms](#-platforms)
|
|
21
|
+
3. [🎓 Examples](#-examples)
|
|
22
|
+
4. [⚡️ Motion+](#-motion)
|
|
23
|
+
5. [👩🏻⚖️ License](#-license)
|
|
24
|
+
6. [💎 Contribute](#-contribute)
|
|
25
|
+
7. [✨ Sponsors](#-sponsors)
|
|
50
26
|
|
|
51
|
-
|
|
27
|
+
## Why Motion?
|
|
52
28
|
|
|
53
|
-
|
|
29
|
+
- **Simple API:** First-class React, JavaScript, and Vue packages.
|
|
30
|
+
- **Hybrid engine:** Power of JavaScript combined with native browser APIs for 120fps, GPU-accelerated animations.
|
|
31
|
+
- **Production-ready:** TypeScript, extensive test suite, tree-shakable, tiny footprint.
|
|
32
|
+
**Batteries included:** Gestures, springs, layout transitions, scroll-linked effects, timelines.
|
|
54
33
|
|
|
55
|
-
|
|
34
|
+
## 🍦 Platforms
|
|
56
35
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
36
|
+
Motion is available for [React](https://motion.dev/docs/react), [JavaScript](https://motion.dev/docs/quick-start) and [Vue](https://motion.dev/docs/vue).
|
|
37
|
+
|
|
38
|
+
<details>
|
|
39
|
+
<summary>React</summary>
|
|
60
40
|
|
|
61
41
|
```jsx
|
|
62
42
|
import { motion } from "motion/react"
|
|
@@ -66,68 +46,87 @@ function Component() {
|
|
|
66
46
|
}
|
|
67
47
|
```
|
|
68
48
|
|
|
69
|
-
Get started with [Motion for React](https://motion.dev/docs/react
|
|
49
|
+
Get started with [Motion for React](https://motion.dev/docs/react).
|
|
50
|
+
|
|
51
|
+
</details>
|
|
52
|
+
|
|
53
|
+
<details>
|
|
54
|
+
<summary>JavaScript</summary>
|
|
55
|
+
|
|
56
|
+
```javascript
|
|
57
|
+
import { animate } from "motion"
|
|
58
|
+
|
|
59
|
+
animate("#box", { x: 100 })
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Get started with [JavaScript](https://motion.dev/docs/quick-start).
|
|
63
|
+
|
|
64
|
+
</details>
|
|
70
65
|
|
|
71
|
-
|
|
66
|
+
<details>
|
|
67
|
+
<summary>Vue</summary>
|
|
72
68
|
|
|
73
|
-
|
|
69
|
+
```html
|
|
70
|
+
<script>
|
|
71
|
+
import { motion } from "motion-v"
|
|
72
|
+
</script>
|
|
74
73
|
|
|
75
|
-
|
|
74
|
+
<template> <motion.div :animate={{ x: 100 }} /> </template>
|
|
75
|
+
```
|
|
76
76
|
|
|
77
|
-
|
|
78
|
-
- Generate CSS springs with LLMs
|
|
79
|
-
- Load Motion docs into your LLM
|
|
77
|
+
Get started with [Motion for Vue](https://motion.dev/docs/vue).
|
|
80
78
|
|
|
81
|
-
|
|
79
|
+
</details>
|
|
82
80
|
|
|
83
81
|
## 🎓 Examples
|
|
84
82
|
|
|
85
|
-
[Motion Examples](https://
|
|
83
|
+
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.
|
|
86
84
|
|
|
87
85
|
## ⚡️ Motion+
|
|
88
86
|
|
|
89
|
-
|
|
87
|
+
A one-time payment, lifetime-updates membership:
|
|
90
88
|
|
|
91
|
-
-
|
|
92
|
-
- Ticker
|
|
93
|
-
-
|
|
94
|
-
-
|
|
89
|
+
- **180+ premium examples**
|
|
90
|
+
- **Premium APIs** like [Cursor](https://motion.dev/docs/cursor) and [Ticker](https://motion.dev/docs/react-ticker)
|
|
91
|
+
- **Visual editing** for VS Code (alpha)
|
|
92
|
+
- **Private Discord**
|
|
93
|
+
- **Early access content**
|
|
95
94
|
|
|
96
95
|
[Get Motion+](https://motion.dev/plus)
|
|
97
96
|
|
|
98
|
-
|
|
97
|
+
## 👩🏻⚖️ License
|
|
99
98
|
|
|
100
|
-
-
|
|
99
|
+
- Motion is MIT licensed.
|
|
101
100
|
|
|
102
|
-
|
|
101
|
+
## 💎 Contribute
|
|
103
102
|
|
|
104
|
-
- Motion
|
|
103
|
+
- Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion/blob/master/CONTRIBUTING.md) has you covered.
|
|
105
104
|
|
|
106
105
|
## ✨ Sponsors
|
|
107
106
|
|
|
108
107
|
Motion is sustainable thanks to the kind support of its sponsors.
|
|
109
108
|
|
|
110
|
-
|
|
109
|
+
[Become a sponsor](https://motion.dev/sponsor)
|
|
111
110
|
|
|
112
|
-
|
|
111
|
+
### Partner
|
|
113
112
|
|
|
114
113
|
Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
|
|
115
114
|
|
|
116
|
-
<a href="https://
|
|
117
|
-
<img alt="Framer" src="https://github.com/user-attachments/assets/
|
|
115
|
+
<a href="https://framer.link/FlnUbQY">
|
|
116
|
+
<img alt="Framer" src="https://github.com/user-attachments/assets/22a79be7-672e-4336-bfb7-5d55d1deb917" width="250px" height="150px">
|
|
118
117
|
</a>
|
|
119
118
|
|
|
120
119
|
### Platinum
|
|
121
120
|
|
|
122
|
-
<a href="https://
|
|
121
|
+
<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>
|
|
123
122
|
|
|
124
123
|
### Gold
|
|
125
124
|
|
|
126
|
-
<a href="https://
|
|
125
|
+
<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/1d5f2571-8bc3-4367-9fec-14d291168ff0" width="200px" height="120px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/33d1cb98-238a-4eed-a0df-9c7ab097d65b" width="200px" height="120px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/28eddbe5-1617-4e74-969d-2eb6fcd481af" width="200px" height="120px"></a> <a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/abc473bd-07ae-4a7d-9833-efe9dadb3773" width="200px" height="120px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/ac282433-6adb-4ad2-9fd2-5c6ee513c14b" width="200px" height="120px"></a>
|
|
127
126
|
|
|
128
127
|
### Silver
|
|
129
128
|
|
|
130
|
-
<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/
|
|
129
|
+
<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>
|
|
131
130
|
|
|
132
131
|
### Personal
|
|
133
132
|
|
package/dist/cjs/client.js
CHANGED
|
@@ -4091,11 +4091,10 @@ function useMotionRef(visualState, visualElement, externalRef) {
|
|
|
4091
4091
|
}
|
|
4092
4092
|
},
|
|
4093
4093
|
/**
|
|
4094
|
-
*
|
|
4095
|
-
*
|
|
4096
|
-
* or other dependencies change.
|
|
4094
|
+
* Include externalRef in dependencies to ensure the callback updates
|
|
4095
|
+
* when the ref changes, allowing proper ref forwarding.
|
|
4097
4096
|
*/
|
|
4098
|
-
[visualElement]);
|
|
4097
|
+
[visualElement, externalRef]);
|
|
4099
4098
|
}
|
|
4100
4099
|
|
|
4101
4100
|
/**
|
package/dist/cjs/index.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
var featureBundle = require('./feature-bundle-
|
|
7
|
+
var featureBundle = require('./feature-bundle-CEbtLyJA.js');
|
|
8
8
|
var motionDom = require('motion-dom');
|
|
9
9
|
var motionUtils = require('motion-utils');
|
|
10
10
|
|
package/dist/cjs/m.js
CHANGED
|
@@ -799,11 +799,10 @@ function useMotionRef(visualState, visualElement, externalRef) {
|
|
|
799
799
|
}
|
|
800
800
|
},
|
|
801
801
|
/**
|
|
802
|
-
*
|
|
803
|
-
*
|
|
804
|
-
* or other dependencies change.
|
|
802
|
+
* Include externalRef in dependencies to ensure the callback updates
|
|
803
|
+
* when the ref changes, allowing proper ref forwarding.
|
|
805
804
|
*/
|
|
806
|
-
[visualElement]);
|
|
805
|
+
[visualElement, externalRef]);
|
|
807
806
|
}
|
|
808
807
|
|
|
809
808
|
/**
|