framer-motion 8.5.2 → 8.5.3

package/dist/cjs/index.js

@@ -2105,7 +2105,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.5.2";
+        this.version = "8.5.3";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -5953,7 +5953,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.5.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.5.2 may not work as expected.`);
+                warnOnce(nextValue.version === "8.5.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.5.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -9829,9 +9829,10 @@ function handoffOptimizedAppearAnimation(id, name, value,
  */
 sync) {
     const storeId = appearStoreId(id, transformProps.has(name) ? "transform" : name);
-    const { animation, ready } = appearAnimationStore.get(storeId) || {};
-    if (!animation)
+    const appearAnimation = appearAnimationStore.get(storeId);
+    if (!appearAnimation)
         return 0;
+    const { animation, startTime } = appearAnimation;
     const cancelOptimisedAnimation = () => {
         appearAnimationStore.delete(storeId);
         /**
@@ -9842,7 +9843,7 @@ sync) {
         }
         catch (e) { }
     };
-    if (ready) {
+    if (startTime !== null) {
         const sampledTime = performance.now();
         /**
          * Resync handoff animation with optimised animation.
@@ -9868,7 +9869,13 @@ sync) {
          *      it synchronously would prevent subsequent transforms from handing off.
          */
         sync.render(cancelOptimisedAnimation);
-        return animation.currentTime || 0;
+        /**
+         * We use main thread timings vs those returned by Animation.currentTime as it
+         * can be the case, particularly in Firefox, that currentTime doesn't return
+         * an updated value for several frames, even as the animation plays smoothly via
+         * the GPU.
+         */
+        return sampledTime - startTime || 0;
     }
     else {
         cancelOptimisedAnimation();
@@ -9897,7 +9904,7 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
     { duration: 10000, ease: "linear" });
     appearAnimationStore.set(storeId, {
         animation: readyAnimation,
-        ready: false,
+        startTime: null,
     });
     const startAnimation = () => {
         readyAnimation.cancel();
@@ -9907,13 +9914,13 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
         }
         appearAnimationStore.set(storeId, {
             animation: appearAnimation,
-            ready: true,
+            startTime: performance.now(),
         });
         if (onReady)
             onReady(appearAnimation);
     };
     if (readyAnimation.ready) {
-        readyAnimation.ready.then(startAnimation);
+        readyAnimation.ready.then(startAnimation).catch(noop);
     }
     else {
         startAnimation();

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

@@ -12,9 +12,10 @@ function handoffOptimizedAppearAnimation(id, name, value,
  */
 sync) {
     const storeId = appearStoreId(id, transformProps.has(name) ? "transform" : name);
-    const { animation, ready } = appearAnimationStore.get(storeId) || {};
-    if (!animation)
+    const appearAnimation = appearAnimationStore.get(storeId);
+    if (!appearAnimation)
         return 0;
+    const { animation, startTime } = appearAnimation;
     const cancelOptimisedAnimation = () => {
         appearAnimationStore.delete(storeId);
         /**
@@ -25,7 +26,7 @@ sync) {
         }
         catch (e) { }
     };
-    if (ready) {
+    if (startTime !== null) {
         const sampledTime = performance.now();
         /**
          * Resync handoff animation with optimised animation.
@@ -51,7 +52,13 @@ sync) {
          *      it synchronously would prevent subsequent transforms from handing off.
          */
         sync.render(cancelOptimisedAnimation);
-        return animation.currentTime || 0;
+        /**
+         * We use main thread timings vs those returned by Animation.currentTime as it
+         * can be the case, particularly in Firefox, that currentTime doesn't return
+         * an updated value for several frames, even as the animation plays smoothly via
+         * the GPU.
+         */
+        return sampledTime - startTime || 0;
     }
     else {
         cancelOptimisedAnimation();

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

@@ -3,6 +3,7 @@ import { animateStyle } from '../waapi/index.mjs';
 import { optimizedAppearDataId } from './data-id.mjs';
 import { handoffOptimizedAppearAnimation } from './handoff.mjs';
 import { appearAnimationStore } from './store.mjs';
+import { noop } from '../../utils/noop.mjs';
 
 function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
     const id = element.dataset[optimizedAppearDataId];
@@ -25,7 +26,7 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
     { duration: 10000, ease: "linear" });
     appearAnimationStore.set(storeId, {
         animation: readyAnimation,
-        ready: false,
+        startTime: null,
     });
     const startAnimation = () => {
         readyAnimation.cancel();
@@ -35,13 +36,13 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
         }
         appearAnimationStore.set(storeId, {
             animation: appearAnimation,
-            ready: true,
+            startTime: performance.now(),
         });
         if (onReady)
             onReady(appearAnimation);
     };
     if (readyAnimation.ready) {
-        readyAnimation.ready.then(startAnimation);
+        readyAnimation.ready.then(startAnimation).catch(noop);
     }
     else {
         startAnimation();

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.5.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.5.2 may not work as expected.`);
+                warnOnce(nextValue.version === "8.5.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.5.3 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.5.2";
+        this.version = "8.5.3";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -2103,7 +2103,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.5.2";
+            this.version = "8.5.3";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5966,7 +5966,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "8.5.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.5.2 may not work as expected.`);
+                    warnOnce(nextValue.version === "8.5.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.5.3 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -10448,9 +10448,10 @@
      */
     sync) {
         const storeId = appearStoreId(id, transformProps.has(name) ? "transform" : name);
-        const { animation, ready } = appearAnimationStore.get(storeId) || {};
-        if (!animation)
+        const appearAnimation = appearAnimationStore.get(storeId);
+        if (!appearAnimation)
             return 0;
+        const { animation, startTime } = appearAnimation;
         const cancelOptimisedAnimation = () => {
             appearAnimationStore.delete(storeId);
             /**
@@ -10461,7 +10462,7 @@
             }
             catch (e) { }
         };
-        if (ready) {
+        if (startTime !== null) {
             const sampledTime = performance.now();
             /**
              * Resync handoff animation with optimised animation.
@@ -10487,7 +10488,13 @@
              *      it synchronously would prevent subsequent transforms from handing off.
              */
             sync.render(cancelOptimisedAnimation);
-            return animation.currentTime || 0;
+            /**
+             * We use main thread timings vs those returned by Animation.currentTime as it
+             * can be the case, particularly in Firefox, that currentTime doesn't return
+             * an updated value for several frames, even as the animation plays smoothly via
+             * the GPU.
+             */
+            return sampledTime - startTime || 0;
         }
         else {
             cancelOptimisedAnimation();
@@ -10516,7 +10523,7 @@
         { duration: 10000, ease: "linear" });
         appearAnimationStore.set(storeId, {
             animation: readyAnimation,
-            ready: false,
+            startTime: null,
         });
         const startAnimation = () => {
             readyAnimation.cancel();
@@ -10526,13 +10533,13 @@
             }
             appearAnimationStore.set(storeId, {
                 animation: appearAnimation,
-                ready: true,
+                startTime: performance.now(),
             });
             if (onReady)
                 onReady(appearAnimation);
         };
         if (readyAnimation.ready) {
-            readyAnimation.ready.then(startAnimation);
+            readyAnimation.ready.then(startAnimation).catch(noop);
         }
         else {
             startAnimation();