framer-motion 8.4.4 → 8.4.6

package/dist/cjs/index.js

@@ -81,11 +81,19 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
         visualElement && visualElement.render();
     });
     /**
-     * If we have optimised appear animations to handoff from, trigger animateChanges
-     * from a synchronous useLayoutEffect to ensure there's no flash of incorrectly
-     * styled component in the event of a hydration error.
+     * Ideally this function would always run in a useEffect.
+     *
+     * However, if we have optimised appear animations to handoff from,
+     * it needs to happen synchronously to ensure there's no flash of
+     * incorrect styles in the event of a hydration error.
+     *
+     * So if we detect a situtation where optimised appear animations
+     * are running, we use useLayoutEffect to trigger animations.
      */
-    useIsomorphicLayoutEffect(() => {
+    const useAnimateChangesEffect = window.MotionAppearAnimations
+        ? useIsomorphicLayoutEffect
+        : React.useEffect;
+    useAnimateChangesEffect(() => {
         if (visualElement && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }
@@ -1465,14 +1473,14 @@ function isDragActive() {
     return false;
 }
 
-function createHoverEvent(visualElement, isActive, callback) {
+function createHoverEvent(visualElement, isActive, applyVariants, callback) {
     return (event, info) => {
         if (event.type === "touch" || isDragActive())
             return;
         /**
          * Ensure we trigger animations before firing event callback
          */
-        if (visualElement.animationState) {
+        if (applyVariants && visualElement.animationState) {
             visualElement.animationState.setActive(exports.AnimationType.Hover, isActive);
         }
         callback && callback(event, info);
@@ -1481,12 +1489,12 @@ function createHoverEvent(visualElement, isActive, callback) {
 function useHoverGesture({ onHoverStart, onHoverEnd, whileHover, visualElement, }) {
     usePointerEvent(visualElement, "pointerenter", React.useMemo(() => {
         return onHoverStart || whileHover
-            ? createHoverEvent(visualElement, true, onHoverStart)
+            ? createHoverEvent(visualElement, true, Boolean(whileHover), onHoverStart)
             : undefined;
     }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverStart });
     usePointerEvent(visualElement, "pointerleave", React.useMemo(() => {
         return onHoverEnd || whileHover
-            ? createHoverEvent(visualElement, false, onHoverEnd)
+            ? createHoverEvent(visualElement, false, Boolean(whileHover), onHoverEnd)
             : undefined;
     }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverEnd });
 }
@@ -1548,8 +1556,10 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
     function checkPointerEnd() {
         removePointerEndListener();
         isPressing.current = false;
-        visualElement.animationState &&
+        const latestProps = visualElement.getProps();
+        if (latestProps.whileTap && visualElement.animationState) {
             visualElement.animationState.setActive(exports.AnimationType.Tap, false);
+        }
         return !isDragActive();
     }
     function onPointerUp(event, info) {
@@ -1571,18 +1581,20 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
         (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
     }
     const startPress = React.useCallback((event, info) => {
-        var _a, _b;
+        var _a;
         removePointerEndListener();
         if (isPressing.current)
             return;
         isPressing.current = true;
         cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
+        const latestProps = visualElement.getProps();
         /**
          * Ensure we trigger animations before firing event callback
          */
-        visualElement.animationState &&
+        if (latestProps.whileTap && visualElement.animationState) {
             visualElement.animationState.setActive(exports.AnimationType.Tap, true);
-        (_b = (_a = visualElement.getProps()).onTapStart) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
+        }
+        (_a = latestProps.onTapStart) === null || _a === void 0 ? void 0 : _a.call(latestProps, event, info);
     }, [Boolean(onTapStart), visualElement]);
     usePointerEvent(visualElement, "pointerdown", hasPressListeners ? startPress : undefined, eventOptions);
     useUnmountEffect(removePointerEndListener);
@@ -2081,7 +2093,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.4.4";
+        this.version = "8.4.6";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2320,11 +2332,11 @@ class MotionValue {
      *
      * @internal
      */
-    start(animation) {
+    start(startAnimation) {
         this.stop();
         return new Promise((resolve) => {
             this.hasAnimated = true;
-            this.stopAnimation = animation(resolve);
+            this.animation = startAnimation(resolve) || null;
             if (this.events.animationStart) {
                 this.events.animationStart.notify();
             }
@@ -2341,8 +2353,8 @@ class MotionValue {
      * @public
      */
     stop() {
-        if (this.stopAnimation) {
-            this.stopAnimation();
+        if (this.animation) {
+            this.animation.stop();
             if (this.events.animationCancel) {
                 this.events.animationCancel.notify();
             }
@@ -2355,10 +2367,10 @@ class MotionValue {
      * @public
      */
     isAnimating() {
-        return !!this.stopAnimation;
+        return !!this.animation;
     }
     clearAnimation() {
-        this.stopAnimation = null;
+        this.animation = null;
     }
     /**
      * Destroy and clean up subscribers to this `MotionValue`.
@@ -2777,11 +2789,28 @@ function isWillChangeMotionValue(value) {
 
 const appearStoreId = (id, value) => `${id}: ${value}`;
 
-function handoffOptimizedAppearAnimation(id, name) {
+function handoffOptimizedAppearAnimation(id, name, value) {
     const { MotionAppearAnimations } = window;
     const animationId = appearStoreId(id, transformProps.has(name) ? "transform" : name);
     const animation = MotionAppearAnimations && MotionAppearAnimations.get(animationId);
     if (animation) {
+        const sampledTime = performance.now();
+        /**
+         * Resync handoff animation with optimised animation.
+         *
+         * This step would be unnecessary if we triggered animateChanges() in useEffect,
+         * but due to potential hydration errors we currently fire them in useLayoutEffect.
+         *
+         * By the time we're safely ready to cancel the optimised WAAPI animation,
+         * the main thread might have been blocked and desynced the two animations.
+         *
+         * Here, we resync the two animations before the optimised WAAPI animation is cancelled.
+         */
+        sync.update(() => {
+            if (value.animation) {
+                value.animation.currentTime = performance.now() - sampledTime;
+            }
+        });
         /**
          * We allow the animation to persist until the next frame:
          *   1. So it continues to play until Framer Motion is ready to render
@@ -2790,12 +2819,12 @@ function handoffOptimizedAppearAnimation(id, name) {
          *      it synchronously would prevent subsequent transforms from handing off.
          */
         sync.render(() => {
+            MotionAppearAnimations.delete(animationId);
             /**
              * Animation.cancel() throws so it needs to be wrapped in a try/catch
              */
             try {
                 animation.cancel();
-                MotionAppearAnimations.delete(animationId);
             }
             catch (e) { }
         });
@@ -3581,6 +3610,25 @@ function animate$1({ duration, driver = framesync, elapsed = 0, repeat: repeatMa
             onStop && onStop();
             driverControls && driverControls.stop();
         },
+        /**
+         * Set the current time of the animation. This is purposefully
+         * mirroring the WAAPI animation API to make them interchanagable.
+         * Going forward this file should be ported more towards
+         * https://github.com/motiondivision/motionone/blob/main/packages/animation/src/Animation.ts
+         * Which behaviourally adheres to WAAPI as far as possible.
+         *
+         * WARNING: This is not safe to use for most animations. We currently
+         * only use it for handoff from WAAPI within Framer.
+         *
+         * This animation function consumes time every frame rather than being sampled for time.
+         * So the sample() method performs some headless frames to ensure
+         * repeats are handled correctly. Ideally in the future we will replace
+         * that method with this, once repeat calculations are pure.
+         */
+        set currentTime(t) {
+            elapsed = initialElapsed;
+            update(t);
+        },
         /**
          * animate() can't yet be sampled for time, instead it
          * consumes time. So to sample it we have to run a low
@@ -3737,21 +3785,29 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     /**
      * Animation interrupt callback.
      */
-    return () => {
-        /**
-         * WAAPI doesn't natively have any interruption capabilities.
-         *
-         * Rather than read commited styles back out of the DOM, we can
-         * create a renderless JS animation and sample it twice to calculate
-         * its current value, "previous" value, and therefore allow
-         * Motion to calculate velocity for any subsequent animation.
-         */
-        const { currentTime } = animation;
-        if (currentTime) {
-            const sampleAnimation = animate$1({ ...options, autoplay: false });
-            value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
-        }
-        sync.update(() => animation.cancel());
+    return {
+        get currentTime() {
+            return animation.currentTime || 0;
+        },
+        set currentTime(t) {
+            animation.currentTime = t;
+        },
+        stop: () => {
+            /**
+             * WAAPI doesn't natively have any interruption capabilities.
+             *
+             * Rather than read commited styles back out of the DOM, we can
+             * create a renderless JS animation and sample it twice to calculate
+             * its current value, "previous" value, and therefore allow
+             * Motion to calculate velocity for any subsequent animation.
+             */
+            const { currentTime } = animation;
+            if (currentTime) {
+                const sampleAnimation = animate$1({ ...options, autoplay: false });
+                value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
+            }
+            sync.update(() => animation.cancel());
+        },
     };
 }
 
@@ -3775,9 +3831,8 @@ function createInstantAnimation({ keyframes, elapsed, onUpdate, onComplete, }) {
     const setValue = () => {
         onUpdate && onUpdate(keyframes[keyframes.length - 1]);
         onComplete && onComplete();
-        return () => { };
     };
-    return elapsed ? delay(setValue, -elapsed) : setValue();
+    return elapsed ? { stop: delay(setValue, -elapsed) } : setValue();
 }
 
 function inertia({ keyframes, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
@@ -4054,8 +4109,7 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
              * If this is an inertia animation, we currently don't support pre-generating
              * keyframes for this as such it must always run on the main thread.
              */
-            const animation = inertia(options);
-            return () => animation.stop();
+            return inertia(options);
         }
         /**
          * If there's no transition defined for this value, we can generate
@@ -4093,8 +4147,7 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
         /**
          * If we didn't create an accelerated animation, create a JS animation
          */
-        const animation = animate$1(options);
-        return () => animation.stop();
+        return animate$1(options);
     };
 };
 
@@ -4183,7 +4236,7 @@ function animateTarget(visualElement, definition, { delay = 0, transitionOverrid
         if (!value.hasAnimated) {
             const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
             if (appearId) {
-                valueTransition.elapsed = handoffOptimizedAppearAnimation(appearId, key);
+                valueTransition.elapsed = handoffOptimizedAppearAnimation(appearId, key, value);
             }
         }
         let animation = value.start(createMotionValueAnimation(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
@@ -5933,7 +5986,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.4.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.4 may not work as expected.`);
+                warnOnce(nextValue.version === "8.4.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.6 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5959,7 +6012,7 @@ function updateMotionValuesFromProps(element, next, prev) {
             }
             else {
                 const latestValue = element.getStaticValue(key);
-                element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue));
+                element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));
             }
         }
     }

package/dist/es/animation/create-instant-animation.mjs

@@ -4,9 +4,8 @@ function createInstantAnimation({ keyframes, elapsed, onUpdate, onComplete, }) {
     const setValue = () => {
         onUpdate && onUpdate(keyframes[keyframes.length - 1]);
         onComplete && onComplete();
-        return () => { };
     };
-    return elapsed ? delay(setValue, -elapsed) : setValue();
+    return elapsed ? { stop: delay(setValue, -elapsed) } : setValue();
 }
 
 export { createInstantAnimation };

package/dist/es/animation/index.mjs

@@ -65,8 +65,7 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
              * If this is an inertia animation, we currently don't support pre-generating
              * keyframes for this as such it must always run on the main thread.
              */
-            const animation = inertia(options);
-            return () => animation.stop();
+            return inertia(options);
         }
         /**
          * If there's no transition defined for this value, we can generate
@@ -104,8 +103,7 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
         /**
          * If we didn't create an accelerated animation, create a JS animation
          */
-        const animation = animate(options);
-        return () => animation.stop();
+        return animate(options);
     };
 };
 

package/dist/es/animation/legacy-popmotion/index.mjs

@@ -105,6 +105,25 @@ function animate({ duration, driver = framesync, elapsed = 0, repeat: repeatMax
             onStop && onStop();
             driverControls && driverControls.stop();
         },
+        /**
+         * Set the current time of the animation. This is purposefully
+         * mirroring the WAAPI animation API to make them interchanagable.
+         * Going forward this file should be ported more towards
+         * https://github.com/motiondivision/motionone/blob/main/packages/animation/src/Animation.ts
+         * Which behaviourally adheres to WAAPI as far as possible.
+         *
+         * WARNING: This is not safe to use for most animations. We currently
+         * only use it for handoff from WAAPI within Framer.
+         *
+         * This animation function consumes time every frame rather than being sampled for time.
+         * So the sample() method performs some headless frames to ensure
+         * repeats are handled correctly. Ideally in the future we will replace
+         * that method with this, once repeat calculations are pure.
+         */
+        set currentTime(t) {
+            elapsed = initialElapsed;
+            update(t);
+        },
         /**
          * animate() can't yet be sampled for time, instead it
          * consumes time. So to sample it we have to run a low

package/dist/es/animation/optimized-appear/handoff.mjs

@@ -2,11 +2,28 @@ import { sync } from '../../frameloop/index.mjs';
 import { transformProps } from '../../render/html/utils/transform.mjs';
 import { appearStoreId } from './store-id.mjs';
 
-function handoffOptimizedAppearAnimation(id, name) {
+function handoffOptimizedAppearAnimation(id, name, value) {
     const { MotionAppearAnimations } = window;
     const animationId = appearStoreId(id, transformProps.has(name) ? "transform" : name);
     const animation = MotionAppearAnimations && MotionAppearAnimations.get(animationId);
     if (animation) {
+        const sampledTime = performance.now();
+        /**
+         * Resync handoff animation with optimised animation.
+         *
+         * This step would be unnecessary if we triggered animateChanges() in useEffect,
+         * but due to potential hydration errors we currently fire them in useLayoutEffect.
+         *
+         * By the time we're safely ready to cancel the optimised WAAPI animation,
+         * the main thread might have been blocked and desynced the two animations.
+         *
+         * Here, we resync the two animations before the optimised WAAPI animation is cancelled.
+         */
+        sync.update(() => {
+            if (value.animation) {
+                value.animation.currentTime = performance.now() - sampledTime;
+            }
+        });
         /**
          * We allow the animation to persist until the next frame:
          *   1. So it continues to play until Framer Motion is ready to render
@@ -15,12 +32,12 @@ function handoffOptimizedAppearAnimation(id, name) {
          *      it synchronously would prevent subsequent transforms from handing off.
          */
         sync.render(() => {
+            MotionAppearAnimations.delete(animationId);
             /**
              * Animation.cancel() throws so it needs to be wrapped in a try/catch
              */
             try {
                 animation.cancel();
-                MotionAppearAnimations.delete(animationId);
             }
             catch (e) { }
         });

package/dist/es/animation/waapi/create-accelerated-animation.mjs

@@ -80,21 +80,29 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     /**
      * Animation interrupt callback.
      */
-    return () => {
-        /**
-         * WAAPI doesn't natively have any interruption capabilities.
-         *
-         * Rather than read commited styles back out of the DOM, we can
-         * create a renderless JS animation and sample it twice to calculate
-         * its current value, "previous" value, and therefore allow
-         * Motion to calculate velocity for any subsequent animation.
-         */
-        const { currentTime } = animation;
-        if (currentTime) {
-            const sampleAnimation = animate({ ...options, autoplay: false });
-            value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
-        }
-        sync.update(() => animation.cancel());
+    return {
+        get currentTime() {
+            return animation.currentTime || 0;
+        },
+        set currentTime(t) {
+            animation.currentTime = t;
+        },
+        stop: () => {
+            /**
+             * WAAPI doesn't natively have any interruption capabilities.
+             *
+             * Rather than read commited styles back out of the DOM, we can
+             * create a renderless JS animation and sample it twice to calculate
+             * its current value, "previous" value, and therefore allow
+             * Motion to calculate velocity for any subsequent animation.
+             */
+            const { currentTime } = animation;
+            if (currentTime) {
+                const sampleAnimation = animate({ ...options, autoplay: false });
+                value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
+            }
+            sync.update(() => animation.cancel());
+        },
     };
 }
 

package/dist/es/gestures/use-hover-gesture.mjs

@@ -3,14 +3,14 @@ import { usePointerEvent } from '../events/use-pointer-event.mjs';
 import { isDragActive } from './drag/utils/lock.mjs';
 import { useMemo } from 'react';
 
-function createHoverEvent(visualElement, isActive, callback) {
+function createHoverEvent(visualElement, isActive, applyVariants, callback) {
     return (event, info) => {
         if (event.type === "touch" || isDragActive())
             return;
         /**
          * Ensure we trigger animations before firing event callback
          */
-        if (visualElement.animationState) {
+        if (applyVariants && visualElement.animationState) {
             visualElement.animationState.setActive(AnimationType.Hover, isActive);
         }
         callback && callback(event, info);
@@ -19,12 +19,12 @@ function createHoverEvent(visualElement, isActive, callback) {
 function useHoverGesture({ onHoverStart, onHoverEnd, whileHover, visualElement, }) {
     usePointerEvent(visualElement, "pointerenter", useMemo(() => {
         return onHoverStart || whileHover
-            ? createHoverEvent(visualElement, true, onHoverStart)
+            ? createHoverEvent(visualElement, true, Boolean(whileHover), onHoverStart)
             : undefined;
     }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverStart });
     usePointerEvent(visualElement, "pointerleave", useMemo(() => {
         return onHoverEnd || whileHover
-            ? createHoverEvent(visualElement, false, onHoverEnd)
+            ? createHoverEvent(visualElement, false, Boolean(whileHover), onHoverEnd)
             : undefined;
     }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverEnd });
 }

package/dist/es/gestures/use-tap-gesture.mjs

@@ -30,8 +30,10 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
     function checkPointerEnd() {
         removePointerEndListener();
         isPressing.current = false;
-        visualElement.animationState &&
+        const latestProps = visualElement.getProps();
+        if (latestProps.whileTap && visualElement.animationState) {
             visualElement.animationState.setActive(AnimationType.Tap, false);
+        }
         return !isDragActive();
     }
     function onPointerUp(event, info) {
@@ -53,18 +55,20 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
         (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
     }
     const startPress = useCallback((event, info) => {
-        var _a, _b;
+        var _a;
         removePointerEndListener();
         if (isPressing.current)
             return;
         isPressing.current = true;
         cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
+        const latestProps = visualElement.getProps();
         /**
          * Ensure we trigger animations before firing event callback
          */
-        visualElement.animationState &&
+        if (latestProps.whileTap && visualElement.animationState) {
             visualElement.animationState.setActive(AnimationType.Tap, true);
-        (_b = (_a = visualElement.getProps()).onTapStart) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
+        }
+        (_a = latestProps.onTapStart) === null || _a === void 0 ? void 0 : _a.call(latestProps, event, info);
     }, [Boolean(onTapStart), visualElement]);
     usePointerEvent(visualElement, "pointerdown", hasPressListeners ? startPress : undefined, eventOptions);
     useUnmountEffect(removePointerEndListener);

package/dist/es/motion/utils/use-visual-element.mjs

@@ -1,4 +1,4 @@
-import { useContext, useRef } from 'react';
+import { useContext, useRef, useEffect } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useVisualElementContext } from '../../context/MotionContext/index.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
@@ -32,11 +32,19 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
         visualElement && visualElement.render();
     });
     /**
-     * If we have optimised appear animations to handoff from, trigger animateChanges
-     * from a synchronous useLayoutEffect to ensure there's no flash of incorrectly
-     * styled component in the event of a hydration error.
+     * Ideally this function would always run in a useEffect.
+     *
+     * However, if we have optimised appear animations to handoff from,
+     * it needs to happen synchronously to ensure there's no flash of
+     * incorrect styles in the event of a hydration error.
+     *
+     * So if we detect a situtation where optimised appear animations
+     * are running, we use useLayoutEffect to trigger animations.
      */
-    useIsomorphicLayoutEffect(() => {
+    const useAnimateChangesEffect = window.MotionAppearAnimations
+        ? useIsomorphicLayoutEffect
+        : useEffect;
+    useAnimateChangesEffect(() => {
         if (visualElement && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }

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

@@ -91,7 +91,7 @@ function animateTarget(visualElement, definition, { delay = 0, transitionOverrid
         if (!value.hasAnimated) {
             const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
             if (appearId) {
-                valueTransition.elapsed = handoffOptimizedAppearAnimation(appearId, key);
+                valueTransition.elapsed = handoffOptimizedAppearAnimation(appearId, key, value);
             }
         }
         let animation = value.start(createMotionValueAnimation(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)

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.4.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.4 may not work as expected.`);
+                warnOnce(nextValue.version === "8.4.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.6 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -48,7 +48,7 @@ function updateMotionValuesFromProps(element, next, prev) {
             }
             else {
                 const latestValue = element.getStaticValue(key);
-                element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue));
+                element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));
             }
         }
     }

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.4.4";
+        this.version = "8.4.6";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -264,11 +264,11 @@ class MotionValue {
      *
      * @internal
      */
-    start(animation) {
+    start(startAnimation) {
         this.stop();
         return new Promise((resolve) => {
             this.hasAnimated = true;
-            this.stopAnimation = animation(resolve);
+            this.animation = startAnimation(resolve) || null;
             if (this.events.animationStart) {
                 this.events.animationStart.notify();
             }
@@ -285,8 +285,8 @@ class MotionValue {
      * @public
      */
     stop() {
-        if (this.stopAnimation) {
-            this.stopAnimation();
+        if (this.animation) {
+            this.animation.stop();
             if (this.events.animationCancel) {
                 this.events.animationCancel.notify();
             }
@@ -299,10 +299,10 @@ class MotionValue {
      * @public
      */
     isAnimating() {
-        return !!this.stopAnimation;
+        return !!this.animation;
     }
     clearAnimation() {
-        this.stopAnimation = null;
+        this.animation = null;
     }
     /**
      * Destroy and clean up subscribers to this `MotionValue`.