framer-motion 8.4.3 → 8.4.4-alpha.0

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();
         }
@@ -2072,7 +2080,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.2";
+        this.version = "8.4.4-alpha.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2311,11 +2319,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();
             }
@@ -2332,8 +2340,8 @@ class MotionValue {
      * @public
      */
     stop() {
-        if (this.stopAnimation) {
-            this.stopAnimation();
+        if (this.animation) {
+            this.animation.stop();
             if (this.events.animationCancel) {
                 this.events.animationCancel.notify();
             }
@@ -2346,10 +2354,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`.
@@ -2768,11 +2776,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
@@ -2781,12 +2806,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) { }
         });
@@ -3572,6 +3597,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
@@ -3728,21 +3772,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());
+        },
     };
 }
 
@@ -3766,9 +3818,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, }) {
@@ -4045,8 +4096,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
@@ -4084,8 +4134,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);
     };
 };
 
@@ -4174,7 +4223,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)
@@ -5924,7 +5973,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.4.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.2 may not work as expected.`);
+                warnOnce(nextValue.version === "8.4.4-alpha.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.4-alpha.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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/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.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.2 may not work as expected.`);
+                warnOnce(nextValue.version === "8.4.4-alpha.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.4-alpha.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.4.2";
+        this.version = "8.4.4-alpha.0";
         /**
          * 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`.