framer-motion 12.35.2 → 12.37.0

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.
Files changed (49) hide show
  1. package/README.md +12 -15
  2. package/dist/cjs/client.js +1 -1
  3. package/dist/cjs/dom.js +38 -6
  4. package/dist/cjs/dom.js.map +1 -1
  5. package/dist/cjs/{feature-bundle-DqHxNjy5.js → feature-bundle-CBfLWgGA.js} +47 -6
  6. package/dist/cjs/feature-bundle-CBfLWgGA.js.map +1 -0
  7. package/dist/cjs/index.js +41 -8
  8. package/dist/cjs/index.js.map +1 -1
  9. package/dist/cjs/m.js +7 -1
  10. package/dist/cjs/m.js.map +1 -1
  11. package/dist/dom-mini.js +1 -1
  12. package/dist/dom.js +1 -1
  13. package/dist/es/components/AnimatePresence/PopChild.mjs +1 -0
  14. package/dist/es/components/AnimatePresence/PopChild.mjs.map +1 -1
  15. package/dist/es/components/AnimatePresence/index.mjs +1 -1
  16. package/dist/es/components/AnimatePresence/index.mjs.map +1 -1
  17. package/dist/es/gestures/drag/VisualElementDragControls.mjs +2 -1
  18. package/dist/es/gestures/drag/VisualElementDragControls.mjs.map +1 -1
  19. package/dist/es/gestures/pan/PanSession.mjs.map +1 -1
  20. package/dist/es/motion/features/animation/exit.mjs +31 -1
  21. package/dist/es/motion/features/animation/exit.mjs.map +1 -1
  22. package/dist/es/motion/features/viewport/index.mjs +7 -3
  23. package/dist/es/motion/features/viewport/index.mjs.map +1 -1
  24. package/dist/es/render/dom/scroll/utils/offset-to-range.mjs +38 -6
  25. package/dist/es/render/dom/scroll/utils/offset-to-range.mjs.map +1 -1
  26. package/dist/es/render/dom/utils/filter-props.mjs +8 -1
  27. package/dist/es/render/dom/utils/filter-props.mjs.map +1 -1
  28. package/dist/es/value/use-spring.mjs.map +1 -1
  29. package/dist/framer-motion.dev.js +272 -88
  30. package/dist/framer-motion.js +1 -1
  31. package/dist/mini.js +1 -1
  32. package/dist/size-rollup-animate.js +1 -1
  33. package/dist/size-rollup-animate.js.map +1 -1
  34. package/dist/size-rollup-dom-animation-assets.js +1 -1
  35. package/dist/size-rollup-dom-animation-m.js +1 -1
  36. package/dist/size-rollup-dom-animation.js +1 -1
  37. package/dist/size-rollup-dom-max-assets.js +1 -1
  38. package/dist/size-rollup-dom-max.js +1 -1
  39. package/dist/size-rollup-m.js +1 -1
  40. package/dist/size-rollup-m.js.map +1 -1
  41. package/dist/size-rollup-motion.js +1 -1
  42. package/dist/size-rollup-motion.js.map +1 -1
  43. package/dist/size-rollup-scroll.js +1 -1
  44. package/dist/size-rollup-scroll.js.map +1 -1
  45. package/dist/size-rollup-waapi-animate.js +1 -1
  46. package/dist/size-rollup-waapi-animate.js.map +1 -1
  47. package/dist/types/index.d.ts +5 -4
  48. package/package.json +4 -4
  49. package/dist/cjs/feature-bundle-DqHxNjy5.js.map +0 -1
package/README.md CHANGED
@@ -35,8 +35,7 @@ npm install motion
35
35
 
36
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
37
 
38
- <details>
39
- <summary>React</summary>
38
+ ### React
40
39
 
41
40
  ```jsx
42
41
  import { motion } from "motion/react"
@@ -48,10 +47,9 @@ function Component() {
48
47
 
49
48
  Get started with [Motion for React](https://motion.dev/docs/react).
50
49
 
51
- </details>
50
+ **Note:** Framer Motion is now Motion. Import from `motion/react` instead of `framer-motion`.
52
51
 
53
- <details>
54
- <summary>JavaScript</summary>
52
+ ### JS
55
53
 
56
54
  ```javascript
57
55
  import { animate } from "motion"
@@ -61,10 +59,7 @@ animate("#box", { x: 100 })
61
59
 
