framer-motion 11.11.8 → 11.11.10

package/dist/cjs/client.js

@@ -3281,7 +3281,7 @@ class MotionValue {
          * 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 = "11.11.8";
+        this.version = "11.11.10";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -3600,27 +3600,15 @@ function isWillChangeMotionValue(value) {
     return Boolean(isMotionValue(value) && value.add);
 }
 
-function getWillChangeName(name) {
-    if (transformProps.has(name)) {
-        return "transform";
-    }
-    else if (acceleratedValues.has(name)) {
-        return camelToDash(name);
-    }
-}
-
 function addValueToWillChange(visualElement, key) {
-    var _a;
-    if (!visualElement.applyWillChange)
-        return;
     const willChange = visualElement.getValue("willChange");
+    /**
+     * It could be that a user has set willChange to a regular MotionValue,
+     * in which case we can't add the value to it.
+     */
     if (isWillChangeMotionValue(willChange)) {
         return willChange.add(key);
     }
-    else if (!((_a = visualElement.props.style) === null || _a === void 0 ? void 0 : _a.willChange) &&
-        getWillChangeName(key)) {
-        visualElement.setStaticValue("willChange", "transform");
-    }
 }
 
 /**
@@ -5811,13 +5799,6 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
             newValues[key] = style[key];
         }
     }
-    /**
-     * If the willChange style has been manually set as a string, set
-     * applyWillChange to false to prevent it from automatically being applied.
-     */
-    if (visualElement && style && typeof style.willChange === "string") {
-        visualElement.applyWillChange = false;
-    }
     return newValues;
 }
 
