framer-motion 7.5.3 → 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.3";
+        this.version = "7.6.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3533,14 +3546,16 @@ function hasScale({ scale, scaleX, scaleY }) {
 }
 function hasTransform(values) {
     return (hasScale(values) ||
-        hasTranslate(values.x) ||
-        hasTranslate(values.y) ||
+        has2DTranslate(values) ||
         values.z ||
         values.rotate ||
         values.rotateX ||
         values.rotateY);
 }
-function hasTranslate(value) {
+function has2DTranslate(values) {
+    return is2DTranslate(values.x) || is2DTranslate(values.y);
+}
+function is2DTranslate(value) {
     return value && value !== "0%";
 }
 
@@ -4221,7 +4236,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.5.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.3 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)) {
@@ -5926,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);
@@ -5996,7 +6011,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                          */
                         if (!hasLayoutChanged &&
                             this.animationProgress === 0) {
-                            this.finishAnimation();
+                            finishAnimation(this);
                         }
                         this.isLead() && ((_e = (_d = this.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d));
                     }
@@ -6405,7 +6420,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
         }
         getClosestProjectingParent() {
-            if (!this.parent || hasTransform(this.parent.latestValues))
+            if (!this.parent ||
+                hasScale(this.parent.latestValues) ||
+                has2DTranslate(this.parent.latestValues))
                 return undefined;
             if ((this.parent.relativeTarget || this.parent.targetDelta) &&
                 this.parent.layout) {
@@ -8430,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

@@ -14,10 +14,11 @@ import { NodeStack } from '../shared/stack.mjs';
 import { scaleCorrectors } from '../styles/scale-correction.mjs';
 import { buildProjectionTransform } from '../styles/transform.mjs';
 import { eachAxis } from '../utils/each-axis.mjs';
-import { hasTransform, hasScale } from '../utils/has-transform.mjs';
+import { hasTransform, hasScale, has2DTranslate } from '../utils/has-transform.mjs';
 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);
@@ -230,7 +231,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                          */
                         if (!hasLayoutChanged &&
                             this.animationProgress === 0) {
-                            this.finishAnimation();
+                            finishAnimation(this);
                         }
                         this.isLead() && ((_e = (_d = this.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d));
                     }
@@ -639,7 +640,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
         }
         getClosestProjectingParent() {
-            if (!this.parent || hasTransform(this.parent.latestValues))
+            if (!this.parent ||
+                hasScale(this.parent.latestValues) ||
+                has2DTranslate(this.parent.latestValues))
                 return undefined;
             if ((this.parent.relativeTarget || this.parent.targetDelta) &&
                 this.parent.layout) {

package/dist/es/projection/utils/has-transform.mjs

@@ -8,15 +8,17 @@ function hasScale({ scale, scaleX, scaleY }) {
 }
 function hasTransform(values) {
     return (hasScale(values) ||
-        hasTranslate(values.x) ||
-        hasTranslate(values.y) ||
+        has2DTranslate(values) ||
         values.z ||
         values.rotate ||
         values.rotateX ||
         values.rotateY);
 }
-function hasTranslate(value) {
+function has2DTranslate(values) {
+    return is2DTranslate(values.x) || is2DTranslate(values.y);
+}
+function is2DTranslate(value) {
     return value && value !== "0%";
 }
 
-export { hasScale, hasTransform };
+export { has2DTranslate, hasScale, hasTransform };

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.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.3 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.3";
+        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.3";
+            this.version = "7.6.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -4701,14 +4714,16 @@
     }
     function hasTransform(values) {
         return (hasScale(values) ||
-            hasTranslate(values.x) ||
-            hasTranslate(values.y) ||
+            has2DTranslate(values) ||
             values.z ||
             values.rotate ||
             values.rotateX ||
             values.rotateY);
     }
-    function hasTranslate(value) {
+    function has2DTranslate(values) {
+        return is2DTranslate(values.x) || is2DTranslate(values.y);
+    }
+    function is2DTranslate(value) {
         return value && value !== "0%";
     }
 
@@ -5389,7 +5404,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.5.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.3 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)) {
@@ -7094,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);
@@ -7164,7 +7179,7 @@
                              */
                             if (!hasLayoutChanged &&
                                 this.animationProgress === 0) {
-                                this.finishAnimation();
+                                finishAnimation(this);
                             }
                             this.isLead() && ((_e = (_d = this.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d));
                         }
@@ -7573,7 +7588,9 @@
                 }
             }
             getClosestProjectingParent() {
-                if (!this.parent || hasTransform(this.parent.latestValues))
+                if (!this.parent ||
+                    hasScale(this.parent.latestValues) ||
+                    has2DTranslate(this.parent.latestValues))
                     return undefined;
                 if ((this.parent.relativeTarget || this.parent.targetDelta) &&
                     this.parent.layout) {
@@ -10179,6 +10196,7 @@
     exports.createBox = createBox;
     exports.createDomMotionComponent = createDomMotionComponent;
     exports.createMotionComponent = createMotionComponent;
+    exports.delay = delay;
     exports.domAnimation = domAnimation;
     exports.domMax = domMax;
     exports.filterProps = filterProps;