framer-motion 6.3.7 → 6.3.10
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/dist/cjs/index.js +15 -11
- package/dist/es/components/AnimatePresence/index.mjs +2 -2
- package/dist/es/motion/features/use-features.mjs +2 -4
- package/dist/es/motion/features/viewport/use-viewport.mjs +2 -2
- package/dist/es/render/dom/utils/unit-conversion.mjs +6 -0
- package/dist/es/render/utils/motion-values.mjs +1 -1
- package/dist/es/utils/process.mjs +5 -5
- package/dist/es/value/index.mjs +1 -1
- package/dist/framer-motion.dev.js +20 -6
- package/dist/framer-motion.js +1 -1
- package/dist/projection.dev.js +8 -2
- package/dist/size-rollup-dom-animation.js +1 -1
- package/dist/size-rollup-dom-max.js +1 -1
- package/dist/size-rollup-m.js +1 -1
- package/dist/size-webpack-dom-animation.js +1 -1
- package/dist/size-webpack-dom-max.js +1 -1
- package/dist/size-webpack-m.js +1 -1
- package/package.json +11 -8
- package/types/utils/process.d.ts +1 -7
package/dist/cjs/index.js
CHANGED
|
@@ -36,10 +36,10 @@ var sync__default = /*#__PURE__*/_interopDefaultLegacy(sync);
|
|
|
36
36
|
/**
|
|
37
37
|
* Browser-safe usage of process
|
|
38
38
|
*/
|
|
39
|
-
var
|
|
40
|
-
var
|
|
41
|
-
|
|
42
|
-
|
|
39
|
+
var defaultEnvironment = "production";
|
|
40
|
+
var env = typeof process === "undefined" || process.env === undefined
|
|
41
|
+
? defaultEnvironment
|
|
42
|
+
: process.env.NODE_ENV || defaultEnvironment;
|
|
43
43
|
|
|
44
44
|
var createDefinition = function (propNames) { return ({
|
|
45
45
|
isEnabled: function (props) { return propNames.some(function (name) { return !!props[name]; }); },
|
|
@@ -102,9 +102,7 @@ function useFeatures(props, visualElement, preloadedFeatures) {
|
|
|
102
102
|
* If we're in development mode, check to make sure we're not rendering a motion component
|
|
103
103
|
* as a child of LazyMotion, as this will break the file-size benefits of using it.
|
|
104
104
|
*/
|
|
105
|
-
if (
|
|
106
|
-
preloadedFeatures &&
|
|
107
|
-
lazyContext.strict) {
|
|
105
|
+
if (env !== "production" && preloadedFeatures && lazyContext.strict) {
|
|
108
106
|
heyListen.invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
|
|
109
107
|
}
|
|
110
108
|
for (var i = 0; i < numFeatures; i++) {
|
|
@@ -474,7 +472,7 @@ var MotionValue = /** @class */ (function () {
|
|
|
474
472
|
* This will be replaced by the build step with the latest version number.
|
|
475
473
|
* When MotionValues are provided to motion components, warn if versions are mixed.
|
|
476
474
|
*/
|
|
477
|
-
this.version = "6.3.
|
|
475
|
+
this.version = "6.3.10";
|
|
478
476
|
/**
|
|
479
477
|
* Duration, in milliseconds, since last updating frame.
|
|
480
478
|
*
|
|
@@ -4337,7 +4335,7 @@ function useMissingIntersectionObserver(shouldObserve, state, visualElement, _a)
|
|
|
4337
4335
|
React.useEffect(function () {
|
|
4338
4336
|
if (!shouldObserve || !fallback)
|
|
4339
4337
|
return;
|
|
4340
|
-
if (
|
|
4338
|
+
if (env !== "production") {
|
|
4341
4339
|
warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
|
|
4342
4340
|
}
|
|
4343
4341
|
/**
|
|
@@ -5972,7 +5970,7 @@ function updateMotionValuesFromProps(element, next, prev) {
|
|
|
5972
5970
|
* and warn against mismatches.
|
|
5973
5971
|
*/
|
|
5974
5972
|
if (process.env.NODE_ENV === "development") {
|
|
5975
|
-
warnOnce(nextValue.version
|
|
5973
|
+
warnOnce(nextValue.version === "6.3.10", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.10 may not work as expected."));
|
|
5976
5974
|
}
|
|
5977
5975
|
}
|
|
5978
5976
|
else if (isMotionValue(prevValue)) {
|
|
@@ -6704,6 +6702,9 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
|
|
|
6704
6702
|
}
|
|
6705
6703
|
});
|
|
6706
6704
|
if (changedValueTypeKeys.length) {
|
|
6705
|
+
var scrollY_1 = changedValueTypeKeys.indexOf("height") >= 0
|
|
6706
|
+
? window.pageYOffset
|
|
6707
|
+
: null;
|
|
6707
6708
|
var convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
|
|
6708
6709
|
// If we removed transform values, reapply them before the next render
|
|
6709
6710
|
if (removedTransformValues.length) {
|
|
@@ -6714,6 +6715,9 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
|
|
|
6714
6715
|
}
|
|
6715
6716
|
// Reapply original values
|
|
6716
6717
|
visualElement.syncRender();
|
|
6718
|
+
// Restore scroll position
|
|
6719
|
+
if (scrollY_1 !== null)
|
|
6720
|
+
window.scrollTo({ top: scrollY_1 });
|
|
6717
6721
|
return { target: convertedTarget, transitionEnd: transitionEnd };
|
|
6718
6722
|
}
|
|
6719
6723
|
else {
|
|
@@ -7353,7 +7357,7 @@ var AnimatePresence = function (_a) {
|
|
|
7353
7357
|
var key = child.key;
|
|
7354
7358
|
return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child));
|
|
7355
7359
|
});
|
|
7356
|
-
if (
|
|
7360
|
+
if (env !== "production" &&
|
|
7357
7361
|
exitBeforeEnter &&
|
|
7358
7362
|
childrenToRender.length > 1) {
|
|
7359
7363
|
console.warn("You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __read, __spreadArray } from 'tslib';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useContext, useRef, cloneElement, Children, isValidElement } from 'react';
|
|
4
|
-
import
|
|
4
|
+
import { env } from '../../utils/process.mjs';
|
|
5
5
|
import { useForceUpdate } from '../../utils/use-force-update.mjs';
|
|
6
6
|
import { useIsMounted } from '../../utils/use-is-mounted.mjs';
|
|
7
7
|
import { PresenceChild } from './PresenceChild.mjs';
|
|
@@ -144,7 +144,7 @@ var AnimatePresence = function (_a) {
|
|
|
144
144
|
var key = child.key;
|
|
145
145
|
return exiting.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child));
|
|
146
146
|
});
|
|
147
|
-
if (
|
|
147
|
+
if (env !== "production" &&
|
|
148
148
|
exitBeforeEnter &&
|
|
149
149
|
childrenToRender.length > 1) {
|
|
150
150
|
console.warn("You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __assign } from 'tslib';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useContext } from 'react';
|
|
4
|
-
import
|
|
4
|
+
import { env } from '../../utils/process.mjs';
|
|
5
5
|
import { featureDefinitions } from './definitions.mjs';
|
|
6
6
|
import { invariant } from 'hey-listen';
|
|
7
7
|
import { LazyContext } from '../../context/LazyContext.mjs';
|
|
@@ -20,9 +20,7 @@ function useFeatures(props, visualElement, preloadedFeatures) {
|
|
|
20
20
|
* If we're in development mode, check to make sure we're not rendering a motion component
|
|
21
21
|
* as a child of LazyMotion, as this will break the file-size benefits of using it.
|
|
22
22
|
*/
|
|
23
|
-
if (
|
|
24
|
-
preloadedFeatures &&
|
|
25
|
-
lazyContext.strict) {
|
|
23
|
+
if (env !== "production" && preloadedFeatures && lazyContext.strict) {
|
|
26
24
|
invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
|
|
27
25
|
}
|
|
28
26
|
for (var i = 0; i < numFeatures; i++) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { env } from '../../../utils/process.mjs';
|
|
2
2
|
import { useRef, useEffect } from 'react';
|
|
3
3
|
import { AnimationType } from '../../../render/utils/types.mjs';
|
|
4
4
|
import { warnOnce } from '../../../utils/warn-once.mjs';
|
|
@@ -75,7 +75,7 @@ function useMissingIntersectionObserver(shouldObserve, state, visualElement, _a)
|
|
|
75
75
|
useEffect(function () {
|
|
76
76
|
if (!shouldObserve || !fallback)
|
|
77
77
|
return;
|
|
78
|
-
if (
|
|
78
|
+
if (env !== "production") {
|
|
79
79
|
warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
|
|
80
80
|
}
|
|
81
81
|
/**
|
|
@@ -226,6 +226,9 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
|
|
|
226
226
|
}
|
|
227
227
|
});
|
|
228
228
|
if (changedValueTypeKeys.length) {
|
|
229
|
+
var scrollY_1 = changedValueTypeKeys.indexOf("height") >= 0
|
|
230
|
+
? window.pageYOffset
|
|
231
|
+
: null;
|
|
229
232
|
var convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
|
|
230
233
|
// If we removed transform values, reapply them before the next render
|
|
231
234
|
if (removedTransformValues.length) {
|
|
@@ -236,6 +239,9 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
|
|
|
236
239
|
}
|
|
237
240
|
// Reapply original values
|
|
238
241
|
visualElement.syncRender();
|
|
242
|
+
// Restore scroll position
|
|
243
|
+
if (scrollY_1 !== null)
|
|
244
|
+
window.scrollTo({ top: scrollY_1 });
|
|
239
245
|
return { target: convertedTarget, transitionEnd: transitionEnd };
|
|
240
246
|
}
|
|
241
247
|
else {
|
|
@@ -18,7 +18,7 @@ function updateMotionValuesFromProps(element, next, prev) {
|
|
|
18
18
|
* and warn against mismatches.
|
|
19
19
|
*/
|
|
20
20
|
if (process.env.NODE_ENV === "development") {
|
|
21
|
-
warnOnce(nextValue.version
|
|
21
|
+
warnOnce(nextValue.version === "6.3.10", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.10 may not work as expected."));
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
else if (isMotionValue(prevValue)) {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Browser-safe usage of process
|
|
3
3
|
*/
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
var defaultEnvironment = "production";
|
|
5
|
+
var env = typeof process === "undefined" || process.env === undefined
|
|
6
|
+
? defaultEnvironment
|
|
7
|
+
: process.env.NODE_ENV || defaultEnvironment;
|
|
8
8
|
|
|
9
|
-
export {
|
|
9
|
+
export { env };
|
package/dist/es/value/index.mjs
CHANGED
|
@@ -25,7 +25,7 @@ var MotionValue = /** @class */ (function () {
|
|
|
25
25
|
* This will be replaced by the build step with the latest version number.
|
|
26
26
|
* When MotionValues are provided to motion components, warn if versions are mixed.
|
|
27
27
|
*/
|
|
28
|
-
this.version = "6.3.
|
|
28
|
+
this.version = "6.3.10";
|
|
29
29
|
/**
|
|
30
30
|
* Duration, in milliseconds, since last updating frame.
|
|
31
31
|
*
|
|
@@ -120,6 +120,14 @@
|
|
|
120
120
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
+
/**
|
|
124
|
+
* Browser-safe usage of process
|
|
125
|
+
*/
|
|
126
|
+
var defaultEnvironment = "production";
|
|
127
|
+
var env = typeof process === "undefined" || process.env === undefined
|
|
128
|
+
? defaultEnvironment
|
|
129
|
+
: "development" ;
|
|
130
|
+
|
|
123
131
|
var createDefinition = function (propNames) { return ({
|
|
124
132
|
isEnabled: function (props) { return propNames.some(function (name) { return !!props[name]; }); },
|
|
125
133
|
}); };
|
|
@@ -196,8 +204,7 @@
|
|
|
196
204
|
* If we're in development mode, check to make sure we're not rendering a motion component
|
|
197
205
|
* as a child of LazyMotion, as this will break the file-size benefits of using it.
|
|
198
206
|
*/
|
|
199
|
-
if (preloadedFeatures &&
|
|
200
|
-
lazyContext.strict) {
|
|
207
|
+
if (env !== "production" && preloadedFeatures && lazyContext.strict) {
|
|
201
208
|
invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
|
|
202
209
|
}
|
|
203
210
|
for (var i = 0; i < numFeatures; i++) {
|
|
@@ -1699,7 +1706,7 @@
|
|
|
1699
1706
|
* This will be replaced by the build step with the latest version number.
|
|
1700
1707
|
* When MotionValues are provided to motion components, warn if versions are mixed.
|
|
1701
1708
|
*/
|
|
1702
|
-
this.version = "6.3.
|
|
1709
|
+
this.version = "6.3.10";
|
|
1703
1710
|
/**
|
|
1704
1711
|
* Duration, in milliseconds, since last updating frame.
|
|
1705
1712
|
*
|
|
@@ -5562,7 +5569,7 @@
|
|
|
5562
5569
|
React.useEffect(function () {
|
|
5563
5570
|
if (!shouldObserve || !fallback)
|
|
5564
5571
|
return;
|
|
5565
|
-
{
|
|
5572
|
+
if (env !== "production") {
|
|
5566
5573
|
warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
|
|
5567
5574
|
}
|
|
5568
5575
|
/**
|
|
@@ -7197,7 +7204,7 @@
|
|
|
7197
7204
|
* and warn against mismatches.
|
|
7198
7205
|
*/
|
|
7199
7206
|
{
|
|
7200
|
-
warnOnce(nextValue.version
|
|
7207
|
+
warnOnce(nextValue.version === "6.3.10", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.10 may not work as expected."));
|
|
7201
7208
|
}
|
|
7202
7209
|
}
|
|
7203
7210
|
else if (isMotionValue(prevValue)) {
|
|
@@ -7929,6 +7936,9 @@
|
|
|
7929
7936
|
}
|
|
7930
7937
|
});
|
|
7931
7938
|
if (changedValueTypeKeys.length) {
|
|
7939
|
+
var scrollY_1 = changedValueTypeKeys.indexOf("height") >= 0
|
|
7940
|
+
? window.pageYOffset
|
|
7941
|
+
: null;
|
|
7932
7942
|
var convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
|
|
7933
7943
|
// If we removed transform values, reapply them before the next render
|
|
7934
7944
|
if (removedTransformValues.length) {
|
|
@@ -7939,6 +7949,9 @@
|
|
|
7939
7949
|
}
|
|
7940
7950
|
// Reapply original values
|
|
7941
7951
|
visualElement.syncRender();
|
|
7952
|
+
// Restore scroll position
|
|
7953
|
+
if (scrollY_1 !== null)
|
|
7954
|
+
window.scrollTo({ top: scrollY_1 });
|
|
7942
7955
|
return { target: convertedTarget, transitionEnd: transitionEnd };
|
|
7943
7956
|
}
|
|
7944
7957
|
else {
|
|
@@ -8578,7 +8591,8 @@
|
|
|
8578
8591
|
var key = child.key;
|
|
8579
8592
|
return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child));
|
|
8580
8593
|
});
|
|
8581
|
-
if (
|
|
8594
|
+
if (env !== "production" &&
|
|
8595
|
+
exitBeforeEnter &&
|
|
8582
8596
|
childrenToRender.length > 1) {
|
|
8583
8597
|
console.warn("You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.");
|
|
8584
8598
|
}
|