@@ -5879,7 +5860,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.11.8", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.8 may not work as expected.`);
+                warnOnce(nextValue.version === "11.11.10", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.10 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5979,11 +5960,6 @@ class VisualElement {
         return {};
     }
     constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState, }, options = {}) {
-        /**
-         * If true, will-change will be applied to the element. Only HTMLVisualElements
-         * currently support this.
-         */
-        this.applyWillChange = false;
         /**
          * A reference to the current underlying Instance, e.g. a HTMLElement
          * or Three.Mesh etc.
@@ -6738,7 +6714,6 @@ class HTMLVisualElement extends DOMVisualElement {
     constructor() {
         super(...arguments);
         this.type = "html";
-        this.applyWillChange = true;
         this.renderInstance = renderHTML;
     }
     readValueFromInstance(instance, key) {
@@ -9306,9 +9281,9 @@ function useConstant(init) {
     return ref.current;
 }
 
-function makeState({ applyWillChange = false, scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext, isStatic) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {
     const state = {
-        latestValues: makeLatestValues(props, context, presenceContext, isStatic ? false : applyWillChange, scrapeMotionValuesFromProps),
+        latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
     if (onMount) {
@@ -9319,23 +9294,11 @@ function makeState({ applyWillChange = false, scrapeMotionValuesFromProps, creat
 const makeUseVisualState = (config) => (props, isStatic) => {
     const context = react.useContext(MotionContext);
     const presenceContext = react.useContext(PresenceContext);
-    const make = () => makeState(config, props, context, presenceContext, isStatic);
+    const make = () => makeState(config, props, context, presenceContext);
     return isStatic ? make() : useConstant(make);
 };
-function forEachDefinition(props, definition, callback) {
-    const list = Array.isArray(definition) ? definition : [definition];
-    for (let i = 0; i < list.length; i++) {
-        const resolved = resolveVariantFromProps(props, list[i]);
-        if (resolved) {
-            const { transitionEnd, transition, ...target } = resolved;
-            callback(target, transitionEnd);
-        }
-    }
-}
-function makeLatestValues(props, context, presenceContext, shouldApplyWillChange, scrapeMotionValues) {
-    var _a;
+function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     const values = {};
-    let applyWillChange = shouldApplyWillChange && ((_a = props.style) === null || _a === void 0 ? void 0 : _a.willChange) === undefined;
     const motionValues = scrapeMotionValues(props, {});
     for (const key in motionValues) {
         values[key] = resolveMotionValue(motionValues[key]);
@@ -9360,40 +9323,31 @@ function makeLatestValues(props, context, presenceContext, shouldApplyWillChange
     if (variantToSet &&
         typeof variantToSet !== "boolean" &&
         !isAnimationControls(variantToSet)) {
-        forEachDefinition(props, variantToSet, (target, transitionEnd) => {
-            for (const key in target) {
-                let valueTarget = target[key];
-                if (Array.isArray(valueTarget)) {
-                    /**
-                     * Take final keyframe if the initial animation is blocked because
-                     * we want to initialise at the end of that blocked animation.
-                     */
-                    const index = isInitialAnimationBlocked
-                        ? valueTarget.length - 1
-                        : 0;
-                    valueTarget = valueTarget[index];
-                }
-                if (valueTarget !== null) {
-                    values[key] = valueTarget;
-                }
-            }
-            for (const key in transitionEnd) {
-                values[key] = transitionEnd[key];
-            }
-        });
-    }
-    // Add animating values to will-change
-    if (applyWillChange) {
-        if (animate && initial !== false && !isAnimationControls(animate)) {
-            forEachDefinition(props, animate, (target) => {
+        const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
+        for (let i = 0; i < list.length; i++) {
+            const resolved = resolveVariantFromProps(props, list[i]);
+            if (resolved) {
+                const { transitionEnd, transition, ...target } = resolved;
                 for (const key in target) {
-                    const willChangeName = getWillChangeName(key);
-                    if (willChangeName) {
-                        values.willChange = "transform";
-                        return;
+                    let valueTarget = target[key];
+                    if (Array.isArray(valueTarget)) {
+                        /**
+                         * Take final keyframe if the initial animation is blocked because
+                         * we want to initialise at the end of that blocked animation.
+                         */
+                        const index = isInitialAnimationBlocked
+                            ? valueTarget.length - 1
+                            : 0;
+                        valueTarget = valueTarget[index];
+                    }
+                    if (valueTarget !== null) {
+                        values[key] = valueTarget;
                     }
                 }
-            });
+                for (const key in transitionEnd) {
+                    values[key] = transitionEnd[key];
+                }
+            }
         }
     }
     return values;
@@ -9444,7 +9398,6 @@ const svgMotionConfig = {
 
 const htmlMotionConfig = {
     useVisualState: makeUseVisualState({
-        applyWillChange: true,
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
         createRenderState: createHtmlRenderState,
     }),

package/dist/cjs/dom.js

@@ -279,7 +279,7 @@ class MotionValue {
          * 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 = "11.11.8";
+        this.version = "11.11.10";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -3901,27 +3901,15 @@ function isWillChangeMotionValue(value) {
     return Boolean(isMotionValue(value) && value.add);
 }
 
-function getWillChangeName(name) {
-    if (transformProps.has(name)) {
-        return "transform";
-    }
-    else if (acceleratedValues.has(name)) {
-        return camelToDash(name);
-    }
-}
-
 function addValueToWillChange(visualElement, key) {
-    var _a;
-    if (!visualElement.applyWillChange)
-        return;
     const willChange = visualElement.getValue("willChange");
+    /**
+     * It could be that a user has set willChange to a regular MotionValue,
+     * in which case we can't add the value to it.
+     */
     if (isWillChangeMotionValue(willChange)) {
         return willChange.add(key);
     }
-    else if (!((_a = visualElement.props.style) === null || _a === void 0 ? void 0 : _a.willChange) &&
-        getWillChangeName(key)) {
-        visualElement.setStaticValue("willChange", "transform");
-    }
 }
 
 /**
@@ -4016,13 +4004,6 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
             newValues[key] = style[key];
         }
     }
-    /**
-     * If the willChange style has been manually set as a string, set
-     * applyWillChange to false to prevent it from automatically being applied.
-     */
-    if (visualElement && style && typeof style.willChange === "string") {
-        visualElement.applyWillChange = false;
-    }
     return newValues;
 }
 
@@ -4108,7 +4089,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.11.8", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.8 may not work as expected.`);
+                warnOnce(nextValue.version === "11.11.10", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.10 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4214,11 +4195,6 @@ class VisualElement {
         return {};
     }
     constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState, }, options = {}) {
-        /**
-         * If true, will-change will be applied to the element. Only HTMLVisualElements
-         * currently support this.
-         */
-        this.applyWillChange = false;
         /**
          * A reference to the current underlying Instance, e.g. a HTMLElement
          * or Three.Mesh etc.
@@ -5006,7 +4982,6 @@ class HTMLVisualElement extends DOMVisualElement {
     constructor() {
         super(...arguments);
         this.type = "html";
-        this.applyWillChange = true;
         this.renderInstance = renderHTML;
     }
     readValueFromInstance(instance, key) {

package/dist/cjs/index.js

@@ -3364,7 +3364,7 @@ class MotionValue {
          * 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 = "11.11.8";
+        this.version = "11.11.10";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -3686,27 +3686,15 @@ function isWillChangeMotionValue(value) {
     return Boolean(isMotionValue(value) && value.add);
 }
 
-function getWillChangeName(name) {
-    if (transformProps.has(name)) {
-        return "transform";
-    }
-    else if (acceleratedValues.has(name)) {
-        return camelToDash(name);
-    }
-}
-
 function addValueToWillChange(visualElement, key) {
-    var _a;
-    if (!visualElement.applyWillChange)
-        return;
     const willChange = visualElement.getValue("willChange");
+    /**
+     * It could be that a user has set willChange to a regular MotionValue,
+     * in which case we can't add the value to it.
+     */
     if (isWillChangeMotionValue(willChange)) {
         return willChange.add(key);
     }
-    else if (!((_a = visualElement.props.style) === null || _a === void 0 ? void 0 : _a.willChange) &&
-        getWillChangeName(key)) {
-        visualElement.setStaticValue("willChange", "transform");
-    }
 }
 
 /**
@@ -6239,13 +6227,6 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
             newValues[key] = style[key];
         }
     }
-    /**
-     * If the willChange style has been manually set as a string, set
-     * applyWillChange to false to prevent it from automatically being applied.
-     */
-    if (visualElement && style && typeof style.willChange === "string") {
-        visualElement.applyWillChange = false;
-    }
     return newValues;
 }
 
@@ -6307,7 +6288,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.11.8", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.8 may not work as expected.`);
+                warnOnce(nextValue.version === "11.11.10", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.10 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -6407,11 +6388,6 @@ class VisualElement {
         return {};
     }
     constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState, }, options = {}) {
-        /**
-         * If true, will-change will be applied to the element. Only HTMLVisualElements
-         * currently support this.
-         */
-        this.applyWillChange = false;
         /**
          * A reference to the current underlying Instance, e.g. a HTMLElement
          * or Three.Mesh etc.
@@ -7166,7 +7142,6 @@ class HTMLVisualElement extends DOMVisualElement {
     constructor() {
         super(...arguments);
         this.type = "html";
-        this.applyWillChange = true;
         this.renderInstance = renderHTML;
     }
     readValueFromInstance(instance, key) {
@@ -10802,9 +10777,9 @@ function useConstant(init) {
     return ref.current;
 }
 
-function makeState({ applyWillChange = false, scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext, isStatic) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {
     const state = {
-        latestValues: makeLatestValues(props, context, presenceContext, isStatic ? false : applyWillChange, scrapeMotionValuesFromProps),
+        latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
     if (onMount) {
@@ -10815,23 +10790,11 @@ function makeState({ applyWillChange = false, scrapeMotionValuesFromProps, creat
 const makeUseVisualState = (config) => (props, isStatic) => {
     const context = React.useContext(MotionContext);
     const presenceContext = React.useContext(PresenceContext);
-    const make = () => makeState(config, props, context, presenceContext, isStatic);
+    const make = () => makeState(config, props, context, presenceContext);
     return isStatic ? make() : useConstant(make);
 };
-function forEachDefinition(props, definition, callback) {
-    const list = Array.isArray(definition) ? definition : [definition];
-    for (let i = 0; i < list.length; i++) {
-        const resolved = resolveVariantFromProps(props, list[i]);
-        if (resolved) {
-            const { transitionEnd, transition, ...target } = resolved;
-            callback(target, transitionEnd);
-        }
-    }
-}
-function makeLatestValues(props, context, presenceContext, shouldApplyWillChange, scrapeMotionValues) {
-    var _a;
+function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     const values = {};
-    let applyWillChange = shouldApplyWillChange && ((_a = props.style) === null || _a === void 0 ? void 0 : _a.willChange) === undefined;
     const motionValues = scrapeMotionValues(props, {});
     for (const key in motionValues) {
         values[key] = resolveMotionValue(motionValues[key]);
@@ -10856,40 +10819,31 @@ function makeLatestValues(props, context, presenceContext, shouldApplyWillChange
     if (variantToSet &&
         typeof variantToSet !== "boolean" &&
         !isAnimationControls(variantToSet)) {
-        forEachDefinition(props, variantToSet, (target, transitionEnd) => {
-            for (const key in target) {
-                let valueTarget = target[key];
-                if (Array.isArray(valueTarget)) {
-                    /**
-                     * Take final keyframe if the initial animation is blocked because
-                     * we want to initialise at the end of that blocked animation.
-                     */
-                    const index = isInitialAnimationBlocked
-                        ? valueTarget.length - 1
-                        : 0;
-                    valueTarget = valueTarget[index];
-                }
-                if (valueTarget !== null) {
-                    values[key] = valueTarget;
-                }
-            }
-            for (const key in transitionEnd) {
-                values[key] = transitionEnd[key];
-            }
-        });
-    }
-    // Add animating values to will-change
-    if (applyWillChange) {
-        if (animate && initial !== false && !isAnimationControls(animate)) {
-            forEachDefinition(props, animate, (target) => {
+        const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
+        for (let i = 0; i < list.length; i++) {
+            const resolved = resolveVariantFromProps(props, list[i]);
+            if (resolved) {
+                const { transitionEnd, transition, ...target } = resolved;
                 for (const key in target) {
-                    const willChangeName = getWillChangeName(key);
-                    if (willChangeName) {
-                        values.willChange = "transform";
-                        return;
+                    let valueTarget = target[key];
+                    if (Array.isArray(valueTarget)) {
+                        /**
+                         * Take final keyframe if the initial animation is blocked because
+                         * we want to initialise at the end of that blocked animation.
+                         */
+                        const index = isInitialAnimationBlocked
+                            ? valueTarget.length - 1
+                            : 0;
+                        valueTarget = valueTarget[index];
+                    }
+                    if (valueTarget !== null) {
+                        values[key] = valueTarget;
                     }
                 }
-            });
+                for (const key in transitionEnd) {
+                    values[key] = transitionEnd[key];
+                }
+            }
         }
     }
     return values;
@@ -10940,7 +10894,6 @@ const svgMotionConfig = {
 
 const htmlMotionConfig = {
     useVisualState: makeUseVisualState({
-        applyWillChange: true,
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
         createRenderState: createHtmlRenderState,
     }),
@@ -12084,6 +12037,15 @@ function useTime() {
     return time;
 }
 
+function getWillChangeName(name) {
+    if (transformProps.has(name)) {
+        return "transform";
+    }
+    else if (acceleratedValues.has(name)) {
+        return camelToDash(name);
+    }
+}
+
 class WillChangeMotionValue extends MotionValue {
     constructor() {
         super(...arguments);

package/dist/cjs/m.js

@@ -686,13 +686,6 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
             newValues[key] = style[key];
         }
     }
-    /**
-     * If the willChange style has been manually set as a string, set
-     * applyWillChange to false to prevent it from automatically being applied.
-     */
-    if (visualElement && style && typeof style.willChange === "string") {
-        visualElement.applyWillChange = false;
-    }
     return newValues;
 }
 
@@ -776,31 +769,9 @@ function resolveMotionValue(value) {
         : unwrappedValue;
 }
 
-/**
- * A list of values that can be hardware-accelerated.
- */
-const acceleratedValues = new Set([
-    "opacity",
-    "clipPath",
-    "filter",
-    "transform",
-    // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
-    // or until we implement support for linear() easing.
-    // "background-color"
-]);
-
-function getWillChangeName(name) {
-    if (transformProps.has(name)) {
-        return "transform";
-    }
-    else if (acceleratedValues.has(name)) {
-        return camelToDash(name);
-    }
-}
-
-function makeState({ applyWillChange = false, scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext, isStatic) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {
     const state = {
-        latestValues: makeLatestValues(props, context, presenceContext, isStatic ? false : applyWillChange, scrapeMotionValuesFromProps),
+        latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
     if (onMount) {
@@ -811,23 +782,11 @@ function makeState({ applyWillChange = false, scrapeMotionValuesFromProps, creat
 const makeUseVisualState = (config) => (props, isStatic) => {
     const context = react.useContext(MotionContext);
     const presenceContext = react.useContext(PresenceContext);
-    const make = () => makeState(config, props, context, presenceContext, isStatic);
+    const make = () => makeState(config, props, context, presenceContext);
     return isStatic ? make() : useConstant(make);
 };
-function forEachDefinition(props, definition, callback) {
-    const list = Array.isArray(definition) ? definition : [definition];
-    for (let i = 0; i < list.length; i++) {
-        const resolved = resolveVariantFromProps(props, list[i]);
-        if (resolved) {
-            const { transitionEnd, transition, ...target } = resolved;
-            callback(target, transitionEnd);
-        }
-    }
-}
-function makeLatestValues(props, context, presenceContext, shouldApplyWillChange, scrapeMotionValues) {
-    var _a;
+function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     const values = {};
-    let applyWillChange = shouldApplyWillChange && ((_a = props.style) === null || _a === void 0 ? void 0 : _a.willChange) === undefined;
     const motionValues = scrapeMotionValues(props, {});
     for (const key in motionValues) {
         values[key] = resolveMotionValue(motionValues[key]);
@@ -852,40 +811,31 @@ function makeLatestValues(props, context, presenceContext, shouldApplyWillChange
     if (variantToSet &&
         typeof variantToSet !== "boolean" &&
         !isAnimationControls(variantToSet)) {
-        forEachDefinition(props, variantToSet, (target, transitionEnd) => {
-            for (const key in target) {
-                let valueTarget = target[key];
-                if (Array.isArray(valueTarget)) {
-                    /**
-                     * Take final keyframe if the initial animation is blocked because
-                     * we want to initialise at the end of that blocked animation.
-                     */
-                    const index = isInitialAnimationBlocked
-                        ? valueTarget.length - 1
-                        : 0;
-                    valueTarget = valueTarget[index];
-                }
-                if (valueTarget !== null) {
-                    values[key] = valueTarget;
-                }
-            }
-            for (const key in transitionEnd) {
-                values[key] = transitionEnd[key];
-            }
-        });
-    }
-    // Add animating values to will-change
-    if (applyWillChange) {
-        if (animate && initial !== false && !isAnimationControls(animate)) {
-            forEachDefinition(props, animate, (target) => {
+        const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
+        for (let i = 0; i < list.length; i++) {
+            const resolved = resolveVariantFromProps(props, list[i]);
+            if (resolved) {
+                const { transitionEnd, transition, ...target } = resolved;
                 for (const key in target) {
-                    const willChangeName = getWillChangeName(key);
-                    if (willChangeName) {
-                        values.willChange = "transform";
-                        return;
+                    let valueTarget = target[key];
+                    if (Array.isArray(valueTarget)) {
+                        /**
+                         * Take final keyframe if the initial animation is blocked because
+                         * we want to initialise at the end of that blocked animation.
+                         */
+                        const index = isInitialAnimationBlocked
+                            ? valueTarget.length - 1
+                            : 0;
+                        valueTarget = valueTarget[index];
+                    }
+                    if (valueTarget !== null) {
+                        values[key] = valueTarget;
                     }
                 }
-            });
+                for (const key in transitionEnd) {
+                    values[key] = transitionEnd[key];
+                }
+            }
         }
     }
     return values;
@@ -1276,7 +1226,6 @@ const svgMotionConfig = {
 
 const htmlMotionConfig = {
     useVisualState: makeUseVisualState({
-        applyWillChange: true,
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
         createRenderState: createHtmlRenderState,
     }),