framer-motion 10.2.4 → 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;
@@ -1403,6 +1406,7 @@ interface IProjectionNode<I = unknown> {
     isProjectionDirty: boolean;
     isSharedProjectionDirty: boolean;
     isTransformDirty: boolean;
+    resolvedRelativeTargetAt?: number;
     shouldResetTransform: boolean;
     prevTransformTemplateValue: string | undefined;
     isUpdateBlocked(): boolean;
@@ -1438,7 +1442,7 @@ interface IProjectionNode<I = unknown> {
     resetTransform(): void;
     resetRotation(): void;
     applyTransform(box: Box, transformOnly?: boolean): Box;
-    resolveTargetDelta(): void;
+    resolveTargetDelta(force?: boolean): void;
     calcProjection(): void;
     getProjectionStyles(styles?: MotionStyle): MotionStyle | undefined;
     clearMeasurements(): void;

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);
+            },
+            get time() {
+                return millisecondsToSeconds(time);
             },
-            set currentTime(newTime) {
+            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.4";
+            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");
         }
     }
 
@@ -3549,10 +3598,7 @@
                 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
@@ -3568,7 +3614,8 @@
                  * 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);
@@ -3580,6 +3627,7 @@
                  */
                 if (!this.layout || !(layout || layoutId))
                     return;
+                this.resolvedRelativeTargetAt = 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
@@ -3620,6 +3668,16 @@
                     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 !==
+                        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
@@ -3706,6 +3764,13 @@
                     (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 === frameData.timestamp) {
+                    canSkip = false;
+                }
                 if (canSkip)
                     return;
                 const { layout, layoutId } = this.options;
@@ -5203,7 +5268,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "10.2.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.2.4 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)) {
@@ -5845,6 +5910,7 @@
     exports.calcBoxDelta = calcBoxDelta;
     exports.correctBorderRadius = correctBorderRadius;
     exports.correctBoxShadow = correctBoxShadow;
+    exports.frameData = frameData;
     exports.mix = mix;
     exports.nodeGroup = nodeGroup;
     exports.sync = sync;

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
@@ -1299,6 +1302,7 @@ interface IProjectionNode<I = unknown> {
     isProjectionDirty: boolean;
     isSharedProjectionDirty: boolean;
     isTransformDirty: boolean;
+    resolvedRelativeTargetAt?: number;
     shouldResetTransform: boolean;
     prevTransformTemplateValue: string | undefined;
     isUpdateBlocked(): boolean;
@@ -1334,7 +1338,7 @@ interface IProjectionNode<I = unknown> {
     resetTransform(): void;
     resetRotation(): void;
     applyTransform(box: Box, transformOnly?: boolean): Box;
-    resolveTargetDelta(): void;
+    resolveTargetDelta(force?: boolean): void;
     calcProjection(): void;
     getProjectionStyles(styles?: MotionStyle): MotionStyle | undefined;
     clearMeasurements(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "10.2.4",
+    "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.85 kB"
+            "maxSize": "30.07 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
@@ -93,11 +93,11 @@
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "14.56 kB"
+            "maxSize": "14.68 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "25.6 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.42 kB"
+            "maxSize": "30.8 kB"
         }
     ],
-    "gitHead": "82eb0ba26cd103d524a27dc95415e437cce35822"
+    "gitHead": "f464ee9f02ed31e4611b7316df6ea68018721031"
 }