framer-motion 10.9.4 → 10.10.0

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var transform = require('./transform-587ecd00.js');
+var transform = require('./transform-6d9fcb92.js');
 
 
 

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var transform = require('./transform-587ecd00.js');
+var transform = require('./transform-6d9fcb92.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/cjs/{transform-587ecd00.js → transform-6d9fcb92.js}

@@ -1752,7 +1752,7 @@ function calculateDuration(generator) {
         duration += timeStep;
         state = generator.next(duration);
     }
-    return duration;
+    return duration >= maxDuration$1 ? Infinity : duration;
 }
 /**
  * Animate a single value on the main thread.
@@ -1825,26 +1825,36 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         resolvedDuration = calculatedDuration + repeatDelay;
         totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
     }
-    let time = 0;
+    let currentTime = 0;
     const tick = (timestamp) => {
         if (startTime === null)
             return;
+        /**
+         * requestAnimationFrame timestamps can come through as lower than
+         * the startTime as set by performance.now(). Here we prevent this,
+         * though in the future it could be possible to make setting startTime
+         * a pending operation that gets resolved here.
+         */
+        if (speed > 0)
+            startTime = Math.min(startTime, timestamp);
         if (holdTime !== null) {
-            time = holdTime;
+            currentTime = holdTime;
         }
         else {
-            time = (timestamp - startTime) * speed;
+            currentTime = (timestamp - startTime) * speed;
         }
         // Rebase on delay
-        time = Math.max(time - delay, 0);
+        const timeWithoutDelay = currentTime - delay;
+        const isInDelayPhase = timeWithoutDelay < 0;
+        currentTime = Math.max(timeWithoutDelay, 0);
         /**
          * If this animation has finished, set the current time
          * to the total duration.
          */
         if (playState === "finished" && holdTime === null) {
-            time = totalDuration;
+            currentTime = totalDuration;
         }
-        let elapsed = time;
+        let elapsed = currentTime;
         let frameGenerator = generator;
         if (repeat) {
             /**
@@ -1852,7 +1862,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
              * than duration we'll get values like 2.5 (midway through the
              * third iteration)
              */
-            const progress = time / resolvedDuration;
+            const progress = currentTime / resolvedDuration;
             /**
              * Get the current iteration (0 indexed). For instance the floor of
              * 2.5 is 2.
@@ -1888,23 +1898,30 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
                 }
             }
             let p = clamp(0, 1, iterationProgress);
-            if (time > totalDuration) {
+            if (currentTime > totalDuration) {
                 p = repeatType === "reverse" && iterationIsOdd ? 1 : 0;
             }
             elapsed = p * resolvedDuration;
         }
-        const state = frameGenerator.next(elapsed);
+        /**
+         * If we're in negative time, set state as the initial keyframe.
+         * This prevents delay: x, duration: 0 animations from finishing
+         * instantly.
+         */
+        const state = isInDelayPhase
+            ? { done: false, value: keyframes$1[0] }
+            : frameGenerator.next(elapsed);
         if (mapNumbersToKeyframes) {
             state.value = mapNumbersToKeyframes(state.value);
         }
         let { done } = state;
-        if (calculatedDuration !== null) {
-            done = time >= totalDuration;
+        if (!isInDelayPhase && calculatedDuration !== null) {
+            done = currentTime >= totalDuration;
         }
         const isAnimationFinished = holdTime === null &&
             (playState === "finished" ||
                 (playState === "running" && done) ||
-                (speed < 0 && time <= 0));
+                (speed < 0 && currentTime <= 0));
         if (onUpdate) {
             onUpdate(state.value);
         }
@@ -1957,11 +1974,11 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
             return currentFinishedPromise.then(resolve, reject);
         },
         get time() {
-            return millisecondsToSeconds(time);
+            return millisecondsToSeconds(currentTime);
         },
         set time(newTime) {
             newTime = secondsToMilliseconds(newTime);
-            time = newTime;
+            currentTime = newTime;
             if (holdTime !== null || !animationDriver || speed === 0) {
                 holdTime = newTime;
             }
@@ -1969,6 +1986,12 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
                 startTime = animationDriver.now() - newTime / speed;
             }
         },
