framer-motion 8.0.4 → 8.1.0

package/dist/cjs/index.js

@@ -2061,7 +2061,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 = "8.0.4";
+        this.version = "8.1.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2214,8 +2214,9 @@ class MotionValue {
      *
      * @internal
      */
-    attach(passiveEffect) {
+    attach(passiveEffect, stopPassiveEffect) {
         this.passiveEffect = passiveEffect;
+        this.stopPassiveEffect = stopPassiveEffect;
     }
     /**
      * Sets the state of the `MotionValue`.
@@ -2245,6 +2246,17 @@ class MotionValue {
         this.prev = prev;
         this.timeDelta = delta;
     }
+    /**
+     * Set the state of the `MotionValue`, stopping any active animations,
+     * effects, and resets velocity to `0`.
+     */
+    jump(v) {
+        this.updateAndNotify(v);
+        this.prev = v;
+        this.stop();
+        if (this.stopPassiveEffect)
+            this.stopPassiveEffect();
+    }
     /**
      * Returns the latest state of `MotionValue`
      *
@@ -2340,6 +2352,9 @@ class MotionValue {
     destroy() {
         this.clearListeners();
         this.stop();
+        if (this.stopPassiveEffect) {
+            this.stopPassiveEffect();
+        }
     }
 }
 function motionValue(init, options) {
@@ -5611,12 +5626,6 @@ const isPositionalKey = (key) => positionalKeys.has(key);
 const hasPositionalKey = (target) => {
     return Object.keys(target).some(isPositionalKey);
 };
-const setAndResetVelocity = (value, to) => {
-    // Looks odd but setting it twice doesn't render, it'll just
-    // set both prev and current to the latest value
-    value.set(to, false);
-    value.set(to);
-};
 const isNumOrPxType = (v) => v === number || v === px;
 var BoundingBoxDimension;
 (function (BoundingBoxDimension) {
@@ -5697,7 +5706,7 @@ const convertChangedValueTypes = (target, visualElement, changedKeys) => {
         // Restore styles to their **calculated computed style**, not their actual
         // originally set style. This allows us to animate between equivalent pixel units.
         const value = visualElement.getValue(key);
-        setAndResetVelocity(value, origin[key]);
+        value && value.jump(origin[key]);
         target[key] = positionalValues[key](targetBbox, elementComputedStyle);
     });
     return target;
@@ -5782,7 +5791,7 @@ const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, tr
                     transitionEnd[key] !== undefined
                         ? transitionEnd[key]
                         : target[key];
-                setAndResetVelocity(value, to);
+                value.jump(to);
             }
         }
     });
@@ -5871,7 +5880,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.0.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.4 may not work as expected.`);
+                warnOnce(nextValue.version === "8.1.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.1.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -9150,7 +9159,12 @@ function useSpring(source, config = {}) {
     const { isStatic } = React.useContext(MotionConfigContext);
     const activeSpringAnimation = React.useRef(null);
     const value = useMotionValue(isMotionValue(source) ? source.get() : source);
-    React.useMemo(() => {
+    const stopAnimation = () => {
+        if (activeSpringAnimation.current) {
+            activeSpringAnimation.current.stop();
+        }
+    };
+    React.useInsertionEffect(() => {
         return value.attach((v, set) => {
             /**
              * A more hollistic approach to this might be to use isStatic to fix VisualElement animations
@@ -9158,9 +9172,7 @@ function useSpring(source, config = {}) {
              */
             if (isStatic)
                 return set(v);
-            if (activeSpringAnimation.current) {
-                activeSpringAnimation.current.stop();
-            }
+            stopAnimation();
             activeSpringAnimation.current = animate$1({
                 keyframes: [value.get(), v],
                 velocity: value.getVelocity(),
@@ -9169,7 +9181,7 @@ function useSpring(source, config = {}) {
                 onUpdate: set,
             });
             return value.get();
-        });
+        }, stopAnimation);
     }, [JSON.stringify(config)]);
     useIsomorphicLayoutEffect(() => {
         if (isMotionValue(source)) {

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

@@ -20,12 +20,6 @@ const isPositionalKey = (key) => positionalKeys.has(key);
 const hasPositionalKey = (target) => {
     return Object.keys(target).some(isPositionalKey);
 };
-const setAndResetVelocity = (value, to) => {
-    // Looks odd but setting it twice doesn't render, it'll just
-    // set both prev and current to the latest value
-    value.set(to, false);
-    value.set(to);
-};
 const isNumOrPxType = (v) => v === number || v === px;
 var BoundingBoxDimension;
 (function (BoundingBoxDimension) {
@@ -106,7 +100,7 @@ const convertChangedValueTypes = (target, visualElement, changedKeys) => {
         // Restore styles to their **calculated computed style**, not their actual
         // originally set style. This allows us to animate between equivalent pixel units.
         const value = visualElement.getValue(key);
-        setAndResetVelocity(value, origin[key]);
+        value && value.jump(origin[key]);
         target[key] = positionalValues[key](targetBbox, elementComputedStyle);
     });
     return target;
@@ -191,7 +185,7 @@ const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, tr
                     transitionEnd[key] !== undefined
                         ? transitionEnd[key]
                         : target[key];
-                setAndResetVelocity(value, to);
+                value.jump(to);
             }
         }
     });

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 === "8.0.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.4 may not work as expected.`);
+                warnOnce(nextValue.version === "8.1.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.1.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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 = "8.0.4";
+        this.version = "8.1.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -178,8 +178,9 @@ class MotionValue {
      *
      * @internal
      */
-    attach(passiveEffect) {
+    attach(passiveEffect, stopPassiveEffect) {
         this.passiveEffect = passiveEffect;
+        this.stopPassiveEffect = stopPassiveEffect;
     }
     /**
      * Sets the state of the `MotionValue`.
@@ -209,6 +210,17 @@ class MotionValue {
         this.prev = prev;
         this.timeDelta = delta;
     }
+    /**
+     * Set the state of the `MotionValue`, stopping any active animations,
+     * effects, and resets velocity to `0`.
+     */
+    jump(v) {
+        this.updateAndNotify(v);
+        this.prev = v;
+        this.stop();
+        if (this.stopPassiveEffect)
+            this.stopPassiveEffect();
+    }
     /**
      * Returns the latest state of `MotionValue`
      *
@@ -304,6 +316,9 @@ class MotionValue {
     destroy() {
         this.clearListeners();
         this.stop();
+        if (this.stopPassiveEffect) {
+            this.stopPassiveEffect();
+        }
     }
 }
 function motionValue(init, options) {

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

@@ -1,4 +1,4 @@
-import { useContext, useRef, useMemo } from 'react';
+import { useContext, useRef, useInsertionEffect } from 'react';
 import { isMotionValue } from './utils/is-motion-value.mjs';
 import { useMotionValue } from './use-motion-value.mjs';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
@@ -28,7 +28,12 @@ function useSpring(source, config = {}) {
     const { isStatic } = useContext(MotionConfigContext);
     const activeSpringAnimation = useRef(null);
     const value = useMotionValue(isMotionValue(source) ? source.get() : source);
-    useMemo(() => {
+    const stopAnimation = () => {
+        if (activeSpringAnimation.current) {
+            activeSpringAnimation.current.stop();
+        }
+    };
+    useInsertionEffect(() => {
         return value.attach((v, set) => {
             /**
              * A more hollistic approach to this might be to use isStatic to fix VisualElement animations
@@ -36,9 +41,7 @@ function useSpring(source, config = {}) {
              */
             if (isStatic)
                 return set(v);
-            if (activeSpringAnimation.current) {
-                activeSpringAnimation.current.stop();
-            }
+            stopAnimation();
             activeSpringAnimation.current = animate({
                 keyframes: [value.get(), v],
                 velocity: value.getVelocity(),
@@ -47,7 +50,7 @@ function useSpring(source, config = {}) {
                 onUpdate: set,
             });
             return value.get();
-        });
+        }, stopAnimation);
     }, [JSON.stringify(config)]);
     useIsomorphicLayoutEffect(() => {
         if (isMotionValue(source)) {

package/dist/framer-motion.dev.js

@@ -2059,7 +2059,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 = "8.0.4";
+            this.version = "8.1.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -2212,8 +2212,9 @@
          *
          * @internal
          */
-        attach(passiveEffect) {
+        attach(passiveEffect, stopPassiveEffect) {
             this.passiveEffect = passiveEffect;
+            this.stopPassiveEffect = stopPassiveEffect;
         }
         /**
          * Sets the state of the `MotionValue`.
@@ -2243,6 +2244,17 @@
             this.prev = prev;
             this.timeDelta = delta;
         }
+        /**
+         * Set the state of the `MotionValue`, stopping any active animations,
+         * effects, and resets velocity to `0`.
+         */
+        jump(v) {
+            this.updateAndNotify(v);
+            this.prev = v;
+            this.stop();
+            if (this.stopPassiveEffect)
+                this.stopPassiveEffect();
+        }
         /**
          * Returns the latest state of `MotionValue`
          *
@@ -2338,6 +2350,9 @@
         destroy() {
             this.clearListeners();
             this.stop();
+            if (this.stopPassiveEffect) {
+                this.stopPassiveEffect();
+            }
         }
     }
     function motionValue(init, options) {
@@ -5624,12 +5639,6 @@
     const hasPositionalKey = (target) => {
         return Object.keys(target).some(isPositionalKey);
     };
-    const setAndResetVelocity = (value, to) => {
-        // Looks odd but setting it twice doesn't render, it'll just
-        // set both prev and current to the latest value
-        value.set(to, false);
-        value.set(to);
-    };
     const isNumOrPxType = (v) => v === number || v === px;
     var BoundingBoxDimension;
     (function (BoundingBoxDimension) {
@@ -5710,7 +5719,7 @@
             // Restore styles to their **calculated computed style**, not their actual
             // originally set style. This allows us to animate between equivalent pixel units.
             const value = visualElement.getValue(key);
-            setAndResetVelocity(value, origin[key]);
+            value && value.jump(origin[key]);
             target[key] = positionalValues[key](targetBbox, elementComputedStyle);
         });
         return target;
@@ -5795,7 +5804,7 @@
                         transitionEnd[key] !== undefined
                             ? transitionEnd[key]
                             : target[key];
-                    setAndResetVelocity(value, to);
+                    value.jump(to);
                 }
             }
         });
@@ -5884,7 +5893,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "8.0.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.4 may not work as expected.`);
+                    warnOnce(nextValue.version === "8.1.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.1.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -9163,7 +9172,12 @@
         const { isStatic } = React.useContext(MotionConfigContext);
         const activeSpringAnimation = React.useRef(null);
         const value = useMotionValue(isMotionValue(source) ? source.get() : source);
-        React.useMemo(() => {
+        const stopAnimation = () => {
+            if (activeSpringAnimation.current) {
+                activeSpringAnimation.current.stop();
+            }
+        };
+        React.useInsertionEffect(() => {
             return value.attach((v, set) => {
                 /**
                  * A more hollistic approach to this might be to use isStatic to fix VisualElement animations
@@ -9171,9 +9185,7 @@
                  */
                 if (isStatic)
                     return set(v);
-                if (activeSpringAnimation.current) {
-                    activeSpringAnimation.current.stop();
-                }
+                stopAnimation();
                 activeSpringAnimation.current = animate$1({
                     keyframes: [value.get(), v],
                     velocity: value.getVelocity(),
@@ -9182,7 +9194,7 @@
                     onUpdate: set,
                 });
                 return value.get();
-            });
+            }, stopAnimation);
         }, [JSON.stringify(config)]);
         useIsomorphicLayoutEffect(() => {
             if (isMotionValue(source)) {