framer-motion 10.2.3 → 10.2.4

package/dist/cjs/{wrap-27fda06a.js → wrap-62da7859.js}

@@ -157,17 +157,6 @@ const numberValueTypes = {
 const combineFunctions = (a, b) => (v) => b(a(v));
 const pipe = (...transformers) => transformers.reduce(combineFunctions);
 
-/*
-  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
@@ -296,7 +285,7 @@ const processStep = (stepId) => steps[stepId].process(frameData);
 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;
@@ -304,14 +293,14 @@ const processFrame = (timestamp) => {
     isProcessing = false;
     if (runNextFrame) {
         useDefaultElapsed = false;
-        onNextFrame(processFrame);
+        requestAnimationFrame(processFrame);
     }
 };
 const startLoop = () => {
     runNextFrame = true;
     useDefaultElapsed = true;
     if (!isProcessing)
-        onNextFrame(processFrame);
+        requestAnimationFrame(processFrame);
 };
 
 const noop = (any) => any;
@@ -415,7 +404,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.2.3";
+        this.version = "10.2.4";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -661,7 +650,7 @@ class MotionValue {
         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();
             }
@@ -695,7 +684,7 @@ class MotionValue {
         return !!this.animation;
     }
     clearAnimation() {
-        this.animation = null;
+        delete this.animation;
     }
     /**
      * Destroy and clean up subscribers to this `MotionValue`.
@@ -970,11 +959,74 @@ if (process.env.NODE_ENV !== "production") {
  * @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;
@@ -1343,8 +1395,7 @@ const isEasingArray = (ease) => {
 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.
@@ -1369,42 +1420,42 @@ function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duratio
     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
@@ -1445,7 +1496,7 @@ function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, })
     }
     const initialGuess = 5 / duration;
     const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
-    duration = duration * 1000;
+    duration = secondsToMilliseconds(duration);
     if (isNaN(undampedFreq)) {
         return {
             stiffness: 100,
@@ -1502,78 +1553,71 @@ function getSpringOptions(options) {
     }
     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) {
@@ -1585,8 +1629,7 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
                      * 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;
@@ -1603,29 +1646,23 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
             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);
@@ -1635,233 +1672,270 @@ keyframes = [0], velocity = 0, power = 0.8, timeConstant = 350, restDelta = 0.5,
      */
     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;
+        // 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;
         }
-        onUpdate && onUpdate(state.value);
-        if (isComplete) {
-            if (repeatCount === 0) {
-                computedDuration =
-                    computedDuration !== undefined ? computedDuration : elapsed;
-            }
-            if (repeatCount < repeatMax) {
-                hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();
+        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;
+                }
             }
+            const p = currentTime >= totalDuration
+                ? repeatType === "reverse" && iterationIsOdd
+                    ? 0
+                    : 1
+                : clamp(0, 1, iterationProgress);
+            elapsed = p * resolvedDuration;
         }
-    }
-    function play() {
+        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;
 }
 
 /**
@@ -1880,6 +1954,11 @@ const acceleratedValues = new Set([
  * 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);
@@ -1888,10 +1967,11 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         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.
      */
@@ -1899,7 +1979,7 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         const sampleAnimation = animateValue({
             ...options,
             repeat: 0,
-            elapsed: 0,
+            delay: 0,
         });
         let state = { done: false, value: keyframes[0] };
         const pregeneratedKeyframes = [];
@@ -1908,8 +1988,8 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
          * 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;
         }
@@ -1919,7 +1999,6 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     }
     const animation = animateStyle(value.owner.current, valueName, keyframes, {
         ...options,
-        delay: -elapsed,
         duration,
         /**
          * This function is currently not called if ease is provided
@@ -1949,10 +2028,10 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
      */
     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: () => {
             /**
@@ -1976,113 +2055,22 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     };
 }
 
-/**
- * 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 = {
@@ -2238,7 +2226,7 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
             keyframes,
             velocity: value.getVelocity(),
             ...valueTransition,
-            elapsed,
+            delay: -elapsed,
             onUpdate: (v) => {
                 value.set(v);
                 valueTransition.onUpdate && valueTransition.onUpdate(v);
@@ -2258,13 +2246,6 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
              */
             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.
@@ -2311,6 +2292,30 @@ function distance2D(a, b) {
     return Math.sqrt(xDelta ** 2 + yDelta ** 2);
 }
 
+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`.
  *
@@ -2341,9 +2346,23 @@ function distance2D(a, b) {
 function animate(from, to, transition = {}) {
     const value = isMotionValue(from) ? from : motionValue(from);
     value.start(createMotionValueAnimation("", value, to, transition));
-    return {
-        stop: () => value.stop(),
+    return value.animation || new GroupPlaybackControls([]);
+}
+
+/**
+ * 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);
 }
 
 const isCustomValueType = (v) => {
@@ -2876,10 +2895,10 @@ exports.getAnimatableNone = getAnimatableNone;
 exports.getDefaultValueType = getDefaultValueType;
 exports.getValueTransition = getValueTransition;
 exports.inView = inView;
-exports.inertia = inertia;
 exports.instantAnimationState = instantAnimationState;
 exports.interpolate = interpolate;
 exports.isMotionValue = isMotionValue;
+exports.millisecondsToSeconds = millisecondsToSeconds;
 exports.mix = mix;
 exports.motionValue = motionValue;
 exports.moveItem = moveItem;