framer-motion 10.5.0 → 10.6.1

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var wrap = require('./wrap-bf172f81.js');
+var wrap = require('./wrap-992dcd37.js');
 
 
 

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var wrap = require('./wrap-bf172f81.js');
+var wrap = require('./wrap-992dcd37.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -5295,6 +5295,16 @@ function useSpring(source, config = {}) {
                 ...config,
                 onUpdate: set,
             });
+            /**
+             * If we're between frames, resync the animation to the frameloop.
+             */
+            if (!wrap.frameData.isProcessing) {
+                const delta = performance.now() - wrap.frameData.timestamp;
+                if (delta < 30) {
+                    activeSpringAnimation.current.time =
+                        wrap.millisecondsToSeconds(delta);
+                }
+            }
             return value.get();
         }, stopAnimation);
     }, [JSON.stringify(config)]);

package/dist/cjs/{wrap-bf172f81.js → wrap-992dcd37.js}

@@ -818,17 +818,57 @@ function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) {
     return keyframes[index];
 }
 
-// Accepts an easing function and returns a new one that outputs mirrored values for
-// the second half of the animation. Turns easeIn into easeInOut.
-const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
-
-// Accepts an easing function and returns a new one that outputs reversed values.
-// Turns easeIn into easeOut.
-const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
+/*
+  Bezier function generator
+  This has been modified from Gaëtan Renaudeau's BezierEasing
+  https://github.com/gre/bezier-easing/blob/master/src/index.js
+  https://github.com/gre/bezier-easing/blob/master/LICENSE
+  
+  I've removed the newtonRaphsonIterate algo because in benchmarking it
+  wasn't noticiably faster than binarySubdivision, indeed removing it
+  usually improved times, depending on the curve.
+  I also removed the lookup table, as for the added bundle size and loop we're
+  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
+  to 12 to compensate and this still tended to be faster for no perceivable
+  loss in accuracy.
+  Usage
+    const easeOut = cubicBezier(.17,.67,.83,.67);
+    const x = easeOut(0.5); // returns 0.627...
+*/
+// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
+    t;
+const subdivisionPrecision = 0.0000001;
+const subdivisionMaxIterations = 12;
+function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
+    let currentX;
+    let currentT;
+    let i = 0;
+    do {
+        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
+        currentX = calcBezier(currentT, mX1, mX2) - x;
+        if (currentX > 0.0) {
+            upperBound = currentT;
+        }
+        else {
+            lowerBound = currentT;
+        }
+    } while (Math.abs(currentX) > subdivisionPrecision &&
+        ++i < subdivisionMaxIterations);
+    return currentT;
+}
+function cubicBezier(mX1, mY1, mX2, mY2) {
+    // If this is a linear gradient, return linear easing
+    if (mX1 === mY1 && mX2 === mY2)
+        return noop;
+    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
+    // If animation is at start/end, return t without easing
+    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
+}
 
-const easeIn = (p) => p * p;
-const easeOut = reverseEasing(easeIn);
-const easeInOut = mirrorEasing(easeIn);
+const easeIn = cubicBezier(0.42, 0, 1, 1);
+const easeOut = cubicBezier(0, 0, 0.58, 1);
+const easeInOut = cubicBezier(0.42, 0, 0.58, 1);
 
 /**
  * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
@@ -1269,53 +1309,13 @@ function convertOffsetToTimes(offset, duration) {
     return offset.map((o) => o * duration);
 }
 
-/*
-  Bezier function generator
-  This has been modified from Gaëtan Renaudeau's BezierEasing
-  https://github.com/gre/bezier-easing/blob/master/src/index.js
-  https://github.com/gre/bezier-easing/blob/master/LICENSE
-  
-  I've removed the newtonRaphsonIterate algo because in benchmarking it
-  wasn't noticiably faster than binarySubdivision, indeed removing it
-  usually improved times, depending on the curve.
-  I also removed the lookup table, as for the added bundle size and loop we're
-  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
-  to 12 to compensate and this still tended to be faster for no perceivable
-  loss in accuracy.
-  Usage
-    const easeOut = cubicBezier(.17,.67,.83,.67);
-    const x = easeOut(0.5); // returns 0.627...
-*/
-// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
-    t;
-const subdivisionPrecision = 0.0000001;
-const subdivisionMaxIterations = 12;
-function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-    let currentX;
-    let currentT;
-    let i = 0;
-    do {
-        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
-        currentX = calcBezier(currentT, mX1, mX2) - x;
-        if (currentX > 0.0) {
-            upperBound = currentT;
-        }
-        else {
-            lowerBound = currentT;
-        }
-    } while (Math.abs(currentX) > subdivisionPrecision &&
-        ++i < subdivisionMaxIterations);
-    return currentT;
-}
-function cubicBezier(mX1, mY1, mX2, mY2) {
-    // If this is a linear gradient, return linear easing
-    if (mX1 === mY1 && mX2 === mY2)
-        return noop;
-    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
-    // If animation is at start/end, return t without easing
-    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
-}
+// Accepts an easing function and returns a new one that outputs mirrored values for
+// the second half of the animation. Turns easeIn into easeInOut.
+const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
+
+// Accepts an easing function and returns a new one that outputs reversed values.
+// Turns easeIn into easeOut.
+const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
 
 const circIn = (p) => 1 - Math.sin(Math.acos(p));
 const circOut = reverseEasing(circIn);
