framer-motion 10.2.5 → 10.3.0

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var wrap = require('./wrap-0d5542ae.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-0d5542ae.js');
+var wrap = require('./wrap-462b1507.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -5532,7 +5532,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                wrap.warnOnce(nextValue.version === "10.2.5", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.2.5 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)) {
@@ -7695,7 +7695,7 @@ sync) {
          */
         sync.update(() => {
             if (value.animation) {
-                value.animation.currentTime =
+                value.animation.time =
                     performance.now() - wrap.millisecondsToSeconds(sampledTime);
             }
         });

package/dist/cjs/{wrap-0d5542ae.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.5";
+        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");
     }
 }
 

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.

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