framer-motion 10.2.2 → 10.2.4

package/dist/framer-motion.dev.js

@@ -1394,17 +1394,6 @@
         update() { }
     }
 
-    /*
-      Detect and load appropriate clock setting for the execution environment
-     */
-    const defaultTimestep = (1 / 60) * 1000;
-    const getCurrentTime = typeof performance !== "undefined"
-        ? () => performance.now()
-        : () => Date.now();
-    const onNextFrame = typeof window !== "undefined"
-        ? (callback) => window.requestAnimationFrame(callback)
-        : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
-
     function createRenderStep(runNextFrame) {
         /**
          * We create and reuse two arrays, one to queue jobs for the current frame
@@ -1533,7 +1522,7 @@
     const processFrame = (timestamp) => {
         runNextFrame = false;
         frameData.delta = useDefaultElapsed
-            ? defaultTimestep
+            ? 1000 / 60
             : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed$1), 1);
         frameData.timestamp = timestamp;
         isProcessing = true;
@@ -1541,14 +1530,14 @@
         isProcessing = false;
         if (runNextFrame) {
             useDefaultElapsed = false;
-            onNextFrame(processFrame);
+            requestAnimationFrame(processFrame);
         }
     };
     const startLoop = () => {
         runNextFrame = true;
         useDefaultElapsed = true;
         if (!isProcessing)
-            onNextFrame(processFrame);
+            requestAnimationFrame(processFrame);
     };
 
     function addHoverEvent(node, isActive) {
@@ -1995,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.2";
+            this.version = "10.2.4";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -2241,7 +2230,7 @@
             this.stop();
             return new Promise((resolve) => {
                 this.hasAnimated = true;
-                this.animation = startAnimation(resolve) || null;
+                this.animation = startAnimation(resolve);
                 if (this.events.animationStart) {
                     this.events.animationStart.notify();
                 }
@@ -2275,7 +2264,7 @@
             return !!this.animation;
         }
         clearAnimation() {
-            this.animation = null;
+            delete this.animation;
         }
         /**
          * Destroy and clean up subscribers to this `MotionValue`.
@@ -2723,11 +2712,74 @@
      * @return milliseconds - Converted time in milliseconds.
      */
     const secondsToMilliseconds = (seconds) => seconds * 1000;
+    const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
 
     const instantAnimationState = {
         current: false,
     };
 
+    function isWaapiSupportedEasing(easing) {
+        return (!easing || // Default easing
+            Array.isArray(easing) || // Bezier curve
+            (typeof easing === "string" && supportedWaapiEasing[easing]));
+    }
+    const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+    const supportedWaapiEasing = {
+        linear: "linear",
+        ease: "ease",
+        easeIn: "ease-in",
+        easeOut: "ease-out",
+        easeInOut: "ease-in-out",
+        circIn: cubicBezierAsString([0, 0.65, 0.55, 1]),
+        circOut: cubicBezierAsString([0.55, 0, 1, 0.45]),
+        backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
+        backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
+    };
+    function mapEasingToNativeEasing(easing) {
+        if (!easing)
+            return undefined;
+        return Array.isArray(easing)
+            ? cubicBezierAsString(easing)
+            : supportedWaapiEasing[easing];
+    }
+
+    function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
+        const keyframeOptions = { [valueName]: keyframes };
+        if (times)
+            keyframeOptions.offset = times;
+        return element.animate(keyframeOptions, {
+            delay,
+            duration,
+            easing: mapEasingToNativeEasing(ease),
+            fill: "both",
+            iterations: repeat + 1,
+            direction: repeatType === "reverse" ? "alternate" : "normal",
+        });
+    }
+
+    const featureTests = {
+        waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
+    };
+    const results = {};
+    const supports = {};
+    /**
+     * Generate features tests that cache their results.
+     */
+    for (const key in featureTests) {
+        supports[key] = () => {
+            if (results[key] === undefined)
+                results[key] = featureTests[key]();
+            return results[key];
+        };
+    }
+
+    function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) {
+        const index = repeat && repeatType !== "loop" && repeat % 2 === 1
+            ? 0
+            : keyframes.length - 1;
+        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;
@@ -3096,8 +3148,7 @@
     function defaultEasing(values, easing) {
         return values.map(() => easing || easeInOut).splice(0, values.length - 1);
     }
-    function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duration = 300, }) {
-        keyframeValues = [...keyframeValues];
+    function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) {
         /**
          * Easing functions can be externally defined as strings. Here we convert them
          * into actual functions.
@@ -3122,42 +3173,42 @@
         times && times.length === keyframeValues.length
             ? times
             : defaultOffset$1(keyframeValues), duration);
-        function createInterpolator() {
-            return interpolate(absoluteTimes, keyframeValues, {
-                ease: Array.isArray(easingFunctions)
-                    ? easingFunctions
-                    : defaultEasing(keyframeValues, easingFunctions),
-            });
-        }
-        let interpolator = createInterpolator();
+        const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {
+            ease: Array.isArray(easingFunctions)
+                ? easingFunctions
+                : defaultEasing(keyframeValues, easingFunctions),
+        });
         return {
+            calculatedDuration: duration,
             next: (t) => {
-                state.value = interpolator(t);
+                state.value = mapTimeToKeyframe(t);
                 state.done = t >= duration;
                 return state;
             },
-            flipTarget: () => {
-                keyframeValues.reverse();
-                interpolator = createInterpolator();
-            },
         };
     }
 
+    const velocitySampleDuration = 5; // ms
+    function calcGeneratorVelocity(resolveValue, t, current) {
+        const prevT = Math.max(t - velocitySampleDuration, 0);
+        return velocityPerSecond(current - resolveValue(prevT), t - prevT);
+    }
+
     const safeMin = 0.001;
     const minDuration = 0.01;
-    const maxDuration = 10.0;
+    const maxDuration$2 = 10.0;
     const minDamping = 0.05;
     const maxDamping = 1;
     function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
         let envelope;
         let derivative;
-        exports.warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
+        exports.warning(duration <= secondsToMilliseconds(maxDuration$2), "Spring duration must be 10 seconds or less");
         let dampingRatio = 1 - bounce;
         /**
          * Restrict dampingRatio and duration to within acceptable ranges.
          */
         dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
-        duration = clamp(minDuration, maxDuration, duration / 1000);
+        duration = clamp(minDuration, maxDuration$2, millisecondsToSeconds(duration));
         if (dampingRatio < 1) {
             /**
              * Underdamped spring
@@ -3198,7 +3249,7 @@
         }
         const initialGuess = 5 / duration;
         const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
-        duration = duration * 1000;
+        duration = secondsToMilliseconds(duration);
         if (isNaN(undampedFreq)) {
             return {
                 stiffness: 100,
@@ -3255,78 +3306,71 @@
         }
         return springOptions;
     }
-    const velocitySampleDuration = 5;
-    /**
-     * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
-     */
     function spring({ keyframes, restDelta, restSpeed, ...options }) {
-        let origin = keyframes[0];
-        let target = keyframes[keyframes.length - 1];
+        const origin = keyframes[0];
+        const target = keyframes[keyframes.length - 1];
         /**
          * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
          * to reduce GC during animation.
          */
         const state = { done: false, value: origin };
         const { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
-        let resolveSpring = zero;
-        let initialVelocity = velocity ? -(velocity / 1000) : 0.0;
+        const initialVelocity = velocity ? -millisecondsToSeconds(velocity) : 0.0;
         const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
-        function createSpring() {
-            const initialDelta = target - origin;
-            const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
-            /**
-             * If we're working on a granular scale, use smaller defaults for determining
-             * when the spring is finished.
-             *
-             * These defaults have been selected emprically based on what strikes a good
-             * ratio between feeling good and finishing as soon as changes are imperceptible.
-             */
-            const isGranularScale = Math.abs(initialDelta) < 5;
-            restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
-            restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);
-            if (dampingRatio < 1) {
-                const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
-                // Underdamped spring
-                resolveSpring = (t) => {
-                    const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                    return (target -
-                        envelope *
-                            (((initialVelocity +
-                                dampingRatio * undampedAngularFreq * initialDelta) /
-                                angularFreq) *
-                                Math.sin(angularFreq * t) +
-                                initialDelta * Math.cos(angularFreq * t)));
-                };
-            }
-            else if (dampingRatio === 1) {
-                // Critically damped spring
-                resolveSpring = (t) => target -
-                    Math.exp(-undampedAngularFreq * t) *
-                        (initialDelta +
-                            (initialVelocity + undampedAngularFreq * initialDelta) *
-                                t);
-            }
-            else {
-                // Overdamped spring
-                const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
-                resolveSpring = (t) => {
-                    const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                    // When performing sinh or cosh values can hit Infinity so we cap them here
-                    const freqForT = Math.min(dampedAngularFreq * t, 300);
-                    return (target -
-                        (envelope *
-                            ((initialVelocity +
-                                dampingRatio * undampedAngularFreq * initialDelta) *
-                                Math.sinh(freqForT) +
-                                dampedAngularFreq *
-                                    initialDelta *
-                                    Math.cosh(freqForT))) /
-                            dampedAngularFreq);
-                };
-            }
+        const initialDelta = target - origin;
+        const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));
+        /**
+         * If we're working on a granular scale, use smaller defaults for determining
+         * when the spring is finished.
+         *
+         * These defaults have been selected emprically based on what strikes a good
+         * ratio between feeling good and finishing as soon as changes are imperceptible.
+         */
+        const isGranularScale = Math.abs(initialDelta) < 5;
+        restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
+        restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);
+        let resolveSpring;
+        if (dampingRatio < 1) {
+            const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
+            // Underdamped spring
+            resolveSpring = (t) => {
+                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+                return (target -
+                    envelope *
+                        (((initialVelocity +
+                            dampingRatio * undampedAngularFreq * initialDelta) /
+                            angularFreq) *
+                            Math.sin(angularFreq * t) +
+                            initialDelta * Math.cos(angularFreq * t)));
+            };
+        }
+        else if (dampingRatio === 1) {
+            // Critically damped spring
+            resolveSpring = (t) => target -
+                Math.exp(-undampedAngularFreq * t) *
+                    (initialDelta +
+                        (initialVelocity + undampedAngularFreq * initialDelta) * t);
+        }
+        else {
+            // Overdamped spring
+            const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
+            resolveSpring = (t) => {
+                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+                // When performing sinh or cosh values can hit Infinity so we cap them here
+                const freqForT = Math.min(dampedAngularFreq * t, 300);
+                return (target -
+                    (envelope *
+                        ((initialVelocity +
+                            dampingRatio * undampedAngularFreq * initialDelta) *
+                            Math.sinh(freqForT) +
+                            dampedAngularFreq *
+                                initialDelta *
+                                Math.cosh(freqForT))) /
+                        dampedAngularFreq);
+            };
         }
-        createSpring();
         return {
+            calculatedDuration: isResolvedFromDuration ? duration || null : null,
             next: (t) => {
                 const current = resolveSpring(t);
                 if (!isResolvedFromDuration) {
@@ -3338,8 +3382,7 @@
                          * checking only for displacement is enough.
                          */
                         if (dampingRatio < 1) {
-                            const prevT = Math.max(0, t - velocitySampleDuration);
-                            currentVelocity = velocityPerSecond(current - resolveSpring(prevT), t - prevT);
+                            currentVelocity = calcGeneratorVelocity(resolveSpring, t, current);
                         }
                         else {
                             currentVelocity = 0;
@@ -3356,29 +3399,23 @@
                 state.value = state.done ? target : current;
                 return state;
             },
-            flipTarget: () => {
-                initialVelocity = -initialVelocity;
-                [origin, target] = [target, origin];
-                createSpring();
-            },
         };
     }
-    spring.needsInterpolation = (a, b) => typeof a === "string" || typeof b === "string";
-    const zero = (_t) => 0;
 
-    function decay({ 
-    /**
-     * The decay animation dynamically calculates an end of the animation
-     * based on the initial keyframe, so we only need to define a single keyframe
-     * as default.
-     */
-    keyframes = [0], velocity = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget, }) {
+    function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
         const origin = keyframes[0];
-        /**
-         * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
-         * to reduce GC during animation.
-         */
-        const state = { done: false, value: origin };
+        const state = {
+            done: false,
+            value: origin,
+        };
+        const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max);
+        const nearestBoundary = (v) => {
+            if (min === undefined)
+                return max;
+            if (max === undefined)
+                return min;
+            return Math.abs(min - v) < Math.abs(max - v) ? min : max;
+        };
         let amplitude = power * velocity;
         const ideal = origin + amplitude;
         const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
@@ -3388,233 +3425,270 @@
          */
         if (target !== ideal)
             amplitude = target - origin;
+        const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);
+        const calcLatest = (t) => target + calcDelta(t);
+        const applyFriction = (t) => {
+            const delta = calcDelta(t);
+            const latest = calcLatest(t);
+            state.done = Math.abs(delta) <= restDelta;
+            state.value = state.done ? target : latest;
+        };
+        /**
+         * Ideally this would resolve for t in a stateless way, we could
+         * do that by always precalculating the animation but as we know
+         * this will be done anyway we can assume that spring will
+         * be discovered during that.
+         */
+        let timeReachedBoundary;
+        let spring$1;
+        const checkCatchBoundary = (t) => {
+            if (!isOutOfBounds(state.value))
+                return;
+            timeReachedBoundary = t;
+            spring$1 = spring({
+                keyframes: [state.value, nearestBoundary(state.value)],
+                velocity: calcGeneratorVelocity(calcLatest, t, state.value),
+                damping: bounceDamping,
+                stiffness: bounceStiffness,
+                restDelta,
+                restSpeed,
+            });
+        };
+        checkCatchBoundary(0);
         return {
+            calculatedDuration: null,
             next: (t) => {
-                const delta = -amplitude * Math.exp(-t / timeConstant);
-                state.done = !(delta > restDelta || delta < -restDelta);
-                state.value = state.done ? target : target + delta;
-                return state;
+                /**
+                 * We need to resolve the friction to figure out if we need a
+                 * spring but we don't want to do this twice per frame. So here
+                 * we flag if we updated for this frame and later if we did
+                 * we can skip doing it again.
+                 */
+                let hasUpdatedFrame = false;
+                if (!spring$1 && timeReachedBoundary === undefined) {
+                    hasUpdatedFrame = true;
+                    applyFriction(t);
+                    checkCatchBoundary(t);
+                }
+                /**
+                 * If we have a spring and the provided t is beyond the moment the friction
+                 * animation crossed the min/max boundary, use the spring.
+                 */
+                if (timeReachedBoundary !== undefined && t > timeReachedBoundary) {
+                    return spring$1.next(t - timeReachedBoundary);
+                }
+                else {
+                    !hasUpdatedFrame && applyFriction(t);
+                    return state;
+                }
             },
-            flipTarget: () => { },
         };
     }
 
