framer-motion 10.2.5 → 10.3.0

package/dist/framer-motion.dev.js

@@ -1984,7 +1984,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 = "10.2.5";
+            this.version = "10.3.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -3517,6 +3517,20 @@
         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;
         /**
@@ -3562,26 +3576,26 @@
             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) {
                 /**
@@ -3589,7 +3603,7 @@
                  * 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.
@@ -3623,7 +3637,7 @@
                         frameGenerator = mirroredGenerator;
                     }
                 }
-                const p = currentTime >= totalDuration
+                const p = time >= totalDuration
                     ? repeatType === "reverse" && iterationIsOdd
                         ? 0
                         : 1
@@ -3636,19 +3650,25 @@
                 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";
@@ -3667,21 +3687,30 @@
             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;
@@ -3780,12 +3809,17 @@
          * 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.
@@ -3813,8 +3847,11 @@
             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
@@ -5566,23 +5603,35 @@
         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");
         }
     }
 
@@ -8394,7 +8443,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    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)) {
@@ -10555,7 +10604,7 @@
              */
             sync.update(() => {
                 if (value.animation) {
-                    value.animation.currentTime =
+                    value.animation.time =
                         performance.now() - millisecondsToSeconds(sampledTime);
                 }
             });