framer-motion 11.9.0 → 11.10.0

package/dist/cjs/client.js

@@ -3279,7 +3279,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.9.0";
+        this.version = "11.10.0";
         /**
          * 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
@@ -3592,6 +3592,12 @@ function getOptimisedAppearId(visualElement) {
     return visualElement.props[optimizedAppearDataAttribute];
 }
 
+const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
+function isWillChangeMotionValue(value) {
+    return Boolean(isMotionValue(value) && value.add);
+}
+
 function getWillChangeName(name) {
     if (transformProps.has(name)) {
         return "transform";
@@ -3601,49 +3607,18 @@ function getWillChangeName(name) {
     }
 }
 
-class WillChangeMotionValue extends MotionValue {
-    constructor() {
-        super(...arguments);
-        this.values = [];
-    }
-    add(name) {
-        const styleName = getWillChangeName(name);
-        if (styleName) {
-            addUniqueItem(this.values, styleName);
-            this.update();
-        }
-    }
-    update() {
-        this.set(this.values.length ? this.values.join(", ") : "auto");
-    }
-}
-
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
-function isWillChangeMotionValue(value) {
-    return Boolean(isMotionValue(value) && value.add);
-}
-
 function addValueToWillChange(visualElement, key) {
     var _a;
     if (!visualElement.applyWillChange)
         return;
-    let willChange = visualElement.getValue("willChange");
-    /**
-     * If we haven't created a willChange MotionValue, and the we haven't been
-     * manually provided one, create one.
-     */
-    if (!willChange && !((_a = visualElement.props.style) === null || _a === void 0 ? void 0 : _a.willChange)) {
-        willChange = new WillChangeMotionValue("auto");
-        visualElement.addValue("willChange", 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.
-     */
+    const willChange = visualElement.getValue("willChange");
     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");
+    }
 }
 
 /**
@@ -5902,7 +5877,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.9.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.9.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.10.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.10.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -9346,12 +9321,6 @@ const makeUseVisualState = (config) => (props, isStatic) => {
     const make = () => makeState(config, props, context, presenceContext, isStatic);
     return isStatic ? make() : useConstant(make);
 };
-function addWillChange(willChange, name) {
-    const memberName = getWillChangeName(name);
-    if (memberName) {
-        addUniqueItem(willChange, memberName);
-    }
-}
 function forEachDefinition(props, definition, callback) {
     const list = Array.isArray(definition) ? definition : [definition];
     for (let i = 0; i < list.length; i++) {
@@ -9365,8 +9334,7 @@ function forEachDefinition(props, definition, callback) {
 function makeLatestValues(props, context, presenceContext, shouldApplyWillChange, scrapeMotionValues) {
     var _a;
     const values = {};
-    const willChange = [];
-    const applyWillChange = shouldApplyWillChange && ((_a = props.style) === null || _a === void 0 ? void 0 : _a.willChange) === undefined;
+    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]);
@@ -9418,13 +9386,14 @@ function makeLatestValues(props, context, presenceContext, shouldApplyWillChange
         if (animate && initial !== false && !isAnimationControls(animate)) {
             forEachDefinition(props, animate, (target) => {
                 for (const key in target) {
-                    addWillChange(willChange, key);
+                    const willChangeName = getWillChangeName(key);
+                    if (willChangeName) {
+                        values.willChange = "transform";
+                        return;
+                    }
                 }
             });
         }
-        if (willChange.length) {
-            values.willChange = willChange.join(",");
-        }
     }
     return values;
 }

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.9.0";
+        this.version = "11.10.0";
         /**
          * 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
@@ -3580,6 +3580,12 @@ function getOptimisedAppearId(visualElement) {
     return visualElement.props[optimizedAppearDataAttribute];
 }
 
+const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
+function isWillChangeMotionValue(value) {
+    return Boolean(isMotionValue(value) && value.add);
+}
+
 function getWillChangeName(name) {
     if (transformProps.has(name)) {
         return "transform";
@@ -3589,49 +3595,18 @@ function getWillChangeName(name) {
     }
 }
 
-class WillChangeMotionValue extends MotionValue {
-    constructor() {
-        super(...arguments);
-        this.values = [];
-    }
-    add(name) {
-        const styleName = getWillChangeName(name);
-        if (styleName) {
-            addUniqueItem(this.values, styleName);
-            this.update();
-        }
-    }
-    update() {
-        this.set(this.values.length ? this.values.join(", ") : "auto");
-    }
-}
-
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
-function isWillChangeMotionValue(value) {
-    return Boolean(isMotionValue(value) && value.add);
-}
-
 function addValueToWillChange(visualElement, key) {
     var _a;
     if (!visualElement.applyWillChange)
         return;
-    let willChange = visualElement.getValue("willChange");
-    /**
-     * If we haven't created a willChange MotionValue, and the we haven't been
-     * manually provided one, create one.
-     */
-    if (!willChange && !((_a = visualElement.props.style) === null || _a === void 0 ? void 0 : _a.willChange)) {
-        willChange = new WillChangeMotionValue("auto");
-        visualElement.addValue("willChange", 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.
-     */
+    const willChange = visualElement.getValue("willChange");
     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");
+    }
 }
 
 /**
@@ -3818,7 +3793,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.9.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.9.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.10.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.10.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -6021,6 +5996,9 @@ function delay(callback, timeout) {
     frame.read(checkElapsed, true);
     return () => cancelFrame(checkElapsed);
 }
+function delayInSeconds(callback, timeout) {
+    return delay(callback, secondsToMilliseconds(timeout));
+}
 
 const distance = (a, b) => Math.abs(a - b);
 function distance2D(a, b) {
@@ -6061,7 +6039,7 @@ exports.circOut = circOut;
 exports.clamp = clamp;
 exports.createScopedAnimate = createScopedAnimate;
 exports.cubicBezier = cubicBezier;
-exports.delay = delay;
+exports.delay = delayInSeconds;
 exports.distance = distance;
 exports.distance2D = distance2D;
 exports.easeIn = easeIn;

package/dist/cjs/index.js

@@ -3362,7 +3362,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.9.0";
+        this.version = "11.10.0";
         /**
          * 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
@@ -3678,6 +3678,12 @@ function getOptimisedAppearId(visualElement) {
     return visualElement.props[optimizedAppearDataAttribute];
 }
 
+const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
+function isWillChangeMotionValue(value) {
+    return Boolean(isMotionValue(value) && value.add);
+}
+
 function getWillChangeName(name) {
     if (transformProps.has(name)) {
         return "transform";
@@ -3687,49 +3693,18 @@ function getWillChangeName(name) {
     }
 }
 
-class WillChangeMotionValue extends MotionValue {
-    constructor() {
-        super(...arguments);
-        this.values = [];
-    }
-    add(name) {
-        const styleName = getWillChangeName(name);
-        if (styleName) {
-            addUniqueItem(this.values, styleName);
-            this.update();
-        }
-    }
-    update() {
-        this.set(this.values.length ? this.values.join(", ") : "auto");
-    }
-}
-
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
-function isWillChangeMotionValue(value) {
-    return Boolean(isMotionValue(value) && value.add);
-}
-
 function addValueToWillChange(visualElement, key) {
     var _a;
     if (!visualElement.applyWillChange)
         return;
-    let willChange = visualElement.getValue("willChange");
-    /**
-     * If we haven't created a willChange MotionValue, and the we haven't been
-     * manually provided one, create one.
-     */
-    if (!willChange && !((_a = visualElement.props.style) === null || _a === void 0 ? void 0 : _a.willChange)) {
-        willChange = new WillChangeMotionValue("auto");
-        visualElement.addValue("willChange", 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.
-     */
+    const willChange = visualElement.getValue("willChange");
     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");
+    }
 }
 
 /**
@@ -6017,7 +5992,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.9.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.9.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.10.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.10.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -10770,12 +10745,6 @@ const makeUseVisualState = (config) => (props, isStatic) => {
     const make = () => makeState(config, props, context, presenceContext, isStatic);
     return isStatic ? make() : useConstant(make);
 };
-function addWillChange(willChange, name) {
-    const memberName = getWillChangeName(name);
-    if (memberName) {
-        addUniqueItem(willChange, memberName);
-    }
-}
 function forEachDefinition(props, definition, callback) {
     const list = Array.isArray(definition) ? definition : [definition];
     for (let i = 0; i < list.length; i++) {
@@ -10789,8 +10758,7 @@ function forEachDefinition(props, definition, callback) {
 function makeLatestValues(props, context, presenceContext, shouldApplyWillChange, scrapeMotionValues) {
     var _a;
     const values = {};
-    const willChange = [];
-    const applyWillChange = shouldApplyWillChange && ((_a = props.style) === null || _a === void 0 ? void 0 : _a.willChange) === undefined;
+    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]);
@@ -10842,13 +10810,14 @@ function makeLatestValues(props, context, presenceContext, shouldApplyWillChange
         if (animate && initial !== false && !isAnimationControls(animate)) {
             forEachDefinition(props, animate, (target) => {
                 for (const key in target) {
-                    addWillChange(willChange, key);
+                    const willChangeName = getWillChangeName(key);
+                    if (willChangeName) {
+                        values.willChange = "transform";
+                        return;
+                    }
                 }
             });
         }
-        if (willChange.length) {
-            values.willChange = willChange.join(",");
-        }
     }
     return values;
 }
@@ -12039,6 +12008,23 @@ function useTime() {
     return time;
 }
 
+class WillChangeMotionValue extends MotionValue {
+    constructor() {
+        super(...arguments);
+        this.values = [];
+    }
+    add(name) {
+        const styleName = getWillChangeName(name);
+        if (styleName) {
+            addUniqueItem(this.values, styleName);
+            this.update();
+        }
+    }
+    update() {
+        this.set(this.values.length ? this.values.join(", ") : "auto");
+    }
+}
+
 function useWillChange() {
     return useConstant(() => new WillChangeMotionValue("auto"));
 }

package/dist/cjs/m.js

@@ -799,11 +799,6 @@ function getWillChangeName(name) {
     }
 }
 
-function addUniqueItem(arr, item) {
-    if (arr.indexOf(item) === -1)
-        arr.push(item);
-}
-
 function makeState({ applyWillChange = false, scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext, isStatic) {
     const state = {
         latestValues: makeLatestValues(props, context, presenceContext, isStatic ? false : applyWillChange, scrapeMotionValuesFromProps),
@@ -820,12 +815,6 @@ const makeUseVisualState = (config) => (props, isStatic) => {
     const make = () => makeState(config, props, context, presenceContext, isStatic);
     return isStatic ? make() : useConstant(make);
 };
-function addWillChange(willChange, name) {
-    const memberName = getWillChangeName(name);
-    if (memberName) {
-        addUniqueItem(willChange, memberName);
-    }
-}
 function forEachDefinition(props, definition, callback) {
     const list = Array.isArray(definition) ? definition : [definition];
     for (let i = 0; i < list.length; i++) {
@@ -839,8 +828,7 @@ function forEachDefinition(props, definition, callback) {
 function makeLatestValues(props, context, presenceContext, shouldApplyWillChange, scrapeMotionValues) {
     var _a;
     const values = {};
-    const willChange = [];
-    const applyWillChange = shouldApplyWillChange && ((_a = props.style) === null || _a === void 0 ? void 0 : _a.willChange) === undefined;
+    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]);
@@ -892,13 +880,14 @@ function makeLatestValues(props, context, presenceContext, shouldApplyWillChange
         if (animate && initial !== false && !isAnimationControls(animate)) {
             forEachDefinition(props, animate, (target) => {
                 for (const key in target) {
-                    addWillChange(willChange, key);
+                    const willChangeName = getWillChangeName(key);
+                    if (willChangeName) {
+                        values.willChange = "transform";
+                        return;
+                    }
                 }
             });
         }
-        if (willChange.length) {
-            values.willChange = willChange.join(",");
-        }
     }
     return values;
 }

package/dist/dom.d.ts

@@ -909,6 +909,9 @@ declare global {
 
 declare function spring({ keyframes, restDelta, restSpeed, ...options }: ValueAnimationOptions<number>): KeyframeGenerator<number>;
 
+type DelayedFunction = (overshoot: number) => void;
+declare function delayInSeconds(callback: DelayedFunction, timeout: number): () => void;
+
 declare const backOut: (t: number) => number;
 declare const backIn: EasingFunction;
 declare const backInOut: EasingFunction;
@@ -944,12 +947,6 @@ declare function stagger(duration?: number, { startDelay, from, ease }?: Stagger
 
 declare const clamp: (min: number, max: number, v: number) => number;
 
-type DelayedFunction = (overshoot: number) => void;
-/**
- * Timeout defined in ms
- */
-declare function delay(callback: DelayedFunction, timeout: number): () => void;
-
 declare const distance: (a: number, b: number) => number;
 declare function distance2D(a: Point, b: Point): number;
 