62
60
  Get started with [JavaScript](https://motion.dev/docs/quick-start).
63
61
 
64
- </details>
65
-
66
- <details>
67
- <summary>Vue</summary>
62
+ ### Vue
68
63
 
69
64
  ```html
70
65
  <script>
@@ -76,19 +71,21 @@ Get started with [JavaScript](https://motion.dev/docs/quick-start).
76
71
 
77
72
  Get started with [Motion for Vue](https://motion.dev/docs/vue).
78
73
 
79
- </details>
74
+ ## 🎓 Examples & tutorials
80
75
 
81
- ## 🎓 Examples
76
+ Browse 330+ [official examples](https://motion.dev/examples), with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
82
77
 
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.
78
+ Over 100 examples come with a full step-by-step [tutorial](https://motion.dev/tutorials).
84
79
 
85
80
  ## ⚡️ Motion+
86
81
 
87
82
  A one-time payment, lifetime-updates membership:
88
83
 
89
- - **180+ premium examples**
84
+ - **330+ examples**
85
+ - **100+ tutorials**
90
86
  - **Premium APIs** like [Cursor](https://motion.dev/docs/cursor) and [Ticker](https://motion.dev/docs/react-ticker)
91
- - **Visual editing** for VS Code (alpha)
87
+ - **Transition editor** for Cursor and VS Code
88
+ - **AI skills**
92
89
  - **Private Discord**
93
90
  - **Early access content**
94
91
 
@@ -128,7 +125,7 @@ Motion drives the animations on the Cursor homepage, and is working with Cursor
128
125
 
129
126
  ### Gold
130
127
 
131
- <a href="https://lottiefiles.com"><img alt="LottieFiles" src="https://github.com/user-attachments/assets/4e99d8c7-4cba-43ee-93c5-93861ae708ec" width="200px" height="120px"></a> <a href="https://mintlify.com"><img alt="Mintlify" src="https://github.com/user-attachments/assets/2740db2f-1877-49ae-ae80-ba5d19ef1587" width="200px" height="120px"></a>
128
+ <a href="https://mintlify.com"><img alt="Mintlify" src="https://github.com/user-attachments/assets/2740db2f-1877-49ae-ae80-ba5d19ef1587" width="200px" height="120px"></a>
132
129
 
133
130
  ### Silver
134
131
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var featureBundle = require('./feature-bundle-DqHxNjy5.js');
5
+ var featureBundle = require('./feature-bundle-CBfLWgGA.js');
6
6
  require('motion-dom');
7
7
  require('react');
8
8
  require('react/jsx-runtime');
package/dist/cjs/dom.js CHANGED
@@ -1040,16 +1040,48 @@ const presets = [
1040
1040
  [ScrollOffset.Any, "cover"],
1041
1041
  [ScrollOffset.All, "contain"],
1042
1042
  ];
1043
- function matchesPreset(offset, preset) {
1043
+ const stringToProgress = {
1044
+ start: 0,
1045
+ end: 1,
1046
+ };
1047
+ function parseStringOffset(s) {
1048
+ const parts = s.trim().split(/\s+/);
1049
+ if (parts.length !== 2)
1050
+ return undefined;
1051
+ const a = stringToProgress[parts[0]];
1052
+ const b = stringToProgress[parts[1]];
1053
+ if (a === undefined || b === undefined)
1054
+ return undefined;
1055
+ return [a, b];
1056
+ }
1057
+ function normaliseOffset(offset) {
1044
1058
  if (offset.length !== 2)
1059
+ return undefined;
1060
+ const result = [];
1061
+ for (const item of offset) {
1062
+ if (Array.isArray(item)) {
1063
+ result.push(item);
1064
+ }
1065
+ else if (typeof item === "string") {
1066
+ const parsed = parseStringOffset(item);
1067
+ if (!parsed)
1068
+ return undefined;
1069
+ result.push(parsed);
1070
+ }
1071
+ else {
1072
+ return undefined;
1073
+ }
1074
+ }
1075
+ return result;
1076
+ }
1077
+ function matchesPreset(offset, preset) {
1078
+ const normalised = normaliseOffset(offset);
1079
+ if (!normalised)
1045
1080
  return false;
1046
1081
  for (let i = 0; i < 2; i++) {
1047
- const o = offset[i];
1082
+ const o = normalised[i];
1048
1083
  const p = preset[i];
1049
- if (!Array.isArray(o) ||
1050
- o.length !== 2 ||
1051
- o[0] !== p[0] ||
1052
- o[1] !== p[1])
1084
+ if (o[0] !== p[0] || o[1] !== p[1])
1053
1085
  return false;
1054
1086
  }
1055
1087
  return true;