framer-motion 7.5.4 → 7.6.0

package/dist/cjs/index.js

@@ -1958,12 +1958,25 @@ const instantAnimationState = {
     current: false,
 };
 
+function delay(callback, timeout) {
+    const start = performance.now();
+    const checkElapsed = ({ timestamp }) => {
+        const elapsed = timestamp - start;
+        if (elapsed >= timeout) {
+            sync.cancelSync.read(checkElapsed);
+            callback(elapsed - timeout);
+        }
+    };
+    sync__default["default"].read(checkElapsed, true);
+    return () => sync.cancelSync.read(checkElapsed);
+}
+
 /**
  * Decide whether a transition is defined on a given Transition.
  * This filters out orchestration options and returns true
  * if any options are left.
  */
-function isTransitionDefined({ when, delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
+function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
     return !!Object.keys(transition).length;
 }
 let legacyRepeatWarning = false;
@@ -2138,19 +2151,19 @@ function startAnimation(key, value, target, transition = {}) {
         transition = { type: false };
     }
     return value.start((onComplete) => {
-        let delayTimer;
         let controls;
         const animation = getAnimation(key, value, target, transition, onComplete);
-        const delay = getDelayFromTransition(transition, key);
+        const delayBy = getDelayFromTransition(transition, key);
         const start = () => (controls = animation());
-        if (delay) {
-            delayTimer = window.setTimeout(start, secondsToMilliseconds(delay));
+        let cancelDelay;
+        if (delayBy) {
+            cancelDelay = delay(start, secondsToMilliseconds(delayBy));
         }
         else {
             start();
         }
         return () => {
-            clearTimeout(delayTimer);
+            cancelDelay && cancelDelay();
             controls && controls.stop();
         };
     });
@@ -2245,7 +2258,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.5.4";
+        this.version = "7.6.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -4223,7 +4236,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.5.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.4 may not work as expected.`);
+                warnOnce(nextValue.version === "7.6.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5928,12 +5941,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.isLayoutDirty = true;
             }
             if (attachResizeListener) {
-                let unblockTimeout;
+                let cancelDelay;
                 const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);
                 attachResizeListener(instance, () => {
                     this.root.updateBlockedByResize = true;
-                    clearTimeout(unblockTimeout);
-                    unblockTimeout = window.setTimeout(resizeUnblockUpdate, 250);
+                    cancelDelay && cancelDelay();
+                    cancelDelay = delay(resizeUnblockUpdate, 250);
                     if (globalProjectionState.hasAnimatedSinceResize) {
                         globalProjectionState.hasAnimatedSinceResize = false;
                         this.nodes.forEach(finishAnimation);
@@ -8434,6 +8447,7 @@ exports.checkTargetForNewValues = checkTargetForNewValues;
 exports.createBox = createBox;
 exports.createDomMotionComponent = createDomMotionComponent;
 exports.createMotionComponent = createMotionComponent;
+exports.delay = delay;
 exports.domAnimation = domAnimation;
 exports.domMax = domMax;
 exports.filterProps = filterProps;

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

@@ -7,13 +7,14 @@ import { warning } from 'hey-listen';
 import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.mjs';
 import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
 import { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';
+import { delay } from '../../utils/delay.mjs';
 
 /**
  * Decide whether a transition is defined on a given Transition.
  * This filters out orchestration options and returns true
  * if any options are left.
  */
-function isTransitionDefined({ when, delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
+function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
     return !!Object.keys(transition).length;
 }
 let legacyRepeatWarning = false;
@@ -188,19 +189,19 @@ function startAnimation(key, value, target, transition = {}) {
         transition = { type: false };
     }
     return value.start((onComplete) => {
-        let delayTimer;
         let controls;
         const animation = getAnimation(key, value, target, transition, onComplete);
-        const delay = getDelayFromTransition(transition, key);
+        const delayBy = getDelayFromTransition(transition, key);
         const start = () => (controls = animation());
-        if (delay) {
-            delayTimer = window.setTimeout(start, secondsToMilliseconds(delay));
+        let cancelDelay;
+        if (delayBy) {
+            cancelDelay = delay(start, secondsToMilliseconds(delayBy));
         }
         else {
             start();
         }
         return () => {
-            clearTimeout(delayTimer);
+            cancelDelay && cancelDelay();
             controls && controls.stop();
         };
     });

package/dist/es/index.mjs

@@ -42,6 +42,7 @@ export { addScaleCorrector } from './projection/styles/scale-correction.mjs';
 export { useInstantTransition } from './utils/use-instant-transition.mjs';
 export { useInstantLayoutTransition } from './projection/use-instant-layout-transition.mjs';
 export { useResetProjection } from './projection/use-reset-projection.mjs';
+export { delay } from './utils/delay.mjs';
 export { MotionContext, useVisualElementContext } from './context/MotionContext/index.mjs';
 export { MotionConfigContext } from './context/MotionConfigContext.mjs';
 export { PresenceContext } from './context/PresenceContext.mjs';

package/dist/es/projection/node/create-projection-node.mjs

@@ -18,6 +18,7 @@ import { hasTransform, hasScale, has2DTranslate } from '../utils/has-transform.m
 import { FlatTree } from '../../render/utils/flat-tree.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 import { globalProjectionState } from './state.mjs';
+import { delay } from '../../utils/delay.mjs';
 
 const transformAxes = ["", "X", "Y", "Z"];
 /**
@@ -160,12 +161,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.isLayoutDirty = true;
             }
             if (attachResizeListener) {
-                let unblockTimeout;
+                let cancelDelay;
                 const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);
                 attachResizeListener(instance, () => {
                     this.root.updateBlockedByResize = true;
-                    clearTimeout(unblockTimeout);
-                    unblockTimeout = window.setTimeout(resizeUnblockUpdate, 250);
+                    cancelDelay && cancelDelay();
+                    cancelDelay = delay(resizeUnblockUpdate, 250);
                     if (globalProjectionState.hasAnimatedSinceResize) {
                         globalProjectionState.hasAnimatedSinceResize = false;
                         this.nodes.forEach(finishAnimation);

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

package/dist/es/utils/delay.mjs

@@ -0,0 +1,16 @@
+import sync, { cancelSync } from 'framesync';
+
+function delay(callback, timeout) {
+    const start = performance.now();
+    const checkElapsed = ({ timestamp }) => {
+        const elapsed = timestamp - start;
+        if (elapsed >= timeout) {
+            cancelSync.read(checkElapsed);
+            callback(elapsed - timeout);
+        }
+    };
+    sync.read(checkElapsed, true);
+    return () => cancelSync.read(checkElapsed);
+}
+
+export { delay };

package/dist/es/value/index.mjs

@@ -24,7 +24,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.5.4";
+        this.version = "7.6.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -3126,12 +3126,25 @@
         current: false,
     };
 
+    function delay(callback, timeout) {
+        const start = performance.now();
+        const checkElapsed = ({ timestamp }) => {
+            const elapsed = timestamp - start;
+            if (elapsed >= timeout) {
+                cancelSync.read(checkElapsed);
+                callback(elapsed - timeout);
+            }
+        };
+        sync.read(checkElapsed, true);
+        return () => cancelSync.read(checkElapsed);
+    }
+
     /**
      * Decide whether a transition is defined on a given Transition.
      * This filters out orchestration options and returns true
      * if any options are left.
      */
-    function isTransitionDefined({ when, delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
+    function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
         return !!Object.keys(transition).length;
     }
     let legacyRepeatWarning = false;
@@ -3306,19 +3319,19 @@
             transition = { type: false };
         }
         return value.start((onComplete) => {
-            let delayTimer;
             let controls;
             const animation = getAnimation(key, value, target, transition, onComplete);
-            const delay = getDelayFromTransition(transition, key);
+            const delayBy = getDelayFromTransition(transition, key);
             const start = () => (controls = animation());
-            if (delay) {
-                delayTimer = window.setTimeout(start, secondsToMilliseconds(delay));
+            let cancelDelay;
+            if (delayBy) {
+                cancelDelay = delay(start, secondsToMilliseconds(delayBy));
             }
             else {
                 start();
             }
             return () => {
-                clearTimeout(delayTimer);
+                cancelDelay && cancelDelay();
                 controls && controls.stop();
             };
         });
@@ -3413,7 +3426,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 = "7.5.4";
+            this.version = "7.6.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5391,7 +5404,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.5.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.4 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.6.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -7096,12 +7109,12 @@
                     this.isLayoutDirty = true;
                 }
                 if (attachResizeListener) {
-                    let unblockTimeout;
+                    let cancelDelay;
                     const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);
                     attachResizeListener(instance, () => {
                         this.root.updateBlockedByResize = true;
-                        clearTimeout(unblockTimeout);
-                        unblockTimeout = window.setTimeout(resizeUnblockUpdate, 250);
+                        cancelDelay && cancelDelay();
+                        cancelDelay = delay(resizeUnblockUpdate, 250);
                         if (globalProjectionState.hasAnimatedSinceResize) {
                             globalProjectionState.hasAnimatedSinceResize = false;
                             this.nodes.forEach(finishAnimation);
@@ -10183,6 +10196,7 @@
     exports.createBox = createBox;
     exports.createDomMotionComponent = createDomMotionComponent;
     exports.createMotionComponent = createMotionComponent;
+    exports.delay = delay;
     exports.domAnimation = domAnimation;
     exports.domMax = domMax;
     exports.filterProps = filterProps;