@@ -1014,4 +1011,4 @@ declare const sync: Batcher;
  */
 declare const cancelSync: Record<string, (process: Process) => void>;
 
-export { type DelayedFunction, type DevMessage, type Direction, type InterpolateOptions, type MixerFactory, MotionValue, type PassiveEffect, type Subscriber, animate, animateMini, anticipate, backIn, backInOut, backOut, cancelFrame, cancelSync, circIn, circInOut, circOut, clamp, createScopedAnimate, cubicBezier, delay, distance, distance2D, easeIn, easeInOut, easeOut, frame, frameData, frameSteps, inView, inertia, interpolate, invariant, keyframes, mirrorEasing, mix, motionValue, pipe, progress, reverseEasing, scroll, scrollInfo, spring, stagger, steps, sync, transform, warning, wrap };
+export { type DelayedFunction, type DevMessage, type Direction, type InterpolateOptions, type MixerFactory, MotionValue, type PassiveEffect, type Subscriber, animate, animateMini, anticipate, backIn, backInOut, backOut, cancelFrame, cancelSync, circIn, circInOut, circOut, clamp, createScopedAnimate, cubicBezier, delayInSeconds as delay, distance, distance2D, easeIn, easeInOut, easeOut, frame, frameData, frameSteps, inView, inertia, interpolate, invariant, keyframes, mirrorEasing, mix, motionValue, pipe, progress, reverseEasing, scroll, scrollInfo, spring, stagger, steps, sync, transform, warning, wrap };