+        get duration() {
+            const duration = generator.calculatedDuration === null
+                ? calculateDuration(generator)
+                : generator.calculatedDuration;
+            return millisecondsToSeconds(duration);
+        },
         get speed() {
             return speed;
         },
@@ -1976,7 +1999,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
             if (newSpeed === speed || !animationDriver)
                 return;
             speed = newSpeed;
-            controls.time = millisecondsToSeconds(time);
+            controls.time = millisecondsToSeconds(currentTime);
         },
         get state() {
             return playState;
@@ -1984,7 +2007,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         play,
         pause: () => {
             playState = "paused";
-            holdTime = time;
+            holdTime = currentTime;
         },
         stop: () => {
             hasStopped = true;
@@ -2137,6 +2160,9 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         set speed(newSpeed) {
             animation.playbackRate = newSpeed;
         },
+        get duration() {
+            return millisecondsToSeconds(duration);
+        },
         play: () => {
             if (hasStopped)
                 return;
@@ -2170,7 +2196,7 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     };
 }
 
-function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplete, }) {
+function createInstantAnimation({ keyframes, delay, onUpdate, onComplete, }) {
     const setValue = () => {
         onUpdate && onUpdate(keyframes[keyframes.length - 1]);
         onComplete && onComplete();
@@ -2184,6 +2210,7 @@ function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplet
         return {
             time: 0,
             speed: 1,
+            duration: 0,
             play: (noop),
             pause: (noop),
             stop: (noop),
@@ -2195,10 +2222,11 @@ function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplet
             complete: (noop),
         };
     };
-    return delayBy
+    return delay
         ? animateValue({
             keyframes: [0, 1],
-            duration: delayBy,
+            duration: 0,
+            delay,
             onComplete: setValue,
         })
         : setValue();
@@ -2430,16 +2458,6 @@ const animateMotionValue = (valueName, value, target, transition = {}) => {
                 valueTransition.onComplete && valueTransition.onComplete();
             },
         };
-        if (!isOriginAnimatable ||
-            !isTargetAnimatable ||
-            instantAnimationState.current ||
-            valueTransition.type === false) {
-            /**
-             * If we can't animate this value, or the global instant animation flag is set,
-             * or this is simply defined as an instant transition, return an instant transition.
-             */
-            return createInstantAnimation(options);
-        }
         /**
          * If there's no transition defined for this value, we can generate
          * unqiue transition settings for this value.
@@ -2461,6 +2479,16 @@ const animateMotionValue = (valueName, value, target, transition = {}) => {
         if (options.repeatDelay) {
             options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
         }
+        if (!isOriginAnimatable ||
+            !isTargetAnimatable ||
+            instantAnimationState.current ||
+            valueTransition.type === false) {
+            /**
+             * If we can't animate this value, or the global instant animation flag is set,
+             * or this is simply defined as an instant transition, return an instant transition.
+             */
+            return createInstantAnimation(options);
+        }
         /**
          * Animate via WAAPI if possible.
          */
@@ -2581,7 +2609,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 = "10.9.4";
+        this.version = "10.10.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3370,6 +3398,13 @@ class GroupPlaybackControls {
     set speed(speed) {
         this.setAll("speed", speed);
     }
+    get duration() {
+        let max = 0;
+        for (let i = 0; i < this.animations.length; i++) {
+            max = Math.max(max, this.animations[i].duration);
+        }
+        return max;
+    }
     runAll(methodName) {
         this.animations.forEach((controls) => controls[methodName]());
     }