-    const types = {
-        decay,
-        keyframes: keyframes,
-        tween: keyframes,
-        spring,
-    };
-    function loopElapsed(elapsed, duration, delay = 0) {
-        return elapsed - duration - delay;
-    }
-    function reverseElapsed(elapsed, duration = 0, delay = 0, isForwardPlayback = true) {
-        return isForwardPlayback
-            ? loopElapsed(duration + -elapsed, duration, delay)
-            : duration - (elapsed - duration) + delay;
-    }
-    function hasRepeatDelayElapsed(elapsed, duration, delay, isForwardPlayback) {
-        return isForwardPlayback ? elapsed >= duration + delay : elapsed <= -delay;
-    }
-    const framesync = (update) => {
-        const passTimestamp = ({ delta }) => update(delta);
+    const frameloopDriver = (update) => {
+        const passTimestamp = ({ timestamp }) => update(timestamp);
         return {
             start: () => sync.update(passTimestamp, true),
             stop: () => cancelSync.update(passTimestamp),
+            now: () => performance.now(),
         };
     };
-    function animateValue({ duration, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, keyframes: keyframes$1, autoplay = true, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
-        const initialElapsed = elapsed;
-        let driverControls;
-        let repeatCount = 0;
-        let computedDuration = duration;
-        let isComplete = false;
-        let isForwardPlayback = true;
-        let interpolateFromNumber;
-        const animator = types[keyframes$1.length > 2 ? "keyframes" : type] || keyframes;
-        const origin = keyframes$1[0];
-        const target = keyframes$1[keyframes$1.length - 1];
-        let state = { done: false, value: origin };
+
+    const types = {
+        decay: inertia,
+        inertia,
+        tween: keyframes,
+        keyframes: keyframes,
+        spring,
+    };
+    /**
+     * Implement a practical max duration for keyframe generation
+     * to prevent infinite loops
+     */
+    const maxDuration$1 = 20000;
+    function calculateDuration(generator) {
+        let duration = 0;
+        const timeStep = 50;
+        let state = generator.next(duration);
+        while (!state.done && duration < maxDuration$1) {
+            duration += timeStep;
+            state = generator.next(duration);
+        }
+        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 animationDriver;
+        const generatorFactory = types[type] || keyframes;
         /**
-         * If this value needs interpolation (ie is non-numerical), set up an interpolator.
-         * TODO: Keyframes animation also performs this step. This could be removed so it only happens here.
+         * If this isn't the keyframes generator and we've been provided
+         * strings as keyframes, we need to interpolate these.
+         * TODO: Support velocity for units and complex value types/
          */
-        const { needsInterpolation } = animator;
-        if (needsInterpolation && needsInterpolation(origin, target)) {
-            interpolateFromNumber = interpolate([0, 100], [origin, target], {
+        let mapNumbersToKeyframes;
+        if (generatorFactory !== keyframes &&
+            typeof keyframes$1[0] !== "number") {
+            mapNumbersToKeyframes = interpolate([0, 100], keyframes$1, {
                 clamp: false,
             });
             keyframes$1 = [0, 100];
         }
-        const animation = animator({
-            ...options,
-            duration,
-            keyframes: keyframes$1,
-        });
-        function repeat() {
-            repeatCount++;
-            if (repeatType === "reverse") {
-                isForwardPlayback = repeatCount % 2 === 0;
-                elapsed = reverseElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback);
+        const generator = generatorFactory({ ...options, keyframes: keyframes$1 });
+        let mirroredGenerator;
+        if (repeatType === "mirror") {
+            mirroredGenerator = generatorFactory({
+                ...options,
+                keyframes: [...keyframes$1].reverse(),
+                velocity: -(options.velocity || 0),
+            });
+        }
+        let playState = "idle";
+        let holdTime = null;
+        let startTime = null;
+        /**
+         * If duration is undefined and we have repeat options,
+         * we need to calculate a duration from the generator.
+         *
+         * We set it to the generator itself to cache the duration.
+         * Any timeline resolver will need to have already precalculated
+         * the duration by this step.
+         */
+        if (generator.calculatedDuration === null && repeat) {
+            generator.calculatedDuration = calculateDuration(generator);
+        }
+        const { calculatedDuration } = generator;
+        let resolvedDuration = Infinity;
+        let totalDuration = Infinity;
+        if (calculatedDuration) {
+            resolvedDuration = calculatedDuration + repeatDelay;
+            totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
+        }
+        let currentTime = 0;
+        const tick = (timestamp) => {
+            if (startTime === null)
+                return;
+            if (holdTime !== null) {
+                currentTime = holdTime;
             }
             else {
-                elapsed = loopElapsed(elapsed, computedDuration, repeatDelay);
-                if (repeatType === "mirror")
-                    animation.flipTarget();
+                currentTime = timestamp - startTime;
             }
-            isComplete = false;
-            onRepeat && onRepeat();
-        }
-        function complete() {
-            driverControls && driverControls.stop();
-            onComplete && onComplete();
-        }
-        function update(delta) {
-            if (!isForwardPlayback)
-                delta = -delta;
-            elapsed += delta;
-            if (!isComplete) {
-                state = animation.next(Math.max(0, elapsed));
-                if (interpolateFromNumber)
-                    state.value = interpolateFromNumber(state.value);
-                isComplete = isForwardPlayback ? state.done : elapsed <= 0;
-            }
-            onUpdate && onUpdate(state.value);
-            if (isComplete) {
-                if (repeatCount === 0) {
-                    computedDuration =
-                        computedDuration !== undefined ? computedDuration : elapsed;
-                }
-                if (repeatCount < repeatMax) {
-                    hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();
+            // Rebase on delay
+            currentTime = Math.max(currentTime - delay, 0);
+            /**
+             * If this animation has finished, set the current time
+             * to the total duration.
+             */
+            if (playState === "finished" && holdTime === null) {
+                currentTime = totalDuration;
+            }
+            let elapsed = currentTime;
+            let frameGenerator = generator;
+            if (repeat) {
+                /**
+                 * Get the current progress (0-1) of the animation. If t is >
+                 * than duration we'll get values like 2.5 (midway through the
+                 * third iteration)
+                 */
+                const progress = currentTime / resolvedDuration;
+                /**
+                 * Get the current iteration (0 indexed). For instance the floor of
+                 * 2.5 is 2.
+                 */
+                let currentIteration = Math.floor(progress);
+                /**
+                 * Get the current progress of the iteration by taking the remainder
+                 * so 2.5 is 0.5 through iteration 2
+                 */
+                let iterationProgress = progress % 1.0;
+                /**
+                 * If iteration progress is 1 we count that as the end
+                 * of the previous iteration.
+                 */
+                if (!iterationProgress && progress >= 1) {
+                    iterationProgress = 1;
                 }
-                else {
-                    complete();
+                iterationProgress === 1 && currentIteration--;
+                /**
+                 * Reverse progress if we're not running in "normal" direction
+                 */
+                const iterationIsOdd = currentIteration % 2;
+                if (iterationIsOdd) {
+                    if (repeatType === "reverse") {
+                        iterationProgress = 1 - iterationProgress;
+                        if (repeatDelay) {
+                            iterationProgress -= repeatDelay / resolvedDuration;
+                        }
+                    }
+                    else if (repeatType === "mirror") {
+                        frameGenerator = mirroredGenerator;
+                    }
                 }
-            }
-        }
-        function play() {
+                const p = currentTime >= totalDuration
+                    ? repeatType === "reverse" && iterationIsOdd
+                        ? 0
+                        : 1
+                    : clamp(0, 1, iterationProgress);
+                elapsed = p * resolvedDuration;
+            }
+            const state = frameGenerator.next(elapsed);
+            let { value, done } = state;
+            if (onUpdate) {
+                onUpdate(mapNumbersToKeyframes ? mapNumbersToKeyframes(value) : value);
+            }
+            if (calculatedDuration !== null) {
+                done = currentTime >= totalDuration;
+            }
+            const isAnimationFinished = holdTime === null &&
+                (playState === "finished" || (playState === "running" && done));
+            if (isAnimationFinished) {
+                playState = "finished";
+                onComplete && onComplete();
+                animationDriver && animationDriver.stop();
+            }
+            return state;
+        };
+        const play = () => {
+            animationDriver = driver(tick);
+            const now = animationDriver.now();
             onPlay && onPlay();
-            driverControls = driver(update);
-            driverControls.start();
+            playState = "running";
+            if (holdTime !== null) {
+                startTime = now - holdTime;
+            }
+            else if (!startTime) {
+                // TODO When implementing play/pause, check WAAPI
+                // logic around finished animations
+                startTime = now;
+            }
+            holdTime = null;
+            animationDriver.start();
+        };
+        if (autoplay) {
+            play();
         }
-        autoplay && play();
-        return {
-            stop: () => {
-                onStop && onStop();
-                driverControls && driverControls.stop();
-            },
-            /**
-             * Set the current time of the animation. This is purposefully
-             * mirroring the WAAPI animation API to make them interchanagable.
-             * Going forward this file should be ported more towards
-             * https://github.com/motiondivision/motionone/blob/main/packages/animation/src/Animation.ts
-             * Which behaviourally adheres to WAAPI as far as possible.
-             *
-             * WARNING: This is not safe to use for most animations. We currently
-             * only use it for handoff from WAAPI within Framer.
-             *
-             * This animation function consumes time every frame rather than being sampled for time.
-             * So the sample() method performs some headless frames to ensure
-             * repeats are handled correctly. Ideally in the future we will replace
-             * that method with this, once repeat calculations are pure.
-             */
-            set currentTime(t) {
-                elapsed = initialElapsed;
-                update(t);
+        const controls = {
+            get currentTime() {
+                return millisecondsToSeconds(currentTime);
             },
-            /**
-             * animate() can't yet be sampled for time, instead it
-             * consumes time. So to sample it we have to run a low
-             * temporal-resolution version.
-             *
-             * isControlled should be set to true if sample is being run within
-             * a loop. This indicates that we're not arbitrarily sampling
-             * the animation but running it one step after another. Therefore
-             * we don't need to run a low-res version here. This is a stop-gap
-             * until a rewrite can sample for time.
-             */
-            sample: (t, isControlled = false) => {
-                elapsed = initialElapsed;
-                if (isControlled) {
-                    update(t);
-                    return state;
+            set currentTime(newTime) {
+                if (holdTime !== null || !animationDriver) {
+                    holdTime = 0;
                 }
-                const sampleResolution = duration && typeof duration === "number"
-                    ? Math.max(duration * 0.5, 50)
-                    : 50;
-                let sampleElapsed = 0;
-                update(0);
-                while (sampleElapsed <= t) {
-                    const remaining = t - sampleElapsed;
-                    update(Math.min(remaining, sampleResolution));
-                    sampleElapsed += sampleResolution;
+                else {
+                    startTime =
+                        animationDriver.now() - secondsToMilliseconds(newTime);
                 }
-                return state;
+            },
+            stop: () => {
+                onStop && onStop();
+                animationDriver && animationDriver.stop();
+            },
+            sample: (elapsed) => {
+                startTime = 0;
+                return tick(elapsed);
             },
         };
-    }
-
-    function isWaapiSupportedEasing(easing) {
-        return (!easing || // Default easing
-            Array.isArray(easing) || // Bezier curve
-            (typeof easing === "string" && supportedWaapiEasing[easing]));
-    }
-    const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
-    const supportedWaapiEasing = {
-        linear: "linear",
-        ease: "ease",
-        easeIn: "ease-in",
-        easeOut: "ease-out",
-        easeInOut: "ease-in-out",
-        circIn: cubicBezierAsString([0, 0.65, 0.55, 1]),
-        circOut: cubicBezierAsString([0.55, 0, 1, 0.45]),
-        backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
-        backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
-    };
-    function mapEasingToNativeEasing(easing) {
-        if (!easing)
-            return undefined;
-        return Array.isArray(easing)
-            ? cubicBezierAsString(easing)
-            : supportedWaapiEasing[easing];
-    }
-
-    function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
-        const keyframeOptions = { [valueName]: keyframes };
-        if (times)
-            keyframeOptions.offset = times;
-        return element.animate(keyframeOptions, {
-            delay,
-            duration,
-            easing: mapEasingToNativeEasing(ease),
-            fill: "both",
-            iterations: repeat + 1,
-            direction: repeatType === "reverse" ? "alternate" : "normal",
-        });
-    }
-
-    const featureTests = {
-        waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
-    };
-    const results = {};
-    const supports = {};
-    /**
-     * Generate features tests that cache their results.
-     */
-    for (const key in featureTests) {
-        supports[key] = () => {
-            if (results[key] === undefined)
-                results[key] = featureTests[key]();
-            return results[key];
-        };
-    }
-
-    function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) {
-        const index = repeat && repeatType !== "loop" && repeat % 2 === 1
-            ? 0
-            : keyframes.length - 1;
-        return keyframes[index];
+        return controls;
     }
 
     /**
@@ -3633,6 +3707,11 @@
      * keyframe quantity.
      */
     const sampleDelta = 10; //ms
+    /**
+     * Implement a practical max duration for keyframe generation
+     * to prevent infinite loops
+     */
+    const maxDuration = 20000;
     const requiresPregeneratedKeyframes = (valueName, options) => options.type === "spring" ||
         valueName === "backgroundColor" ||
         !isWaapiSupportedEasing(options.ease);
@@ -3641,10 +3720,11 @@
             acceleratedValues.has(valueName) &&
             !options.repeatDelay &&
             options.repeatType !== "mirror" &&
-            options.damping !== 0;
+            options.damping !== 0 &&
+            options.type !== "inertia";
         if (!canAccelerateAnimation)
             return false;
-        let { keyframes, duration = 300, elapsed = 0, ease } = options;
+        let { keyframes, duration = 300, ease } = options;
         /**
          * If this animation needs pre-generated keyframes then generate.
          */
@@ -3652,7 +3732,7 @@
             const sampleAnimation = animateValue({
                 ...options,
                 repeat: 0,
-                elapsed: 0,
+                delay: 0,
             });
             let state = { done: false, value: keyframes[0] };
             const pregeneratedKeyframes = [];
@@ -3661,8 +3741,8 @@
              * we're heading for an infinite loop.
              */
             let t = 0;
-            while (!state.done && t < 20000) {
-                state = sampleAnimation.sample(t, true);
+            while (!state.done && t < maxDuration) {
+                state = sampleAnimation.sample(t);
                 pregeneratedKeyframes.push(state.value);
                 t += sampleDelta;
             }
@@ -3672,7 +3752,6 @@
         }
         const animation = animateStyle(value.owner.current, valueName, keyframes, {
             ...options,
-            delay: -elapsed,
             duration,
             /**
              * This function is currently not called if ease is provided
@@ -3702,10 +3781,10 @@
          */
         return {
             get currentTime() {
-                return animation.currentTime || 0;
+                return millisecondsToSeconds(animation.currentTime || 0);
             },
-            set currentTime(t) {
-                animation.currentTime = t;
+            set currentTime(newTime) {
+                animation.currentTime = secondsToMilliseconds(newTime);
             },
             stop: () => {
                 /**
@@ -3729,113 +3808,22 @@
         };
     }
 
-    /**
-     * Timeout defined in ms
-     */
-    function delay(callback, timeout) {
-        const start = performance.now();
-        const checkElapsed = ({ timestamp }) => {
-            const elapsed = timestamp - start;
-            if (elapsed >= timeout) {
-                cancelSync.read(checkElapsed);
-                callback(elapsed - timeout);
-            }
-        };
-        sync.read(checkElapsed, true);
-        return () => cancelSync.read(checkElapsed);
-    }
-
-    function createInstantAnimation({ keyframes, elapsed, onUpdate, onComplete, }) {
+    function createInstantAnimation({ keyframes, delay: delayBy, onUpdate, onComplete, }) {
         const setValue = () => {
             onUpdate && onUpdate(keyframes[keyframes.length - 1]);
             onComplete && onComplete();
-        };
-        return elapsed ? { stop: delay(setValue, -elapsed) } : setValue();
-    }
-
-    function inertia({ keyframes, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
-        const origin = keyframes[0];
-        let currentAnimation;
-        function isOutOfBounds(v) {
-            return (min !== undefined && v < min) || (max !== undefined && v > max);
-        }
-        function findNearestBoundary(v) {
-            if (min === undefined)
-                return max;
-            if (max === undefined)
-                return min;
-            return Math.abs(min - v) < Math.abs(max - v) ? min : max;
-        }
-        function startAnimation(options) {
-            currentAnimation && currentAnimation.stop();
-            currentAnimation = animateValue({
-                keyframes: [0, 1],
-                velocity: 0,
-                ...options,
-                driver,
-                onUpdate: (v) => {
-                    onUpdate && onUpdate(v);
-                    options.onUpdate && options.onUpdate(v);
-                },
-                onComplete,
-                onStop,
-            });
-        }
-        function startSpring(options) {
-            startAnimation({
-                type: "spring",
-                stiffness: bounceStiffness,
-                damping: bounceDamping,
-                restDelta,
-                ...options,
-            });
-        }
-        if (isOutOfBounds(origin)) {
-            // Start the animation with spring if outside the defined boundaries
-            startSpring({
-                velocity,
-                keyframes: [origin, findNearestBoundary(origin)],
-            });
-        }
-        else {
-            /**
-             * Or if the value is out of bounds, simulate the inertia movement
-             * with the decay animation.
-             *
-             * Pre-calculate the target so we can detect if it's out-of-bounds.
-             * If it is, we want to check per frame when to switch to a spring
-             * animation
-             */
-            let target = power * velocity + origin;
-            if (typeof modifyTarget !== "undefined")
-                target = modifyTarget(target);
-            const boundary = findNearestBoundary(target);
-            const heading = boundary === min ? -1 : 1;
-            let prev;
-            let current;
-            const checkBoundary = (v) => {
-                prev = current;
-                current = v;
-                velocity = velocityPerSecond(v - prev, frameData.delta);
-                if ((heading === 1 && v > boundary) ||
-                    (heading === -1 && v < boundary)) {
-                    startSpring({ keyframes: [v, boundary], velocity });
-                }
+            return {
+                stop: () => { },
+                currentTime: 0,
             };
-            startAnimation({
-                type: "decay",
-                keyframes: [origin, 0],
-                velocity,
-                timeConstant,
-                power,
-                restDelta,
-                modifyTarget,
-                onUpdate: isOutOfBounds(target) ? checkBoundary : undefined,
-            });
-        }
-        return {
-            stop: () => currentAnimation && currentAnimation.stop(),
         };
+        return delayBy
+            ? animateValue({
+                keyframes: [0, 1],
+                duration: delayBy,
+                onComplete: setValue,
+            })
+            : setValue();
     }
 
     const underDampedSpring = {
@@ -3991,7 +3979,7 @@
                 keyframes,
                 velocity: value.getVelocity(),
                 ...valueTransition,
-                elapsed,
+                delay: -elapsed,
                 onUpdate: (v) => {
                     value.set(v);
                     valueTransition.onUpdate && valueTransition.onUpdate(v);
@@ -4011,13 +3999,6 @@
                  */
                 return createInstantAnimation(options);
             }
-            else if (valueTransition.type === "inertia") {
-                /**
-                 * If this is an inertia animation, we currently don't support pre-generating
-                 * keyframes for this as such it must always run on the main thread.
-                 */
-                return inertia(options);
-            }
             /**
              * If there's no transition defined for this value, we can generate
              * unqiue transition settings for this value.
@@ -4702,7 +4683,7 @@
         if (!timestampedPoint) {
             return { x: 0, y: 0 };
         }
-        const time = (lastPoint.timestamp - timestampedPoint.timestamp) / 1000;
+        const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
         if (time === 0) {
             return { x: 0, y: 0 };
         }
@@ -5581,6 +5562,30 @@
         }
     }
 
+    class GroupPlaybackControls {
+        constructor(animations) {
+            this.animations = animations.filter(Boolean);
+        }
+        /**
+         * TODO: Filter out cancelled or stopped animations before returning
+         */
+        get currentTime() {
+            return this.animations[0].currentTime;
+        }
+        /**
+         * currentTime assignment could reasonably run every frame, so
+         * we iterate using a normal loop to avoid function creation.
+         */
+        set currentTime(time) {
+            for (let i = 0; i < this.animations.length; i++) {
+                this.animations[i].currentTime = time;
+            }
+        }
+        stop() {
+            this.animations.forEach((controls) => controls.stop());
+        }
+    }
+
     /**
      * Animate a single value or a `MotionValue`.
      *
@@ -5611,10 +5616,7 @@
     function animate(from, to, transition = {}) {
         const value = isMotionValue(from) ? from : motionValue(from);
         value.start(createMotionValueAnimation("", value, to, transition));
-        return {
-            stop: () => value.stop(),
-            isAnimating: () => value.isAnimating(),
-        };
+        return value.animation || new GroupPlaybackControls([]);
     }
 
     const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
@@ -5959,6 +5961,22 @@
         }
     }
 
+    /**
+     * Timeout defined in ms
+     */
+    function delay(callback, timeout) {
+        const start = performance.now();
+        const checkElapsed = ({ timestamp }) => {
+            const elapsed = timestamp - start;
+            if (elapsed >= timeout) {
+                cancelSync.read(checkElapsed);
+                callback(elapsed - timeout);
+            }
+        };
+        sync.read(checkElapsed, true);
+        return () => cancelSync.read(checkElapsed);
+    }
+
     function record(data) {
         if (window.MotionDebug) {
             window.MotionDebug.record(data);
@@ -7862,7 +7880,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "10.2.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.2.2 may not work as expected.`);
+                    warnOnce(nextValue.version === "10.2.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.2.4 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -9956,6 +9974,16 @@
         return value;
     }
 
+    function useMotionValueEvent(value, event, callback) {
+        /**
+         * useInsertionEffect will create subscriptions before any other
+         * effects will run. Effects run upwards through the tree so it
+         * can be that binding a useLayoutEffect higher up the tree can
+         * miss changes from lower down the tree.
+         */
+        React.useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
+    }
+
     /**
      * Creates a `MotionValue` that updates when the velocity of the provided `MotionValue` changes.
      *
@@ -9969,11 +9997,9 @@
      */
     function useVelocity(value) {
         const velocity = useMotionValue(value.getVelocity());
-        React.useEffect(() => {
-            return value.on("velocityChange", (newVelocity) => {
-                velocity.set(newVelocity);
-            });
-        }, [value]);
+        useMotionValueEvent(value, "velocityChange", (newVelocity) => {
+            velocity.set(newVelocity);
+        });
         return velocity;
     }
 
@@ -10092,16 +10118,6 @@
         return useConstant(() => new WillChangeMotionValue("auto"));
     }
 
-    function useMotionValueEvent(value, event, callback) {
-        /**
-         * useInsertionEffect will create subscriptions before any other
-         * effects will run. Effects run upwards through the tree so it
-         * can be that binding a useLayoutEffect higher up the tree can
-         * miss changes from lower down the tree.
-         */
-        React.useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
-    }
-
     /**
      * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
      *
@@ -10523,7 +10539,8 @@
              */
             sync.update(() => {
                 if (value.animation) {
-                    value.animation.currentTime = performance.now() - sampledTime;
+                    value.animation.currentTime =
+                        performance.now() - millisecondsToSeconds(sampledTime);
                 }
             });
             /**
@@ -10756,7 +10773,6 @@
     exports.filterProps = filterProps;
     exports.frameData = frameData;
     exports.inView = inView;
-    exports.inertia = inertia;
     exports.interpolate = interpolate;
     exports.isBrowser = isBrowser;
     exports.isDragActive = isDragActive;