@@ -1743,7 +1743,16 @@ function calculateDuration(generator) {
     }
     return duration;
 }
+/**
+ * Animate a single value on the main thread.
+ *
+ * This function is written, where functionality overlaps,
+ * to be largely spec-compliant with WAAPI to allow fungibility
+ * between the two.
+ */
 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 speed = 1;
+    let hasStopped = false;
     let resolveFinishedPromise;
     let currentFinishedPromise;
     /**
@@ -1752,6 +1761,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
      * WAAPI-compatible behaviour.
      */
     const updateFinishedPromise = () => {
+        resolveFinishedPromise && resolveFinishedPromise();
         currentFinishedPromise = new Promise((resolve) => {
             resolveFinishedPromise = resolve;
         });
@@ -1785,6 +1795,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
     let playState = "idle";
     let holdTime = null;
     let startTime = null;
+    let cancelTime = null;
     /**
      * If duration is undefined and we have repeat options,
      * we need to calculate a duration from the generator.
@@ -1811,7 +1822,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
             time = holdTime;
         }
         else {
-            time = timestamp - startTime;
+            time = (timestamp - startTime) * speed;
         }
         // Rebase on delay
         time = Math.max(time - delay, 0);
@@ -1849,10 +1860,11 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
                 iterationProgress = 1;
             }
             iterationProgress === 1 && currentIteration--;
+            currentIteration = Math.min(currentIteration, repeat + 1);
             /**
              * Reverse progress if we're not running in "normal" direction
              */
-            const iterationIsOdd = currentIteration % 2;
+            const iterationIsOdd = Boolean(currentIteration % 2);
             if (iterationIsOdd) {
                 if (repeatType === "reverse") {
                     iterationProgress = 1 - iterationProgress;
@@ -1864,36 +1876,51 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
                     frameGenerator = mirroredGenerator;
                 }
             }
-            const p = time >= totalDuration
-                ? repeatType === "reverse" && iterationIsOdd
-                    ? 0
-                    : 1
-                : clamp(0, 1, iterationProgress);
+            let p = clamp(0, 1, iterationProgress);
+            if (time > totalDuration) {
+                p = repeatType === "reverse" && iterationIsOdd ? 1 : 0;
+            }
             elapsed = p * resolvedDuration;
         }
         const state = frameGenerator.next(elapsed);
-        let { value, done } = state;
-        if (onUpdate) {
-            onUpdate(mapNumbersToKeyframes ? mapNumbersToKeyframes(value) : value);
+        if (mapNumbersToKeyframes) {
+            state.value = mapNumbersToKeyframes(state.value);
         }
+        let { done } = state;
         if (calculatedDuration !== null) {
             done = time >= totalDuration;
         }
         const isAnimationFinished = holdTime === null &&
-            (playState === "finished" || (playState === "running" && done));
+            (playState === "finished" ||
+                (playState === "running" && done) ||
+                (speed < 0 && time <= 0));
+        if (onUpdate) {
+            onUpdate(state.value);
+        }
         if (isAnimationFinished) {
             finish();
         }
         return state;
     };
-    const finish = () => {
+    const stopAnimationDriver = () => {
         animationDriver && animationDriver.stop();
+        animationDriver = undefined;
+    };
+    const cancel = () => {
+        playState = "idle";
+        stopAnimationDriver();
+        updateFinishedPromise();
+        startTime = cancelTime = null;
+    };
+    const finish = () => {
         playState = "finished";
         onComplete && onComplete();
-        resolveFinishedPromise();
+        stopAnimationDriver();
         updateFinishedPromise();
     };
     const play = () => {
+        if (hasStopped)
+            return;
         if (!animationDriver)
             animationDriver = driver(tick);
         const now = animationDriver.now();
@@ -1907,6 +1934,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
             // logic around finished animations
             startTime = now;
         }
+        cancelTime = startTime;
         holdTime = null;
         animationDriver.start();
     };
