framer-motion 7.0.3 → 7.1.0

package/dist/cjs/index.js

@@ -748,9 +748,7 @@ function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
     if (!transformHasZ && enableHardwareAcceleration) {
         transformString += "translateZ(0)";
     }
-    else {
-        transformString = transformString.trim();
-    }
+    transformString = transformString.trim();
     // If we have a custom `transform` template, pass our transform values and
     // generated transformString to that before returning
     if (transformTemplate) {
@@ -2357,11 +2355,13 @@ var isNumericalString = function (v) { return /^\-?\d*\.?\d+$/.test(v); };
 var isZeroValueString = function (v) { return /^0[^.\s]+$/.test(v); };
 
 function addUniqueItem(arr, item) {
-    arr.indexOf(item) === -1 && arr.push(item);
+    if (arr.indexOf(item) === -1)
+        arr.push(item);
 }
 function removeItem(arr, item) {
     var index = arr.indexOf(item);
-    index > -1 && arr.splice(index, 1);
+    if (index > -1)
+        arr.splice(index, 1);
 }
 // Adapted from array-move
 function moveItem(_a, fromIndex, toIndex) {
@@ -2437,7 +2437,7 @@ var MotionValue = /** @class */ (function () {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.0.3";
+        this.version = "7.1.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2857,6 +2857,10 @@ function getOrigin(target, transition, visualElement) {
     return origin;
 }
 
+function isWillChangeMotionValue(value) {
+    return Boolean(isMotionValue(value) && value.add);
+}
+
 function animateVisualElement(visualElement, definition, options) {
     if (options === void 0) { options = {}; }
     visualElement.notifyAnimationStart(definition);
@@ -2928,18 +2932,19 @@ function animateTarget(visualElement, definition, _a) {
     var _b;
     var _c = _a === void 0 ? {} : _a, _d = _c.delay, delay = _d === void 0 ? 0 : _d, transitionOverride = _c.transitionOverride, type = _c.type;
     var _e = visualElement.makeTargetAnimatable(definition), _f = _e.transition, transition = _f === void 0 ? visualElement.getDefaultTransition() : _f, transitionEnd = _e.transitionEnd, target = tslib.__rest(_e, ["transition", "transitionEnd"]);
+    var willChange = visualElement.getValue("willChange");
     if (transitionOverride)
         transition = transitionOverride;
     var animations = [];
     var animationTypeState = type && ((_b = visualElement.animationState) === null || _b === void 0 ? void 0 : _b.getState()[type]);
-    for (var key in target) {
+    var _loop_1 = function (key) {
         var value = visualElement.getValue(key);
         var valueTarget = target[key];
         if (!value ||
             valueTarget === undefined ||
             (animationTypeState &&
                 shouldBlockAnimation(animationTypeState, key))) {
-            continue;
+            return "continue";
         }
         var valueTransition = tslib.__assign({ delay: delay }, transition);
         /**
@@ -2949,7 +2954,14 @@ function animateTarget(visualElement, definition, _a) {
             valueTransition = tslib.__assign(tslib.__assign({}, valueTransition), { type: false, delay: 0 });
         }
         var animation = startAnimation(key, value, valueTarget, valueTransition);
+        if (isWillChangeMotionValue(willChange)) {
+            willChange.add(key);
+            animation = animation.then(function () { return willChange.remove(key); });
+        }
         animations.push(animation);
+    };
+    for (var key in target) {
+        _loop_1(key);
     }
     return Promise.all(animations).then(function () {
         transitionEnd && setTarget(visualElement, transitionEnd);
@@ -3018,7 +3030,6 @@ function animateList(visualElement) {
 function createAnimationState(visualElement) {
     var animate = animateList(visualElement);
     var state = createState();
-    var allAnimatedKeys = {};
     var isInitialRender = true;
     /**
      * This function will be used to reduce the animation definitions for
@@ -3032,9 +3043,6 @@ function createAnimationState(visualElement) {
         }
         return acc;
     };
-    function isAnimated(key) {
-        return allAnimatedKeys[key] !== undefined;
-    }
     /**
      * This just allows us to inject mocked animation functions
      * @internal
@@ -3248,7 +3256,6 @@ function createAnimationState(visualElement) {
         for (var i = 0; i < numAnimationTypes; i++) {
             _loop_1(i);
         }
-        allAnimatedKeys = tslib.__assign({}, encounteredKeys);
         /**
          * If there are some removed value that haven't been dealt with,
          * we need to create a new animation that falls back either to the value
@@ -3291,7 +3298,6 @@ function createAnimationState(visualElement) {
         return animations;
     }
     return {
-        isAnimated: isAnimated,
         animateChanges: animateChanges,
         setActive: setActive,
         setAnimateFunction: setAnimateFunction,
@@ -4393,6 +4399,7 @@ function createLifecycles() {
 
 function updateMotionValuesFromProps(element, next, prev) {
     var _a;
+    var willChange = next.willChange;
     for (var key in next) {
         var nextValue = next[key];
         var prevValue = prev[key];
@@ -4402,20 +4409,26 @@ function updateMotionValuesFromProps(element, next, prev) {
              * to our visual element's motion value map.
              */
             element.addValue(key, nextValue);
+            if (isWillChangeMotionValue(willChange)) {
+                willChange.add(key);
+            }
             /**
              * Check the version of the incoming motion value with this version
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.0.3", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.3 may not work as expected."));
+                warnOnce(nextValue.version === "7.1.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.1.0 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {
             /**
-             * If we're swapping to a new motion value, create a new motion value
-             * from that
+             * If we're swapping from a motion value to a static value,
+             * create a new motion value from that
              */
             element.addValue(key, motionValue(nextValue));
+            if (isWillChangeMotionValue(willChange)) {
+                willChange.remove(key);
+            }
         }
         else if (prevValue !== nextValue) {
             /**
@@ -4528,11 +4541,14 @@ var visualElement = function (_a) {
          * Doing so will break some tests but this isn't neccessarily a breaking change,
          * more a reflection of the test.
          */
-        var initialMotionValues = scrapeMotionValuesFromProps(props);
+        var _b = scrapeMotionValuesFromProps(props), willChange = _b.willChange, initialMotionValues = tslib.__rest(_b, ["willChange"]);
         for (var key in initialMotionValues) {
             var value = initialMotionValues[key];
             if (latestValues[key] !== undefined && isMotionValue(value)) {
                 value.set(latestValues[key], false);
+                if (isWillChangeMotionValue(willChange)) {
+                    willChange.add(key);
+                }
             }
         }
         /**
@@ -5153,7 +5169,7 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
         // Reapply original values
         visualElement.syncRender();
         // Restore scroll position
-        if (scrollY_1 !== null)
+        if (isBrowser && scrollY_1 !== null)
             window.scrollTo({ top: scrollY_1 });
         return { target: convertedTarget, transitionEnd: transitionEnd };
     }

package/dist/es/render/dom/utils/unit-conversion.mjs

@@ -4,6 +4,7 @@ import { isKeyframesTarget } from '../../../animation/utils/is-keyframes-target.
 import { invariant } from 'hey-listen';
 import { transformProps } from '../../html/utils/transform.mjs';
 import { findDimensionValueType } from '../value-types/dimensions.mjs';
+import { isBrowser } from '../../../utils/is-browser.mjs';
 
 var positionalKeys = new Set([
     "width",
@@ -240,7 +241,7 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
         // Reapply original values
         visualElement.syncRender();
         // Restore scroll position
-        if (scrollY_1 !== null)
+        if (isBrowser && scrollY_1 !== null)
             window.scrollTo({ top: scrollY_1 });
         return { target: convertedTarget, transitionEnd: transitionEnd };
     }

package/dist/es/render/html/utils/build-transform.mjs

@@ -33,9 +33,7 @@ function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
     if (!transformHasZ && enableHardwareAcceleration) {
         transformString += "translateZ(0)";
     }
-    else {
-        transformString = transformString.trim();
-    }
+    transformString = transformString.trim();
     // If we have a custom `transform` template, pass our transform values and
     // generated transformString to that before returning
     if (transformTemplate) {

package/dist/es/render/index.mjs

@@ -1,6 +1,7 @@
-import { __assign, __spreadArray, __read } from 'tslib';
+import { __assign, __rest, __spreadArray, __read } from 'tslib';
 import sync, { cancelSync } from 'framesync';
 import { motionValue } from '../value/index.mjs';
+import { isWillChangeMotionValue } from '../value/use-will-change/is.mjs';
 import { isMotionValue } from '../value/utils/is-motion-value.mjs';
 import { variantPriorityOrder } from './utils/animation-state.mjs';
 import { createLifecycles } from './utils/lifecycles.mjs';
@@ -94,11 +95,14 @@ var visualElement = function (_a) {
          * Doing so will break some tests but this isn't neccessarily a breaking change,
          * more a reflection of the test.
          */
-        var initialMotionValues = scrapeMotionValuesFromProps(props);
+        var _b = scrapeMotionValuesFromProps(props), willChange = _b.willChange, initialMotionValues = __rest(_b, ["willChange"]);
         for (var key in initialMotionValues) {
             var value = initialMotionValues[key];
             if (latestValues[key] !== undefined && isMotionValue(value)) {
                 value.set(latestValues[key], false);
+                if (isWillChangeMotionValue(willChange)) {
+                    willChange.add(key);
+                }
             }
         }
         /**

package/dist/es/render/utils/animation-state.mjs

@@ -28,7 +28,6 @@ function animateList(visualElement) {
 function createAnimationState(visualElement) {
     var animate = animateList(visualElement);
     var state = createState();
-    var allAnimatedKeys = {};
     var isInitialRender = true;
     /**
      * This function will be used to reduce the animation definitions for
@@ -42,9 +41,6 @@ function createAnimationState(visualElement) {
         }
         return acc;
     };
-    function isAnimated(key) {
-        return allAnimatedKeys[key] !== undefined;
-    }
     /**
      * This just allows us to inject mocked animation functions
      * @internal
@@ -258,7 +254,6 @@ function createAnimationState(visualElement) {
         for (var i = 0; i < numAnimationTypes; i++) {
             _loop_1(i);
         }
-        allAnimatedKeys = __assign({}, encounteredKeys);
         /**
          * If there are some removed value that haven't been dealt with,
          * we need to create a new animation that falls back either to the value
@@ -301,7 +296,6 @@ function createAnimationState(visualElement) {
         return animations;
     }
     return {
-        isAnimated: isAnimated,
         animateChanges: animateChanges,
         setActive: setActive,
         setAnimateFunction: setAnimateFunction,

package/dist/es/render/utils/animation.mjs

@@ -3,6 +3,7 @@ import { startAnimation } from '../../animation/utils/transitions.mjs';
 import { setTarget } from './setters.mjs';
 import { resolveVariant } from './variants.mjs';
 import { isTransformProp } from '../html/utils/transform.mjs';
+import { isWillChangeMotionValue } from '../../value/use-will-change/is.mjs';
 
 function animateVisualElement(visualElement, definition, options) {
     if (options === void 0) { options = {}; }
@@ -75,18 +76,19 @@ function animateTarget(visualElement, definition, _a) {
     var _b;
     var _c = _a === void 0 ? {} : _a, _d = _c.delay, delay = _d === void 0 ? 0 : _d, transitionOverride = _c.transitionOverride, type = _c.type;
     var _e = visualElement.makeTargetAnimatable(definition), _f = _e.transition, transition = _f === void 0 ? visualElement.getDefaultTransition() : _f, transitionEnd = _e.transitionEnd, target = __rest(_e, ["transition", "transitionEnd"]);
+    var willChange = visualElement.getValue("willChange");
     if (transitionOverride)
         transition = transitionOverride;
     var animations = [];
     var animationTypeState = type && ((_b = visualElement.animationState) === null || _b === void 0 ? void 0 : _b.getState()[type]);
-    for (var key in target) {
+    var _loop_1 = function (key) {
         var value = visualElement.getValue(key);
         var valueTarget = target[key];
         if (!value ||
             valueTarget === undefined ||
             (animationTypeState &&
                 shouldBlockAnimation(animationTypeState, key))) {
-            continue;
+            return "continue";
         }
         var valueTransition = __assign({ delay: delay }, transition);
         /**
@@ -96,7 +98,14 @@ function animateTarget(visualElement, definition, _a) {
             valueTransition = __assign(__assign({}, valueTransition), { type: false, delay: 0 });
         }
         var animation = startAnimation(key, value, valueTarget, valueTransition);
+        if (isWillChangeMotionValue(willChange)) {
+            willChange.add(key);
+            animation = animation.then(function () { return willChange.remove(key); });
+        }
         animations.push(animation);
+    };
+    for (var key in target) {
+        _loop_1(key);
     }
     return Promise.all(animations).then(function () {
         transitionEnd && setTarget(visualElement, transitionEnd);

package/dist/es/render/utils/motion-values.mjs

@@ -1,9 +1,11 @@
+import { isWillChangeMotionValue } from '../../value/use-will-change/is.mjs';
 import { warnOnce } from '../../utils/warn-once.mjs';
 import { motionValue } from '../../value/index.mjs';
 import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 
 function updateMotionValuesFromProps(element, next, prev) {
     var _a;
+    var willChange = next.willChange;
     for (var key in next) {
         var nextValue = next[key];
         var prevValue = prev[key];
@@ -13,20 +15,26 @@ function updateMotionValuesFromProps(element, next, prev) {
              * to our visual element's motion value map.
              */
             element.addValue(key, nextValue);
+            if (isWillChangeMotionValue(willChange)) {
+                willChange.add(key);
+            }
             /**
              * Check the version of the incoming motion value with this version
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.0.3", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.3 may not work as expected."));
+                warnOnce(nextValue.version === "7.1.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.1.0 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {
             /**
-             * If we're swapping to a new motion value, create a new motion value
-             * from that
+             * If we're swapping from a motion value to a static value,
+             * create a new motion value from that
              */
             element.addValue(key, motionValue(nextValue));
+            if (isWillChangeMotionValue(willChange)) {
+                willChange.remove(key);
+            }
         }
         else if (prevValue !== nextValue) {
             /**

package/dist/es/utils/array.mjs

@@ -1,11 +1,13 @@
 import { __read } from 'tslib';
 
 function addUniqueItem(arr, item) {
-    arr.indexOf(item) === -1 && arr.push(item);
+    if (arr.indexOf(item) === -1)
+        arr.push(item);
 }
 function removeItem(arr, item) {
     var index = arr.indexOf(item);
-    index > -1 && arr.splice(index, 1);
+    if (index > -1)
+        arr.splice(index, 1);
 }
 // Adapted from array-move
 function moveItem(_a, fromIndex, toIndex) {

package/dist/es/value/index.mjs

@@ -25,7 +25,7 @@ var MotionValue = /** @class */ (function () {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.0.3";
+        this.version = "7.1.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/es/value/use-will-change/is.mjs

@@ -0,0 +1,7 @@
+import { isMotionValue } from '../utils/is-motion-value.mjs';
+
+function isWillChangeMotionValue(value) {
+    return Boolean(isMotionValue(value) && value.add);
+}
+
+export { isWillChangeMotionValue };

package/dist/framer-motion.dev.js

@@ -849,9 +849,7 @@
         if (!transformHasZ && enableHardwareAcceleration) {
             transformString += "translateZ(0)";
         }
-        else {
-            transformString = transformString.trim();
-        }
+        transformString = transformString.trim();
         // If we have a custom `transform` template, pass our transform values and
         // generated transformString to that before returning
         if (transformTemplate) {
@@ -3590,11 +3588,13 @@
     var isZeroValueString = function (v) { return /^0[^.\s]+$/.test(v); };
 
     function addUniqueItem(arr, item) {
-        arr.indexOf(item) === -1 && arr.push(item);
+        if (arr.indexOf(item) === -1)
+            arr.push(item);
     }
     function removeItem(arr, item) {
         var index = arr.indexOf(item);
-        index > -1 && arr.splice(index, 1);
+        if (index > -1)
+            arr.splice(index, 1);
     }
     // Adapted from array-move
     function moveItem(_a, fromIndex, toIndex) {
@@ -3670,7 +3670,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "7.0.3";
+            this.version = "7.1.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -4090,6 +4090,10 @@
         return origin;
     }
 
+    function isWillChangeMotionValue(value) {
+        return Boolean(isMotionValue(value) && value.add);
+    }
+
     function animateVisualElement(visualElement, definition, options) {
         if (options === void 0) { options = {}; }
         visualElement.notifyAnimationStart(definition);
@@ -4161,18 +4165,19 @@
         var _b;
         var _c = _a === void 0 ? {} : _a, _d = _c.delay, delay = _d === void 0 ? 0 : _d, transitionOverride = _c.transitionOverride, type = _c.type;
         var _e = visualElement.makeTargetAnimatable(definition), _f = _e.transition, transition = _f === void 0 ? visualElement.getDefaultTransition() : _f, transitionEnd = _e.transitionEnd, target = __rest(_e, ["transition", "transitionEnd"]);
+        var willChange = visualElement.getValue("willChange");
         if (transitionOverride)
             transition = transitionOverride;
         var animations = [];
         var animationTypeState = type && ((_b = visualElement.animationState) === null || _b === void 0 ? void 0 : _b.getState()[type]);
-        for (var key in target) {
+        var _loop_1 = function (key) {
             var value = visualElement.getValue(key);
             var valueTarget = target[key];
             if (!value ||
                 valueTarget === undefined ||
                 (animationTypeState &&
                     shouldBlockAnimation(animationTypeState, key))) {
-                continue;
+                return "continue";
             }
             var valueTransition = __assign({ delay: delay }, transition);
             /**
@@ -4182,7 +4187,14 @@
                 valueTransition = __assign(__assign({}, valueTransition), { type: false, delay: 0 });
             }
             var animation = startAnimation(key, value, valueTarget, valueTransition);
+            if (isWillChangeMotionValue(willChange)) {
+                willChange.add(key);
+                animation = animation.then(function () { return willChange.remove(key); });
+            }
             animations.push(animation);
+        };
+        for (var key in target) {
+            _loop_1(key);
         }
         return Promise.all(animations).then(function () {
             transitionEnd && setTarget(visualElement, transitionEnd);
@@ -4251,7 +4263,6 @@
     function createAnimationState(visualElement) {
         var animate = animateList(visualElement);
         var state = createState();
-        var allAnimatedKeys = {};
         var isInitialRender = true;
         /**
          * This function will be used to reduce the animation definitions for
@@ -4265,9 +4276,6 @@
             }
             return acc;
         };
-        function isAnimated(key) {
-            return allAnimatedKeys[key] !== undefined;
-        }
         /**
          * This just allows us to inject mocked animation functions
          * @internal
@@ -4481,7 +4489,6 @@
             for (var i = 0; i < numAnimationTypes; i++) {
                 _loop_1(i);
             }
-            allAnimatedKeys = __assign({}, encounteredKeys);
             /**
              * If there are some removed value that haven't been dealt with,
              * we need to create a new animation that falls back either to the value
@@ -4524,7 +4531,6 @@
             return animations;
         }
         return {
-            isAnimated: isAnimated,
             animateChanges: animateChanges,
             setActive: setActive,
             setAnimateFunction: setAnimateFunction,
@@ -5626,6 +5632,7 @@
 
     function updateMotionValuesFromProps(element, next, prev) {
         var _a;
+        var willChange = next.willChange;
         for (var key in next) {
             var nextValue = next[key];
             var prevValue = prev[key];
@@ -5635,20 +5642,26 @@
                  * to our visual element's motion value map.
                  */
                 element.addValue(key, nextValue);
+                if (isWillChangeMotionValue(willChange)) {
+                    willChange.add(key);
+                }
                 /**
                  * Check the version of the incoming motion value with this version
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.0.3", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.3 may not work as expected."));
+                    warnOnce(nextValue.version === "7.1.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.1.0 may not work as expected."));
                 }
             }
             else if (isMotionValue(prevValue)) {
                 /**
-                 * If we're swapping to a new motion value, create a new motion value
-                 * from that
+                 * If we're swapping from a motion value to a static value,
+                 * create a new motion value from that
                  */
                 element.addValue(key, motionValue(nextValue));
+                if (isWillChangeMotionValue(willChange)) {
+                    willChange.remove(key);
+                }
             }
             else if (prevValue !== nextValue) {
                 /**
@@ -5761,11 +5774,14 @@
              * Doing so will break some tests but this isn't neccessarily a breaking change,
              * more a reflection of the test.
              */
-            var initialMotionValues = scrapeMotionValuesFromProps(props);
+            var _b = scrapeMotionValuesFromProps(props), willChange = _b.willChange, initialMotionValues = __rest(_b, ["willChange"]);
             for (var key in initialMotionValues) {
                 var value = initialMotionValues[key];
                 if (latestValues[key] !== undefined && isMotionValue(value)) {
                     value.set(latestValues[key], false);
+                    if (isWillChangeMotionValue(willChange)) {
+                        willChange.add(key);
+                    }
                 }
             }
             /**
@@ -6386,7 +6402,7 @@
             // Reapply original values
             visualElement.syncRender();
             // Restore scroll position
-            if (scrollY_1 !== null)
+            if (isBrowser && scrollY_1 !== null)
                 window.scrollTo({ top: scrollY_1 });
             return { target: convertedTarget, transitionEnd: transitionEnd };
         }