framer-motion 10.2.5 → 10.3.0

package/dist/index.d.ts

@@ -896,8 +896,11 @@ declare type Driver = (update: Update) => DriverControls;
  * @public
  */
 interface AnimationPlaybackControls {
-    currentTime: number;
+    time: number;
     stop: () => void;
+    play: () => void;
+    pause: () => void;
+    then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>;
 }
 interface VelocityOptions {
     velocity?: number;

package/dist/projection.dev.js

@@ -1214,6 +1214,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;
         /**
@@ -1259,26 +1273,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) {
                 /**
@@ -1286,7 +1300,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.
@@ -1320,7 +1334,7 @@
                         frameGenerator = mirroredGenerator;
                     }
                 }
-                const p = currentTime >= totalDuration
+                const p = time >= totalDuration
                     ? repeatType === "reverse" && iterationIsOdd
                         ? 0
                         : 1
@@ -1333,19 +1347,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";
@@ -1364,21 +1384,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;
@@ -1477,12 +1506,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.
@@ -1510,8 +1544,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
@@ -1973,7 +2010,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.
              *
@@ -2282,23 +2319,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");
         }
     }
 
@@ -5219,7 +5268,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)) {

package/dist/three-entry.d.ts

@@ -856,8 +856,11 @@ interface CustomValueType {
  * @public
  */
 interface AnimationPlaybackControls {
-    currentTime: number;
+    time: number;
     stop: () => void;
+    play: () => void;
+    pause: () => void;
+    then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>;
 }
 /**
  * @public

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "10.2.5",
+    "version": "10.3.0",
     "description": "A simple and powerful React and JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -85,7 +85,7 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "29.89 kB"
+            "maxSize": "30.07 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
@@ -93,11 +93,11 @@
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "14.64 kB"
+            "maxSize": "14.68 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "25.64 kB"
+            "maxSize": "25.82 kB"
         },
         {
             "path": "./dist/size-rollup-animate.js",
@@ -109,12 +109,12 @@
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "18.56 kB"
+            "maxSize": "18.68 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "30.46 kB"
+            "maxSize": "30.8 kB"
         }
     ],
-    "gitHead": "08a892929cc60026ae1e97d382dee6f0d8f3893d"
+    "gitHead": "f464ee9f02ed31e4611b7316df6ea68018721031"
 }