@@ -1923,13 +1951,22 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         set time(newTime) {
             newTime = secondsToMilliseconds(newTime);
             time = newTime;
-            if (holdTime !== null || !animationDriver) {
+            if (holdTime !== null || !animationDriver || speed === 0) {
                 holdTime = newTime;
             }
             else {
-                startTime = animationDriver.now() - newTime;
+                startTime = animationDriver.now() - newTime / speed;
             }
         },
+        get speed() {
+            return speed;
+        },
+        set speed(newSpeed) {
+            if (newSpeed === speed || !animationDriver)
+                return;
+            speed = newSpeed;
+            controls.time = millisecondsToSeconds(time);
+        },
         get state() {
             return playState;
         },
@@ -1939,12 +1976,20 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
             holdTime = time;
         },
         stop: () => {
+            hasStopped = true;
             if (playState === "idle")
                 return;
             playState = "idle";
             onStop && onStop();
-            animationDriver && animationDriver.stop();
-            animationDriver = undefined;
+            cancel();
+        },
+        cancel: () => {
+            if (cancelTime !== null)
+                tick(cancelTime);
+            cancel();
+        },
+        complete: () => {
+            playState = "finished";
         },
         sample: (elapsed) => {
             startTime = 0;
@@ -1990,6 +2035,7 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     /**
      * TODO: Unify with js/index
      */
+    let hasStopped = false;
     let resolveFinishedPromise;
     let currentFinishedPromise;
     /**
@@ -2043,6 +2089,11 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
          */
         ease: ease,
     });
+    const safeCancel = () => {
+        sync.update(() => animation.cancel());
+        resolveFinishedPromise();
+        updateFinishedPromise();
+    };
     /**
      * Prefer the `onfinish` prop as it's more widely supported than
      * the `finished` promise.
@@ -2053,10 +2104,8 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
      */
     animation.onfinish = () => {
         value.set(getFinalKeyframe(keyframes, options));
-        sync.update(() => animation.cancel());
         onComplete && onComplete();
-        resolveFinishedPromise();
-        updateFinishedPromise();
+        safeCancel();
     };
     /**
      * Animation interrupt callback.
@@ -2071,9 +2120,20 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         set time(newTime) {
             animation.currentTime = secondsToMilliseconds(newTime);
         },
-        play: () => animation.play(),
+        get speed() {
+            return animation.playbackRate;
+        },
+        set speed(newSpeed) {
+            animation.playbackRate = newSpeed;
+        },
+        play: () => {
+            if (hasStopped)
+                return;
+            animation.play();
+        },
         pause: () => animation.pause(),
         stop: () => {
+            hasStopped = true;
             if (animation.playState === "idle")
                 return;
             /**
@@ -2092,8 +2152,10 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
                 });
                 value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
             }
-            sync.update(() => animation.cancel());
+            safeCancel();
         },
+        complete: () => animation.finish(),
+        cancel: safeCancel,
     };
 }
 
@@ -2101,8 +2163,16 @@ function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplet
     const setValue = () => {
         onUpdate && onUpdate(keyframes[keyframes.length - 1]);
         onComplete && onComplete();
+        /**
+         * TODO: As this API grows it could make sense to always return
+         * animateValue. This will be a bigger project as animateValue
+         * is frame-locked whereas this function resolves instantly.
+         * This is a behavioural change and also has ramifications regarding
+         * assumptions within tests.
+         */
         return {
             time: 0,
+            speed: 1,
             play: (noop),
             pause: (noop),
             stop: (noop),
@@ -2110,6 +2180,8 @@ function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplet
                 resolve();
                 return Promise.resolve();
             },
+            cancel: (noop),
+            complete: (noop),
         };
     };
     return delayBy
