framer-motion 10.2.4 → 10.3.0

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var wrap = require('./wrap-62da7859.js');
+var wrap = require('./wrap-462b1507.js');
 
 
 

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var wrap = require('./wrap-62da7859.js');
+var wrap = require('./wrap-462b1507.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -4227,10 +4227,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.target = undefined;
             this.isLayoutDirty = false;
         }
-        /**
-         * Frame calculations
-         */
-        resolveTargetDelta() {
+        resolveTargetDelta(forceRecalculation = false) {
             var _a;
             /**
              * Once the dirty status of nodes has been spread through the tree, we also
@@ -4246,7 +4243,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * We don't use transform for this step of processing so we don't
              * need to check whether any nodes have changed transform.
              */
-            const canSkip = !((isShared && this.isSharedProjectionDirty) ||
+            const canSkip = !(forceRecalculation ||
+                (isShared && this.isSharedProjectionDirty) ||
                 this.isProjectionDirty ||
                 ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||
                 this.attemptToResolveRelativeTarget);
@@ -4258,6 +4256,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             if (!this.layout || !(layout || layoutId))
                 return;
+            this.resolvedRelativeTargetAt = wrap.frameData.timestamp;
             /**
              * If we don't have a targetDelta but do have a layout, we can attempt to resolve
              * a relativeParent. This will allow a component to perform scale correction
@@ -4298,6 +4297,16 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.relativeTargetOrigin &&
                 this.relativeParent &&
                 this.relativeParent.target) {
+                /**
+                 * If the parent target isn't up-to-date, force it to update.
+                 * This is an unfortunate de-optimisation as it means any updating relative
+                 * projection will cause all the relative parents to recalculate back
+                 * up the tree.
+                 */
+                if (this.relativeParent.resolvedRelativeTargetAt !==
+                    wrap.frameData.timestamp) {
+                    this.relativeParent.resolveTargetDelta(true);
+                }
                 calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);
                 /**
                  * If we've only got a targetDelta, resolve it into a target
@@ -4384,6 +4393,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 (this.isSharedProjectionDirty || this.isTransformDirty)) {
                 canSkip = false;
             }
+            /**
+             * If we have resolved the target this frame we must recalculate the
+             * projection to ensure it visually represents the internal calculations.
+             */
+            if (this.resolvedRelativeTargetAt === wrap.frameData.timestamp) {
+                canSkip = false;
+            }
             if (canSkip)
                 return;
             const { layout, layoutId } = this.options;
@@ -5516,7 +5532,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                wrap.warnOnce(nextValue.version === "10.2.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.2.4 may not work as expected.`);
+                wrap.warnOnce(nextValue.version === "10.3.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.3.0 may not work as expected.`);
             }
         }
         else if (wrap.isMotionValue(prevValue)) {
@@ -7679,7 +7695,7 @@ sync) {
          */
         sync.update(() => {
             if (value.animation) {
-                value.animation.currentTime =
+                value.animation.time =
                     performance.now() - wrap.millisecondsToSeconds(sampledTime);
             }
         });

package/dist/cjs/{wrap-62da7859.js → wrap-462b1507.js}

@@ -404,7 +404,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.2.4";
+        this.version = "10.3.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -1764,6 +1764,20 @@ function calculateDuration(generator) {
     return duration;
 }
 function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, keyframes: keyframes$1, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", onPlay, onStop, onComplete, onUpdate, ...options }) {
+    let resolveFinishedPromise;
+    let currentFinishedPromise;
+    /**
+     * Create a new finished Promise every time we enter the
+     * finished state and resolve the old Promise. This is
+     * WAAPI-compatible behaviour.
+     */
+    const updateFinishedPromise = () => {
+        currentFinishedPromise = new Promise((resolve) => {
+            resolveFinishedPromise = resolve;
+        });
+    };
+    // Create the first finished promise
+    updateFinishedPromise();
     let animationDriver;
     const generatorFactory = types[type] || keyframes;
     /**
@@ -1809,26 +1823,26 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         resolvedDuration = calculatedDuration + repeatDelay;
         totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
     }
-    let currentTime = 0;
+    let time = 0;
     const tick = (timestamp) => {
         if (startTime === null)
             return;
         if (holdTime !== null) {
-            currentTime = holdTime;
+            time = holdTime;
         }
         else {
-            currentTime = timestamp - startTime;
+            time = timestamp - startTime;
         }
         // Rebase on delay
-        currentTime = Math.max(currentTime - delay, 0);
+        time = Math.max(time - delay, 0);
         /**
          * If this animation has finished, set the current time
          * to the total duration.
          */
         if (playState === "finished" && holdTime === null) {
-            currentTime = totalDuration;
+            time = totalDuration;
         }
-        let elapsed = currentTime;
+        let elapsed = time;
         let frameGenerator = generator;
         if (repeat) {
             /**
@@ -1836,7 +1850,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 = currentTime / resolvedDuration;
+            const progress = time / resolvedDuration;
             /**
              * Get the current iteration (0 indexed). For instance the floor of
              * 2.5 is 2.
@@ -1870,7 +1884,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
                     frameGenerator = mirroredGenerator;
                 }
             }
-            const p = currentTime >= totalDuration
+            const p = time >= totalDuration
                 ? repeatType === "reverse" && iterationIsOdd
                     ? 0
                     : 1
@@ -1883,19 +1897,25 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
             onUpdate(mapNumbersToKeyframes ? mapNumbersToKeyframes(value) : value);
         }
         if (calculatedDuration !== null) {
-            done = currentTime >= totalDuration;
+            done = time >= totalDuration;
         }
         const isAnimationFinished = holdTime === null &&
             (playState === "finished" || (playState === "running" && done));
         if (isAnimationFinished) {
-            playState = "finished";
-            onComplete && onComplete();
-            animationDriver && animationDriver.stop();
+            finish();
         }
         return state;
     };
+    const finish = () => {
+        animationDriver && animationDriver.stop();
+        playState = "finished";
+        onComplete && onComplete();
+        resolveFinishedPromise();
+        updateFinishedPromise();
+    };
     const play = () => {
-        animationDriver = driver(tick);
+        if (!animationDriver)
+            animationDriver = driver(tick);
         const now = animationDriver.now();
         onPlay && onPlay();
         playState = "running";
@@ -1914,21 +1934,30 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         play();
     }
     const controls = {
-        get currentTime() {
-            return millisecondsToSeconds(currentTime);
+        then(resolve, reject) {
+            return currentFinishedPromise.then(resolve, reject);
         },
-        set currentTime(newTime) {
+        get time() {
+            return millisecondsToSeconds(time);
+        },
+        set time(newTime) {
+            const timeInMs = secondsToMilliseconds(newTime);
             if (holdTime !== null || !animationDriver) {
-                holdTime = 0;
+                holdTime = timeInMs;
             }
             else {
-                startTime =
-                    animationDriver.now() - secondsToMilliseconds(newTime);
+                startTime = animationDriver.now() - timeInMs;
             }
         },
+        play,
+        pause: () => {
+            playState = "paused";
+            holdTime = time;
+        },
         stop: () => {
             onStop && onStop();
             animationDriver && animationDriver.stop();
+            animationDriver = undefined;
         },
         sample: (elapsed) => {
             startTime = 0;
@@ -2027,12 +2056,17 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
      * Animation interrupt callback.
      */
     return {
-        get currentTime() {
+        then(resolve, reject) {
+            return animation.finished.then(resolve, reject);
+        },
+        get time() {
             return millisecondsToSeconds(animation.currentTime || 0);
         },
-        set currentTime(newTime) {
+        set time(newTime) {
             animation.currentTime = secondsToMilliseconds(newTime);
         },
+        play: () => animation.play(),
+        pause: () => animation.pause(),
         stop: () => {
             /**
              * WAAPI doesn't natively have any interruption capabilities.
@@ -2060,8 +2094,11 @@ function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplet
         onUpdate && onUpdate(keyframes[keyframes.length - 1]);
         onComplete && onComplete();
         return {
-            stop: () => { },
-            currentTime: 0,
+            time: 0,
+            play: (noop),
+            pause: (noop),
+            stop: (noop),
+            then: Promise.resolve,
         };
     };
     return delayBy
@@ -2296,23 +2333,35 @@ class GroupPlaybackControls {
     constructor(animations) {
         this.animations = animations.filter(Boolean);
     }
+    then(onResolve, onReject) {
+        return Promise.all(this.animations).then(onResolve).catch(onReject);
+    }
     /**
      * TODO: Filter out cancelled or stopped animations before returning
      */
-    get currentTime() {
-        return this.animations[0].currentTime;
+    get time() {
+        return this.animations[0].time;
     }
     /**
-     * currentTime assignment could reasonably run every frame, so
+     * time assignment could reasonably run every frame, so
      * we iterate using a normal loop to avoid function creation.
      */
-    set currentTime(time) {
+    set time(time) {
         for (let i = 0; i < this.animations.length; i++) {
-            this.animations[i].currentTime = time;
+            this.animations[i].time = time;
         }
     }
+    runAll(methodName) {
+        this.animations.forEach((controls) => controls[methodName]());
+    }
+    play() {
+        this.runAll("play");
+    }
+    pause() {
+        this.runAll("pause");
+    }
     stop() {
-        this.animations.forEach((controls) => controls.stop());
+        this.runAll("stop");
     }
 }
 
@@ -2365,24 +2414,6 @@ function delay(callback, timeout) {
     return () => cancelSync.read(checkElapsed);
 }
 
-const isCustomValueType = (v) => {
-    return typeof v === "object" && v.mix;
-};
-const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
-function transform(...args) {
-    const useImmediate = !Array.isArray(args[0]);
-    const argOffset = useImmediate ? 0 : -1;
-    const inputValue = args[0 + argOffset];
-    const inputRange = args[1 + argOffset];
-    const outputRange = args[2 + argOffset];
-    const options = args[3 + argOffset];
-    const interpolator = interpolate(inputRange, outputRange, {
-        mixer: getMixer(outputRange[0]),
-        ...options,
-    });
-    return useImmediate ? interpolator(inputValue) : interpolator;
-}
-
 function resolveElements(elements, selectorCache) {
     var _a;
     if (typeof elements === "string") {
@@ -2858,6 +2889,24 @@ function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount =
     return () => observer.disconnect();
 }
 
+const isCustomValueType = (v) => {
+    return typeof v === "object" && v.mix;
+};
+const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
+function transform(...args) {
+    const useImmediate = !Array.isArray(args[0]);
+    const argOffset = useImmediate ? 0 : -1;
+    const inputValue = args[0 + argOffset];
+    const inputRange = args[1 + argOffset];
+    const outputRange = args[2 + argOffset];
+    const options = args[3 + argOffset];
+    const interpolator = interpolate(inputRange, outputRange, {
+        mixer: getMixer(outputRange[0]),
+        ...options,
+    });
+    return useImmediate ? interpolator(inputValue) : interpolator;
+}
+
 const wrap = (min, max, v) => {
     const rangeSize = max - min;
     return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;

package/dist/dom-entry.d.ts

@@ -803,8 +803,11 @@ declare type Transition = (Orchestration & Repeat & TransitionDefinition) | (Orc
  * @public
  */
 interface AnimationPlaybackControls {
-    currentTime: number;
+    time: number;
     stop: () => void;
+    play: () => void;
+    pause: () => void;
+    then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>;
 }
 
 /**

package/dist/es/animation/GroupPlaybackControls.mjs

@@ -2,23 +2,35 @@ class GroupPlaybackControls {
     constructor(animations) {
         this.animations = animations.filter(Boolean);
     }
+    then(onResolve, onReject) {
+        return Promise.all(this.animations).then(onResolve).catch(onReject);
+    }
     /**
      * TODO: Filter out cancelled or stopped animations before returning
      */
-    get currentTime() {
-        return this.animations[0].currentTime;
+    get time() {
+        return this.animations[0].time;
     }
     /**
-     * currentTime assignment could reasonably run every frame, so
+     * time assignment could reasonably run every frame, so
      * we iterate using a normal loop to avoid function creation.
      */
-    set currentTime(time) {
+    set time(time) {
         for (let i = 0; i < this.animations.length; i++) {
-            this.animations[i].currentTime = time;
+            this.animations[i].time = time;
         }
     }
+    runAll(methodName) {
+        this.animations.forEach((controls) => controls[methodName]());
+    }
+    play() {
+        this.runAll("play");
+    }
+    pause() {
+        this.runAll("pause");
+    }
     stop() {
-        this.animations.forEach((controls) => controls.stop());
+        this.runAll("stop");
     }
 }
 

package/dist/es/animation/create-instant-animation.mjs

@@ -1,12 +1,16 @@
 import { animateValue } from './js/index.mjs';
+import { noop } from '../utils/noop.mjs';
 
 function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplete, }) {
     const setValue = () => {
         onUpdate && onUpdate(keyframes[keyframes.length - 1]);
         onComplete && onComplete();
         return {
-            stop: () => { },
-            currentTime: 0,
+            time: 0,
+            play: (noop),
+            pause: (noop),
+            stop: (noop),
+            then: Promise.resolve,
         };
     };
     return delayBy

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

@@ -29,6 +29,20 @@ function calculateDuration(generator) {
     return duration;
 }
 function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, keyframes: keyframes$1, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", onPlay, onStop, onComplete, onUpdate, ...options }) {
+    let resolveFinishedPromise;
+    let currentFinishedPromise;
+    /**
+     * Create a new finished Promise every time we enter the
+     * finished state and resolve the old Promise. This is
+     * WAAPI-compatible behaviour.
+     */
+    const updateFinishedPromise = () => {
+        currentFinishedPromise = new Promise((resolve) => {
+            resolveFinishedPromise = resolve;
+        });
+    };
+    // Create the first finished promise
+    updateFinishedPromise();
     let animationDriver;
     const generatorFactory = types[type] || keyframes;
     /**
@@ -74,26 +88,26 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         resolvedDuration = calculatedDuration + repeatDelay;
         totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
     }
-    let currentTime = 0;
+    let time = 0;
     const tick = (timestamp) => {
         if (startTime === null)
             return;
         if (holdTime !== null) {
-            currentTime = holdTime;
+            time = holdTime;
         }
         else {
-            currentTime = timestamp - startTime;
+            time = timestamp - startTime;
         }
         // Rebase on delay
-        currentTime = Math.max(currentTime - delay, 0);
+        time = Math.max(time - delay, 0);
         /**
          * If this animation has finished, set the current time
          * to the total duration.
          */
         if (playState === "finished" && holdTime === null) {
-            currentTime = totalDuration;
+            time = totalDuration;
         }
-        let elapsed = currentTime;
+        let elapsed = time;
         let frameGenerator = generator;
         if (repeat) {
             /**
@@ -101,7 +115,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 = currentTime / resolvedDuration;
+            const progress = time / resolvedDuration;
             /**
              * Get the current iteration (0 indexed). For instance the floor of
              * 2.5 is 2.
@@ -135,7 +149,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
                     frameGenerator = mirroredGenerator;
                 }
             }
-            const p = currentTime >= totalDuration
+            const p = time >= totalDuration
                 ? repeatType === "reverse" && iterationIsOdd
                     ? 0
                     : 1
@@ -148,19 +162,25 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
             onUpdate(mapNumbersToKeyframes ? mapNumbersToKeyframes(value) : value);
         }
         if (calculatedDuration !== null) {
-            done = currentTime >= totalDuration;
+            done = time >= totalDuration;
         }
         const isAnimationFinished = holdTime === null &&
             (playState === "finished" || (playState === "running" && done));
         if (isAnimationFinished) {
-            playState = "finished";
-            onComplete && onComplete();
-            animationDriver && animationDriver.stop();
+            finish();
         }
         return state;
     };
+    const finish = () => {
+        animationDriver && animationDriver.stop();
+        playState = "finished";
+        onComplete && onComplete();
+        resolveFinishedPromise();
+        updateFinishedPromise();
+    };
     const play = () => {
-        animationDriver = driver(tick);
+        if (!animationDriver)
+            animationDriver = driver(tick);
         const now = animationDriver.now();
         onPlay && onPlay();
         playState = "running";
@@ -179,21 +199,30 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         play();
     }
     const controls = {
-        get currentTime() {
-            return millisecondsToSeconds(currentTime);
+        then(resolve, reject) {
+            return currentFinishedPromise.then(resolve, reject);
         },
-        set currentTime(newTime) {
+        get time() {
+            return millisecondsToSeconds(time);
+        },
+        set time(newTime) {
+            const timeInMs = secondsToMilliseconds(newTime);
             if (holdTime !== null || !animationDriver) {
-                holdTime = 0;
+                holdTime = timeInMs;
             }
             else {
-                startTime =
-                    animationDriver.now() - secondsToMilliseconds(newTime);
+                startTime = animationDriver.now() - timeInMs;
             }
         },
+        play,
+        pause: () => {
+            playState = "paused";
+            holdTime = time;
+        },
         stop: () => {
             onStop && onStop();
             animationDriver && animationDriver.stop();
+            animationDriver = undefined;
         },
         sample: (elapsed) => {
             startTime = 0;

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

@@ -42,7 +42,7 @@ sync) {
          */
         sync.update(() => {
             if (value.animation) {
-                value.animation.currentTime =
+                value.animation.time =
                     performance.now() - millisecondsToSeconds(sampledTime);
             }
         });

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

@@ -95,12 +95,17 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
      * Animation interrupt callback.
      */
     return {
-        get currentTime() {
+        then(resolve, reject) {
+            return animation.finished.then(resolve, reject);
+        },
+        get time() {
             return millisecondsToSeconds(animation.currentTime || 0);
         },
-        set currentTime(newTime) {
+        set time(newTime) {
             animation.currentTime = secondsToMilliseconds(newTime);
         },
+        play: () => animation.play(),
+        pause: () => animation.pause(),
         stop: () => {
             /**
              * WAAPI doesn't natively have any interruption capabilities.