@@ -3740,7 +3775,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.9.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.9.4 may not work as expected.`);
+                warnOnce(nextValue.version === "10.10.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.10.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/dom-entry.d.ts

@@ -340,6 +340,7 @@ declare type ElementOrSelector = Element | Element[] | NodeListOf<Element> | str
 interface AnimationPlaybackControls {
     time: number;
     speed: number;
+    duration: number;
     stop: () => void;
     play: () => void;
     pause: () => void;

package/dist/es/animation/GroupPlaybackControls.mjs

@@ -28,6 +28,13 @@ class GroupPlaybackControls {
     set speed(speed) {
         this.setAll("speed", speed);
     }
+    get duration() {
+        let max = 0;
+        for (let i = 0; i < this.animations.length; i++) {
+            max = Math.max(max, this.animations[i].duration);
+        }
+        return max;
+    }
     runAll(methodName) {
         this.animations.forEach((controls) => controls[methodName]());
     }

package/dist/es/animation/animators/instant.mjs

@@ -1,7 +1,7 @@
 import { animateValue } from './js/index.mjs';
 import { noop } from '../../utils/noop.mjs';
 
-function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplete, }) {
+function createInstantAnimation({ keyframes, delay, onUpdate, onComplete, }) {
     const setValue = () => {
         onUpdate && onUpdate(keyframes[keyframes.length - 1]);
         onComplete && onComplete();
@@ -15,6 +15,7 @@ function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplet
         return {
             time: 0,
             speed: 1,
+            duration: 0,
             play: (noop),
             pause: (noop),
             stop: (noop),
@@ -26,10 +27,11 @@ function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplet
             complete: (noop),
         };
     };
-    return delayBy
+    return delay
         ? animateValue({
             keyframes: [0, 1],
-            duration: delayBy,
+            duration: 0,
+            delay,
             onComplete: setValue,
         })
         : setValue();

package/dist/es/animation/animators/js/index.mjs

@@ -26,7 +26,7 @@ function calculateDuration(generator) {
         duration += timeStep;
         state = generator.next(duration);
     }
-    return duration;
+    return duration >= maxDuration ? Infinity : duration;
 }
 /**
  * Animate a single value on the main thread.
@@ -99,26 +99,36 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         resolvedDuration = calculatedDuration + repeatDelay;
         totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
     }
-    let time = 0;
+    let currentTime = 0;
     const tick = (timestamp) => {
         if (startTime === null)
             return;
+        /**
+         * requestAnimationFrame timestamps can come through as lower than
+         * the startTime as set by performance.now(). Here we prevent this,
+         * though in the future it could be possible to make setting startTime
+         * a pending operation that gets resolved here.
+         */
+        if (speed > 0)
+            startTime = Math.min(startTime, timestamp);
         if (holdTime !== null) {
-            time = holdTime;
+            currentTime = holdTime;
         }
         else {
-            time = (timestamp - startTime) * speed;
+            currentTime = (timestamp - startTime) * speed;
         }
         // Rebase on delay
-        time = Math.max(time - delay, 0);
+        const timeWithoutDelay = currentTime - delay;
+        const isInDelayPhase = timeWithoutDelay < 0;
+        currentTime = Math.max(timeWithoutDelay, 0);
         /**
          * If this animation has finished, set the current time
          * to the total duration.
          */
         if (playState === "finished" && holdTime === null) {
-            time = totalDuration;
+            currentTime = totalDuration;
         }
-        let elapsed = time;
+        let elapsed = currentTime;
         let frameGenerator = generator;
         if (repeat) {
             /**
@@ -126,7 +136,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
              * than duration we'll get values like 2.5 (midway through the
              * third iteration)
              */
-            const progress = time / resolvedDuration;
+            const progress = currentTime / resolvedDuration;
             /**
              * Get the current iteration (0 indexed). For instance the floor of
              * 2.5 is 2.
@@ -162,23 +172,30 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
                 }
             }
             let p = clamp(0, 1, iterationProgress);
-            if (time > totalDuration) {
+            if (currentTime > totalDuration) {
                 p = repeatType === "reverse" && iterationIsOdd ? 1 : 0;
             }
             elapsed = p * resolvedDuration;
         }
-        const state = frameGenerator.next(elapsed);
+        /**
+         * If we're in negative time, set state as the initial keyframe.
+         * This prevents delay: x, duration: 0 animations from finishing
+         * instantly.
+         */
+        const state = isInDelayPhase
+            ? { done: false, value: keyframes$1[0] }
+            : frameGenerator.next(elapsed);
         if (mapNumbersToKeyframes) {
             state.value = mapNumbersToKeyframes(state.value);
         }
         let { done } = state;
-        if (calculatedDuration !== null) {
-            done = time >= totalDuration;
+        if (!isInDelayPhase && calculatedDuration !== null) {
+            done = currentTime >= totalDuration;
         }
         const isAnimationFinished = holdTime === null &&
             (playState === "finished" ||
                 (playState === "running" && done) ||
-                (speed < 0 && time <= 0));
+                (speed < 0 && currentTime <= 0));
         if (onUpdate) {
             onUpdate(state.value);
         }
@@ -231,11 +248,11 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
             return currentFinishedPromise.then(resolve, reject);
         },
         get time() {
-            return millisecondsToSeconds(time);
+            return millisecondsToSeconds(currentTime);
         },
         set time(newTime) {
             newTime = secondsToMilliseconds(newTime);
-            time = newTime;
+            currentTime = newTime;
             if (holdTime !== null || !animationDriver || speed === 0) {
                 holdTime = newTime;
             }
@@ -243,6 +260,12 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
                 startTime = animationDriver.now() - newTime / speed;
             }
         },
+        get duration() {
+            const duration = generator.calculatedDuration === null
+                ? calculateDuration(generator)
+                : generator.calculatedDuration;
+            return millisecondsToSeconds(duration);
+        },
         get speed() {
             return speed;
         },
@@ -250,7 +273,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
             if (newSpeed === speed || !animationDriver)
                 return;
             speed = newSpeed;
-            controls.time = millisecondsToSeconds(time);
+            controls.time = millisecondsToSeconds(currentTime);
         },
         get state() {
             return playState;
@@ -258,7 +281,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         play,
         pause: () => {
             playState = "paused";
-            holdTime = time;
+            holdTime = currentTime;
         },
         stop: () => {
             hasStopped = true;

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

@@ -133,6 +133,9 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         set speed(newSpeed) {
             animation.playbackRate = newSpeed;
         },
+        get duration() {
+            return millisecondsToSeconds(duration);
+        },
         play: () => {
             if (hasStopped)
                 return;

package/dist/es/animation/interfaces/motion-value.mjs

@@ -50,16 +50,6 @@ const animateMotionValue = (valueName, value, target, transition = {}) => {
                 valueTransition.onComplete && valueTransition.onComplete();
             },
         };
-        if (!isOriginAnimatable ||
-            !isTargetAnimatable ||
-            instantAnimationState.current ||
-            valueTransition.type === false) {
-            /**
-             * If we can't animate this value, or the global instant animation flag is set,
-             * or this is simply defined as an instant transition, return an instant transition.
-             */
-            return createInstantAnimation(options);
-        }
         /**
          * If there's no transition defined for this value, we can generate
          * unqiue transition settings for this value.
@@ -81,6 +71,16 @@ const animateMotionValue = (valueName, value, target, transition = {}) => {
         if (options.repeatDelay) {
             options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
         }
+        if (!isOriginAnimatable ||
+            !isTargetAnimatable ||
+            instantAnimationState.current ||
+            valueTransition.type === false) {
+            /**
+             * If we can't animate this value, or the global instant animation flag is set,
+             * or this is simply defined as an instant transition, return an instant transition.
+             */
+            return createInstantAnimation(options);
+        }
         /**
          * Animate via WAAPI if possible.
          */

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

package/dist/es/value/index.mjs

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