@@ -2334,6 +2406,7 @@ const animateMotionValue = (valueName, value, target, transition = {}) => {
         let options = {
             keyframes,
             velocity: value.getVelocity(),
+            ease: "easeOut",
             ...valueTransition,
             delay: -elapsed,
             onUpdate: (v) => {
@@ -2496,7 +2569,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.5.0";
+        this.version = "10.6.1";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3265,18 +3338,26 @@ class GroupPlaybackControls {
     /**
      * TODO: Filter out cancelled or stopped animations before returning
      */
-    get time() {
-        return this.animations[0].time;
+    getAll(propName) {
+        return this.animations[0][propName];
     }
-    /**
-     * time assignment could reasonably run every frame, so
-     * we iterate using a normal loop to avoid function creation.
-     */
-    set time(time) {
+    setAll(propName, newValue) {
         for (let i = 0; i < this.animations.length; i++) {
-            this.animations[i].time = time;
+            this.animations[i][propName] = newValue;
         }
     }
+    get time() {
+        return this.getAll("time");
+    }
+    set time(time) {
+        this.setAll("time", time);
+    }
+    get speed() {
+        return this.getAll("speed");
+    }
+    set speed(speed) {
+        this.setAll("speed", speed);
+    }
     runAll(methodName) {
         this.animations.forEach((controls) => controls[methodName]());
     }
@@ -3289,6 +3370,12 @@ class GroupPlaybackControls {
     stop() {
         this.runAll("stop");
     }
+    cancel() {
+        this.runAll("cancel");
+    }
+    complete() {
+        this.runAll("complete");
+    }
 }
 
 function isDOMKeyframes(keyframes) {
@@ -3641,7 +3728,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.5.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.5.0 may not work as expected.`);
+                warnOnce(nextValue.version === "10.6.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.6.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/dom-entry.d.ts

@@ -818,9 +818,12 @@ declare type ElementOrSelector = Element | Element[] | NodeListOf<Element> | str
  */
 interface AnimationPlaybackControls {
     time: number;
+    speed: number;
     stop: () => void;
     play: () => void;
     pause: () => void;
+    complete: () => void;
+    cancel: () => void;
     then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>;
 }
 interface CSSStyleDeclarationWithTransform extends Omit<CSSStyleDeclaration, "direction" | "transition"> {
@@ -1078,9 +1081,9 @@ declare const circIn: EasingFunction;
 declare const circOut: EasingFunction;
 declare const circInOut: EasingFunction;
 
-declare const easeIn: (p: number) => number;
-declare const easeOut: EasingFunction;
-declare const easeInOut: EasingFunction;
+declare const easeIn: (t: number) => number;
+declare const easeOut: (t: number) => number;
+declare const easeInOut: (t: number) => number;
 
 declare function cubicBezier(mX1: number, mY1: number, mX2: number, mY2: number): (t: number) => number;
 

package/dist/es/animation/GroupPlaybackControls.mjs

@@ -8,18 +8,26 @@ class GroupPlaybackControls {
     /**
      * TODO: Filter out cancelled or stopped animations before returning
      */
-    get time() {
-        return this.animations[0].time;
+    getAll(propName) {
+        return this.animations[0][propName];
     }
-    /**
-     * time assignment could reasonably run every frame, so
-     * we iterate using a normal loop to avoid function creation.
-     */
-    set time(time) {
+    setAll(propName, newValue) {
         for (let i = 0; i < this.animations.length; i++) {
-            this.animations[i].time = time;
+            this.animations[i][propName] = newValue;
         }
     }
+    get time() {
+        return this.getAll("time");
+    }
+    set time(time) {
+        this.setAll("time", time);
+    }
+    get speed() {
+        return this.getAll("speed");
+    }
+    set speed(speed) {
+        this.setAll("speed", speed);
+    }
     runAll(methodName) {
         this.animations.forEach((controls) => controls[methodName]());
     }
@@ -32,6 +40,12 @@ class GroupPlaybackControls {
     stop() {
         this.runAll("stop");
     }
+    cancel() {
+        this.runAll("cancel");
+    }
+    complete() {
+        this.runAll("complete");
+    }
 }
 
 export { GroupPlaybackControls };

package/dist/es/animation/animators/instant.mjs

@@ -5,8 +5,16 @@ function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplet
     const setValue = () => {
         onUpdate && onUpdate(keyframes[keyframes.length - 1]);
         onComplete && onComplete();
+        /**
+         * TODO: As this API grows it could make sense to always return
+         * animateValue. This will be a bigger project as animateValue
+         * is frame-locked whereas this function resolves instantly.
+         * This is a behavioural change and also has ramifications regarding
+         * assumptions within tests.
+         */
         return {
             time: 0,
+            speed: 1,
             play: (noop),
             pause: (noop),
             stop: (noop),
@@ -14,6 +22,8 @@ function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplet
                 resolve();
                 return Promise.resolve();
             },
+            cancel: (noop),
+            complete: (noop),
         };
     };
     return delayBy