framer-motion 7.9.0 → 7.10.0

package/dist/cjs/index.js

@@ -2124,7 +2124,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 = "7.9.0";
+        this.version = "7.10.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2137,24 +2137,6 @@ class MotionValue {
          * @internal
          */
         this.lastUpdated = 0;
-        /**
-         * Functions to notify when the `MotionValue` updates.
-         *
-         * @internal
-         */
-        this.updateSubscribers = new SubscriptionManager();
-        /**
-         * Functions to notify when the velocity updates.
-         *
-         * @internal
-         */
-        this.velocityUpdateSubscribers = new SubscriptionManager();
-        /**
-         * Functions to notify when the `MotionValue` updates and `render` is set to `true`.
-         *
-         * @internal
-         */
-        this.renderSubscribers = new SubscriptionManager();
         /**
          * 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
@@ -2163,6 +2145,10 @@ class MotionValue {
          * @internal
          */
         this.canTrackVelocity = false;
+        /**
+         * An object containing a SubscriptionManager for each active event.
+         */
+        this.events = {};
         this.updateAndNotify = (v, render = true) => {
             this.prev = this.current;
             this.current = v;
@@ -2174,16 +2160,16 @@ class MotionValue {
                 sync.postRender(this.scheduleVelocityCheck);
             }
             // Update update subscribers
-            if (this.prev !== this.current) {
-                this.updateSubscribers.notify(this.current);
+            if (this.prev !== this.current && this.events.change) {
+                this.events.change.notify(this.current);
             }
             // Update velocity subscribers
-            if (this.velocityUpdateSubscribers.getSize()) {
-                this.velocityUpdateSubscribers.notify(this.getVelocity());
+            if (this.events.velocityChange) {
+                this.events.velocityChange.notify(this.getVelocity());
             }
             // Update render subscribers
-            if (render) {
-                this.renderSubscribers.notify(this.current);
+            if (render && this.events.renderRequest) {
+                this.events.renderRequest.notify(this.current);
             }
         };
         /**
@@ -2207,7 +2193,9 @@ class MotionValue {
         this.velocityCheck = ({ timestamp }) => {
             if (timestamp !== this.lastUpdated) {
                 this.prev = this.current;
-                this.velocityUpdateSubscribers.notify(this.getVelocity());
+                if (this.events.velocityChange) {
+                    this.events.velocityChange.notify(this.getVelocity());
+                }
             }
         };
         this.hasAnimated = false;
@@ -2237,8 +2225,8 @@ class MotionValue {
      *       opacity.set(newOpacity)
      *     }
      *
-     *     const unsubscribeX = x.onChange(updateOpacity)
-     *     const unsubscribeY = y.onChange(updateOpacity)
+     *     const unsubscribeX = x.on("change", updateOpacity)
+     *     const unsubscribeY = y.on("change", updateOpacity)
      *
      *     return () => {
      *       unsubscribeX()
@@ -2261,26 +2249,21 @@ class MotionValue {
      * @param subscriber - A function that receives the latest value.
      * @returns A function that, when called, will cancel this subscription.
      *
-     * @public
+     * @deprecated
      */
     onChange(subscription) {
-        return this.updateSubscribers.add(subscription);
+        return this.on("change", subscription);
     }
-    clearListeners() {
-        this.updateSubscribers.clear();
+    on(eventName, callback) {
+        if (!this.events[eventName]) {
+            this.events[eventName] = new SubscriptionManager();
+        }
+        return this.events[eventName].add(callback);
     }
-    /**
-     * Adds a function that will be notified when the `MotionValue` requests a render.
-     *
-     * @param subscriber - A function that's provided the latest value.
-     * @returns A function that, when called, will cancel this subscription.
-     *
-     * @internal
-     */
-    onRenderRequest(subscription) {
-        // Render immediately
-        subscription(this.get());
-        return this.renderSubscribers.add(subscription);
+    clearListeners() {
+        for (const eventManagers in this.events) {
+            this.events[eventManagers].clear();
+        }
     }
     /**
      * Attaches a passive effect to the `MotionValue`.
@@ -2366,7 +2349,15 @@ class MotionValue {
         return new Promise((resolve) => {
             this.hasAnimated = true;
             this.stopAnimation = animation(resolve);
-        }).then(() => this.clearAnimation());
+            if (this.events.animationStart) {
+                this.events.animationStart.notify();
+            }
+        }).then(() => {
+            if (this.events.animationComplete) {
+                this.events.animationComplete.notify();
+            }
+            this.clearAnimation();
+        });
     }
     /**
      * Stop the currently active animation.
@@ -2374,8 +2365,12 @@ class MotionValue {
      * @public
      */
     stop() {
-        if (this.stopAnimation)
+        if (this.stopAnimation) {
             this.stopAnimation();
+            if (this.events.animationCancel) {
+                this.events.animationCancel.notify();
+            }
+        }
         this.clearAnimation();
     }
     /**
@@ -2399,8 +2394,7 @@ class MotionValue {
      * @public
      */
     destroy() {
-        this.updateSubscribers.clear();
-        this.renderSubscribers.clear();
+        this.clearListeners();
         this.stop();
     }
 }
@@ -3620,12 +3614,29 @@ function animate$1({ duration, driver = framesync, elapsed = 0, repeat: repeatMa
 }
 
 const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+const validWaapiEasing = new Set([
+    "linear",
+    "ease-in",
+    "ease-out",
+    "ease-in-out",
+]);
+function mapEasingName(easingName) {
+    const name = camelToDash(easingName);
+    return validWaapiEasing.has(name) ? name : "ease";
+}
+function mapEasingToNativeEasing(easing) {
+    if (!easing)
+        return undefined;
+    return Array.isArray(easing)
+        ? cubicBezierAsString(easing)
+        : mapEasingName(easing);
+}
 
 function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
     return element.animate({ [valueName]: keyframes, offset: times }, {
         delay,
         duration,
-        easing: Array.isArray(ease) ? cubicBezierAsString(ease) : ease,
+        easing: mapEasingToNativeEasing(ease),
         fill: "both",
         iterations: repeat + 1,
         direction: repeatType === "reverse" ? "alternate" : "normal",
@@ -5927,7 +5938,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.9.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.9.0 may not work as expected.`);
+                warnOnce(nextValue.version === "7.10.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -6130,7 +6141,7 @@ class VisualElement {
     }
     bindToMotionValue(key, value) {
         const valueIsTransform = transformProps.has(key);
-        const removeOnChange = value.onChange((latestValue) => {
+        const removeOnChange = value.on("change", (latestValue) => {
             this.latestValues[key] = latestValue;
             this.props.onUpdate &&
                 sync.update(this.notifyUpdate, false, true);
@@ -6138,7 +6149,7 @@ class VisualElement {
                 this.projection.isTransformDirty = true;
             }
         });
-        const removeOnRenderRequest = value.onRenderRequest(this.scheduleRender);
+        const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender);
         this.valueSubscriptions.set(key, () => {
             removeOnChange();
             removeOnRenderRequest();
@@ -9020,7 +9031,7 @@ function useMotionValue(initial) {
     const { isStatic } = React.useContext(MotionConfigContext);
     if (isStatic) {
         const [, setLatest] = React.useState(initial);
-        React.useEffect(() => value.onChange(setLatest), []);
+        React.useEffect(() => value.on("change", setLatest), []);
     }
     return value;
 }
@@ -9047,13 +9058,13 @@ function useOnChange(value, callback) {
     useIsomorphicLayoutEffect(() => {
         if (isMotionValue(value)) {
             callback(value.get());
-            return value.onChange(callback);
+            return value.on("change", callback);
         }
     }, [value, callback]);
 }
 function useMultiOnChange(values, handler, cleanup) {
     useIsomorphicLayoutEffect(() => {
-        const subscriptions = values.map((value) => value.onChange(handler));
+        const subscriptions = values.map((value) => value.on("change", handler));
         return () => {
             subscriptions.forEach((unsubscribe) => unsubscribe());
             cleanup();
@@ -9260,7 +9271,7 @@ function useSpring(source, config = {}) {
 function useVelocity(value) {
     const velocity = useMotionValue(value.getVelocity());
     React.useEffect(() => {
-        return value.velocityUpdateSubscribers.add((newVelocity) => {
+        return value.on("velocityChange", (newVelocity) => {
             velocity.set(newVelocity);
         });
     }, [value]);
@@ -9373,6 +9384,10 @@ function useWillChange() {
     return useConstant(() => new WillChangeMotionValue("auto"));
 }
 
+function useMotionValueEvent(value, event, callback) {
+    useIsomorphicLayoutEffect(() => value.on(event, callback), [value, event, callback]);
+}
+
 /**
  * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
  *
@@ -9929,6 +9944,7 @@ exports.useIsPresent = useIsPresent;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useMotionTemplate = useMotionTemplate;
 exports.useMotionValue = useMotionValue;
+exports.useMotionValueEvent = useMotionValueEvent;
 exports.usePresence = usePresence;
 exports.useReducedMotion = useReducedMotion;
 exports.useReducedMotionConfig = useReducedMotionConfig;

package/dist/es/animation/waapi/easing.mjs

@@ -1,3 +1,22 @@
+import { camelToDash } from '../../render/dom/utils/camel-to-dash.mjs';
+
 const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+const validWaapiEasing = new Set([
+    "linear",
+    "ease-in",
+    "ease-out",
+    "ease-in-out",
+]);
+function mapEasingName(easingName) {
+    const name = camelToDash(easingName);
+    return validWaapiEasing.has(name) ? name : "ease";
+}
+function mapEasingToNativeEasing(easing) {
+    if (!easing)
+        return undefined;
+    return Array.isArray(easing)
+        ? cubicBezierAsString(easing)
+        : mapEasingName(easing);
+}
 
-export { cubicBezierAsString };
+export { cubicBezierAsString, mapEasingName, mapEasingToNativeEasing };

package/dist/es/animation/waapi/index.mjs

@@ -1,10 +1,10 @@
-import { cubicBezierAsString } from './easing.mjs';
+import { mapEasingToNativeEasing } from './easing.mjs';
 
 function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
     return element.animate({ [valueName]: keyframes, offset: times }, {
         delay,
         duration,
-        easing: Array.isArray(ease) ? cubicBezierAsString(ease) : ease,
+        easing: mapEasingToNativeEasing(ease),
         fill: "both",
         iterations: repeat + 1,
         direction: repeatType === "reverse" ? "alternate" : "normal",

package/dist/es/index.mjs

@@ -20,6 +20,7 @@ export { useElementScroll } from './value/scroll/use-element-scroll.mjs';
 export { useViewportScroll } from './value/scroll/use-viewport-scroll.mjs';
 export { useTime } from './value/use-time.mjs';
 export { useWillChange } from './value/use-will-change/index.mjs';
+export { useMotionValueEvent } from './utils/use-motion-value-event.mjs';
 export { useReducedMotion } from './utils/reduced-motion/use-reduced-motion.mjs';
 export { useReducedMotionConfig } from './utils/reduced-motion/use-reduced-motion-config.mjs';
 export { animationControls } from './animation/hooks/animation-controls.mjs';

package/dist/es/render/VisualElement.mjs

@@ -183,7 +183,7 @@ class VisualElement {
     }
     bindToMotionValue(key, value) {
         const valueIsTransform = transformProps.has(key);
-        const removeOnChange = value.onChange((latestValue) => {
+        const removeOnChange = value.on("change", (latestValue) => {
             this.latestValues[key] = latestValue;
             this.props.onUpdate &&
                 sync.update(this.notifyUpdate, false, true);
@@ -191,7 +191,7 @@ class VisualElement {
                 this.projection.isTransformDirty = true;
             }
         });
-        const removeOnRenderRequest = value.onRenderRequest(this.scheduleRender);
+        const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender);
         this.valueSubscriptions.set(key, () => {
             removeOnChange();
             removeOnRenderRequest();

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

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.9.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.9.0 may not work as expected.`);
+                warnOnce(nextValue.version === "7.10.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/utils/use-motion-value-event.mjs

@@ -0,0 +1,7 @@
+import { useIsomorphicLayoutEffect } from './use-isomorphic-effect.mjs';
+
+function useMotionValueEvent(value, event, callback) {
+    useIsomorphicLayoutEffect(() => value.on(event, callback), [value, event, callback]);
+}
+
+export { useMotionValueEvent };

package/dist/es/value/index.mjs

@@ -25,7 +25,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 = "7.9.0";
+        this.version = "7.10.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -38,24 +38,6 @@ class MotionValue {
          * @internal
          */
         this.lastUpdated = 0;
-        /**
-         * Functions to notify when the `MotionValue` updates.
-         *
-         * @internal
-         */
-        this.updateSubscribers = new SubscriptionManager();
-        /**
-         * Functions to notify when the velocity updates.
-         *
-         * @internal
-         */
-        this.velocityUpdateSubscribers = new SubscriptionManager();
-        /**
-         * Functions to notify when the `MotionValue` updates and `render` is set to `true`.
-         *
-         * @internal
-         */
-        this.renderSubscribers = new SubscriptionManager();
         /**
          * 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
@@ -64,6 +46,10 @@ class MotionValue {
          * @internal
          */
         this.canTrackVelocity = false;
+        /**
+         * An object containing a SubscriptionManager for each active event.
+         */
+        this.events = {};
         this.updateAndNotify = (v, render = true) => {
             this.prev = this.current;
             this.current = v;
@@ -75,16 +61,16 @@ class MotionValue {
                 sync.postRender(this.scheduleVelocityCheck);
             }
             // Update update subscribers
-            if (this.prev !== this.current) {
-                this.updateSubscribers.notify(this.current);
+            if (this.prev !== this.current && this.events.change) {
+                this.events.change.notify(this.current);
             }
             // Update velocity subscribers
-            if (this.velocityUpdateSubscribers.getSize()) {
-                this.velocityUpdateSubscribers.notify(this.getVelocity());
+            if (this.events.velocityChange) {
+                this.events.velocityChange.notify(this.getVelocity());
             }
             // Update render subscribers
-            if (render) {
-                this.renderSubscribers.notify(this.current);
+            if (render && this.events.renderRequest) {
+                this.events.renderRequest.notify(this.current);
             }
         };
         /**
@@ -108,7 +94,9 @@ class MotionValue {
         this.velocityCheck = ({ timestamp }) => {
             if (timestamp !== this.lastUpdated) {
                 this.prev = this.current;
-                this.velocityUpdateSubscribers.notify(this.getVelocity());
+                if (this.events.velocityChange) {
+                    this.events.velocityChange.notify(this.getVelocity());
+                }
             }
         };
         this.hasAnimated = false;
@@ -138,8 +126,8 @@ class MotionValue {
      *       opacity.set(newOpacity)
      *     }
      *
-     *     const unsubscribeX = x.onChange(updateOpacity)
-     *     const unsubscribeY = y.onChange(updateOpacity)
+     *     const unsubscribeX = x.on("change", updateOpacity)
+     *     const unsubscribeY = y.on("change", updateOpacity)
      *
      *     return () => {
      *       unsubscribeX()
@@ -162,26 +150,21 @@ class MotionValue {
      * @param subscriber - A function that receives the latest value.
      * @returns A function that, when called, will cancel this subscription.
      *
-     * @public
+     * @deprecated
      */
     onChange(subscription) {
-        return this.updateSubscribers.add(subscription);
+        return this.on("change", subscription);
     }
-    clearListeners() {
-        this.updateSubscribers.clear();
+    on(eventName, callback) {
+        if (!this.events[eventName]) {
+            this.events[eventName] = new SubscriptionManager();
+        }
+        return this.events[eventName].add(callback);
     }
-    /**
-     * Adds a function that will be notified when the `MotionValue` requests a render.
-     *
-     * @param subscriber - A function that's provided the latest value.
-     * @returns A function that, when called, will cancel this subscription.
-     *
-     * @internal
-     */
-    onRenderRequest(subscription) {
-        // Render immediately
-        subscription(this.get());
-        return this.renderSubscribers.add(subscription);
+    clearListeners() {
+        for (const eventManagers in this.events) {
+            this.events[eventManagers].clear();
+        }
     }
     /**
      * Attaches a passive effect to the `MotionValue`.
@@ -267,7 +250,15 @@ class MotionValue {
         return new Promise((resolve) => {
             this.hasAnimated = true;
             this.stopAnimation = animation(resolve);
-        }).then(() => this.clearAnimation());
+            if (this.events.animationStart) {
+                this.events.animationStart.notify();
+            }
+        }).then(() => {
+            if (this.events.animationComplete) {
+                this.events.animationComplete.notify();
+            }
+            this.clearAnimation();
+        });
     }
     /**
      * Stop the currently active animation.
@@ -275,8 +266,12 @@ class MotionValue {
      * @public
      */
     stop() {
-        if (this.stopAnimation)
+        if (this.stopAnimation) {
             this.stopAnimation();
+            if (this.events.animationCancel) {
+                this.events.animationCancel.notify();
+            }
+        }
         this.clearAnimation();
     }
     /**
@@ -300,8 +295,7 @@ class MotionValue {
      * @public
      */
     destroy() {
-        this.updateSubscribers.clear();
-        this.renderSubscribers.clear();
+        this.clearListeners();
         this.stop();
     }
 }

package/dist/es/value/use-motion-value.mjs

@@ -30,7 +30,7 @@ function useMotionValue(initial) {
     const { isStatic } = useContext(MotionConfigContext);
     if (isStatic) {
         const [, setLatest] = useState(initial);
-        useEffect(() => value.onChange(setLatest), []);
+        useEffect(() => value.on("change", setLatest), []);
     }
     return value;
 }

package/dist/es/value/use-on-change.mjs

@@ -5,13 +5,13 @@ function useOnChange(value, callback) {
     useIsomorphicLayoutEffect(() => {
         if (isMotionValue(value)) {
             callback(value.get());
-            return value.onChange(callback);
+            return value.on("change", callback);
         }
     }, [value, callback]);
 }
 function useMultiOnChange(values, handler, cleanup) {
     useIsomorphicLayoutEffect(() => {
-        const subscriptions = values.map((value) => value.onChange(handler));
+        const subscriptions = values.map((value) => value.on("change", handler));
         return () => {
             subscriptions.forEach((unsubscribe) => unsubscribe());
             cleanup();

package/dist/es/value/use-velocity.mjs

@@ -15,7 +15,7 @@ import { useMotionValue } from './use-motion-value.mjs';
 function useVelocity(value) {
     const velocity = useMotionValue(value.getVelocity());
     useEffect(() => {
-        return value.velocityUpdateSubscribers.add((newVelocity) => {
+        return value.on("velocityChange", (newVelocity) => {
             velocity.set(newVelocity);
         });
     }, [value]);