motion 11.15.0 → 11.16.0

package/dist/motion.dev.js

@@ -21,720 +21,363 @@
         };
     }
 
-    const isDragging = {
-        x: false,
-        y: false,
-    };
-    function isDragActive() {
-        return isDragging.y;
+    function memo(callback) {
+        let result;
+        return () => {
+            if (result === undefined)
+                result = callback();
+            return result;
+        };
     }
 
-    function resolveElements(elementOrSelector, scope, selectorCache) {
-        var _a;
-        if (elementOrSelector instanceof Element) {
-            return [elementOrSelector];
-        }
-        else if (typeof elementOrSelector === "string") {
-            let root = document;
-            if (scope) {
-                // TODO: Refactor to utils package
-                // invariant(
-                //     Boolean(scope.current),
-                //     "Scope provided, but no element detected."
-                // )
-                root = scope.current;
-            }
-            const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
-            return elements ? Array.from(elements) : [];
-        }
-        return Array.from(elementOrSelector);
-    }
+    /*
+      Progress within given range
 
-    function addUniqueItem(arr, item) {
-        if (arr.indexOf(item) === -1)
-            arr.push(item);
-    }
-    function removeItem(arr, item) {
-        const index = arr.indexOf(item);
-        if (index > -1)
-            arr.splice(index, 1);
-    }
+      Given a lower limit and an upper limit, we return the progress
+      (expressed as a number 0-1) represented by the given value, and
+      limit that progress to within 0-1.
 
-    class SubscriptionManager {
-        constructor() {
-            this.subscriptions = [];
+      @param [number]: Lower limit
+      @param [number]: Upper limit
+      @param [number]: Value to find progress within given range
+      @return [number]: Progress of value within range as expressed 0-1
+    */
+    const progress = (from, to, value) => {
+        const toFromDifference = to - from;
+        return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+    };
+
+    /**
+     * Converts seconds to milliseconds
+     *
+     * @param seconds - Time in seconds.
+     * @return milliseconds - Converted time in milliseconds.
+     */
+    const secondsToMilliseconds = (seconds) => seconds * 1000;
+    const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
+
+    const supportsScrollTimeline = memo(() => window.ScrollTimeline !== undefined);
+
+    class BaseGroupPlaybackControls {
+        constructor(animations) {
+            // Bound to accomodate common `return animation.stop` pattern
+            this.stop = () => this.runAll("stop");
+            this.animations = animations.filter(Boolean);
         }
-        add(handler) {
-            addUniqueItem(this.subscriptions, handler);
-            return () => removeItem(this.subscriptions, handler);
+        get finished() {
+            // Support for new finished Promise and legacy thennable API
+            return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
         }
-        notify(a, b, c) {
-            const numSubscriptions = this.subscriptions.length;
-            if (!numSubscriptions)
-                return;
-            if (numSubscriptions === 1) {
-                /**
-                 * If there's only a single handler we can just call it without invoking a loop.
-                 */
-                this.subscriptions[0](a, b, c);
+        /**
+         * TODO: Filter out cancelled or stopped animations before returning
+         */
+        getAll(propName) {
+            return this.animations[0][propName];
+        }
+        setAll(propName, newValue) {
+            for (let i = 0; i < this.animations.length; i++) {
+                this.animations[i][propName] = newValue;
             }
-            else {
-                for (let i = 0; i < numSubscriptions; i++) {
-                    /**
-                     * Check whether the handler exists before firing as it's possible
-                     * the subscriptions were modified during this loop running.
-                     */
-                    const handler = this.subscriptions[i];
-                    handler && handler(a, b, c);
+        }
+        attachTimeline(timeline, fallback) {
+            const subscriptions = this.animations.map((animation) => {
+                if (supportsScrollTimeline() && animation.attachTimeline) {
+                    return animation.attachTimeline(timeline);
+                }
+                else {
+                    return fallback(animation);
                 }
+            });
+            return () => {
+                subscriptions.forEach((cancel, i) => {
+                    cancel && cancel();
+                    this.animations[i].stop();
+                });
+            };
+        }
+        get time() {
+            return this.getAll("time");
+        }
+        set time(time) {
+            this.setAll("time", time);
+        }
+        get speed() {
+            return this.getAll("speed");
+        }
+        set speed(speed) {
+            this.setAll("speed", speed);
+        }
+        get startTime() {
+            return this.getAll("startTime");
+        }
+        get duration() {
+            let max = 0;
+            for (let i = 0; i < this.animations.length; i++) {
+                max = Math.max(max, this.animations[i].duration);
             }
+            return max;
         }
-        getSize() {
-            return this.subscriptions.length;
+        runAll(methodName) {
+            this.animations.forEach((controls) => controls[methodName]());
         }
-        clear() {
-            this.subscriptions.length = 0;
+        flatten() {
+            this.runAll("flatten");
+        }
+        play() {
+            this.runAll("play");
+        }
+        pause() {
+            this.runAll("pause");
+        }
+        cancel() {
+            this.runAll("cancel");
+        }
+        complete() {
+            this.runAll("complete");
         }
     }
 
-    /*
-      Convert velocity into velocity per second
-
-      @param [number]: Unit per frame
-      @param [number]: Frame duration in ms
-    */
-    function velocityPerSecond(velocity, frameDuration) {
-        return frameDuration ? velocity * (1000 / frameDuration) : 0;
+    /**
+     * TODO: This is a temporary class to support the legacy
+     * thennable API
+     */
+    class GroupPlaybackControls extends BaseGroupPlaybackControls {
+        then(onResolve, onReject) {
+            return Promise.all(this.animations).then(onResolve).catch(onReject);
+        }
     }
 
-    const warned = new Set();
-    function warnOnce(condition, message, element) {
-        if (condition || warned.has(message))
-            return;
-        console.warn(message);
-        if (element)
-            console.warn(element);
-        warned.add(message);
+    function getValueTransition$1(transition, key) {
+        return transition
+            ? transition[key] ||
+                transition["default"] ||
+                transition
+            : undefined;
     }
 
-    const MotionGlobalConfig = {
-        skipAnimations: false,
-        useManualTiming: false,
-    };
+    /**
+     * Implement a practical max duration for keyframe generation
+     * to prevent infinite loops
+     */
+    const maxGeneratorDuration = 20000;
+    function calcGeneratorDuration(generator) {
+        let duration = 0;
+        const timeStep = 50;
+        let state = generator.next(duration);
+        while (!state.done && duration < maxGeneratorDuration) {
+            duration += timeStep;
+            state = generator.next(duration);
+        }
+        return duration >= maxGeneratorDuration ? Infinity : duration;
+    }
 
-    function createRenderStep(runNextFrame) {
-        /**
-         * We create and reuse two queues, one to queue jobs for the current frame
-         * and one for the next. We reuse to avoid triggering GC after x frames.
-         */
-        let thisFrame = new Set();
-        let nextFrame = new Set();
-        /**
-         * Track whether we're currently processing jobs in this step. This way
-         * we can decide whether to schedule new jobs for this frame or next.
-         */
-        let isProcessing = false;
-        let flushNextFrame = false;
-        /**
-         * A set of processes which were marked keepAlive when scheduled.
-         */
-        const toKeepAlive = new WeakSet();
-        let latestFrameData = {
-            delta: 0.0,
-            timestamp: 0.0,
-            isProcessing: false,
+    /**
+     * Create a progress => progress easing function from a generator.
+     */
+    function createGeneratorEasing(options, scale = 100, createGenerator) {
+        const generator = createGenerator({ ...options, keyframes: [0, scale] });
+        const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+        return {
+            type: "keyframes",
+            ease: (progress) => {
+                return generator.next(duration * progress).value / scale;
+            },
+            duration: millisecondsToSeconds(duration),
         };
-        function triggerCallback(callback) {
-            if (toKeepAlive.has(callback)) {
-                step.schedule(callback);
-                runNextFrame();
-            }
-            callback(latestFrameData);
+    }
+
+    function isGenerator(type) {
+        return typeof type === "function";
+    }
+
+    function attachTimeline(animation, timeline) {
+        animation.timeline = timeline;
+        animation.onfinish = null;
+    }
+
+    class NativeAnimationControls {
+        constructor(animation) {
+            this.animation = animation;
         }
-        const step = {
-            /**
-             * Schedule a process to run on the next frame.
-             */
-            schedule: (callback, keepAlive = false, immediate = false) => {
-                const addToCurrentFrame = immediate && isProcessing;
-                const queue = addToCurrentFrame ? thisFrame : nextFrame;
-                if (keepAlive)
-                    toKeepAlive.add(callback);
-                if (!queue.has(callback))
-                    queue.add(callback);
-                return callback;
-            },
-            /**
-             * Cancel the provided callback from running on the next frame.
-             */
-            cancel: (callback) => {
-                nextFrame.delete(callback);
-                toKeepAlive.delete(callback);
-            },
-            /**
-             * Execute all schedule callbacks.
-             */
-            process: (frameData) => {
-                latestFrameData = frameData;
-                /**
-                 * If we're already processing we've probably been triggered by a flushSync
-                 * inside an existing process. Instead of executing, mark flushNextFrame
-                 * as true and ensure we flush the following frame at the end of this one.
-                 */
-                if (isProcessing) {
-                    flushNextFrame = true;
-                    return;
-                }
-                isProcessing = true;
-                [thisFrame, nextFrame] = [nextFrame, thisFrame];
-                // Execute this frame
-                thisFrame.forEach(triggerCallback);
-                // Clear the frame so no callbacks remain. This is to avoid
-                // memory leaks should this render step not run for a while.
-                thisFrame.clear();
-                isProcessing = false;
-                if (flushNextFrame) {
-                    flushNextFrame = false;
-                    step.process(frameData);
-                }
-            },
-        };
-        return step;
-    }
-
-    const stepsOrder = [
-        "read", // Read
-        "resolveKeyframes", // Write/Read/Write/Read
-        "update", // Compute
-        "preRender", // Compute
-        "render", // Write
-        "postRender", // Compute
-    ];
-    const maxElapsed$1 = 40;
-    function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
-        let runNextFrame = false;
-        let useDefaultElapsed = true;
-        const state = {
-            delta: 0.0,
-            timestamp: 0.0,
-            isProcessing: false,
-        };
-        const flagRunNextFrame = () => (runNextFrame = true);
-        const steps = stepsOrder.reduce((acc, key) => {
-            acc[key] = createRenderStep(flagRunNextFrame);
-            return acc;
-        }, {});
-        const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
-        const processBatch = () => {
-            const timestamp = performance.now();
-            runNextFrame = false;
-            state.delta = useDefaultElapsed
-                ? 1000 / 60
-                : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
-            state.timestamp = timestamp;
-            state.isProcessing = true;
-            // Unrolled render loop for better per-frame performance
-            read.process(state);
-            resolveKeyframes.process(state);
-            update.process(state);
-            preRender.process(state);
-            render.process(state);
-            postRender.process(state);
-            state.isProcessing = false;
-            if (runNextFrame && allowKeepAlive) {
-                useDefaultElapsed = false;
-                scheduleNextBatch(processBatch);
+        get duration() {
+            var _a, _b, _c;
+            const durationInMs = ((_b = (_a = this.animation) === null || _a === void 0 ? void 0 : _a.effect) === null || _b === void 0 ? void 0 : _b.getComputedTiming().duration) ||
+                ((_c = this.options) === null || _c === void 0 ? void 0 : _c.duration) ||
+                300;
+            return millisecondsToSeconds(Number(durationInMs));
+        }
+        get time() {
+            var _a;
+            if (this.animation) {
+                return millisecondsToSeconds(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
             }
-        };
-        const wake = () => {
-            runNextFrame = true;
-            useDefaultElapsed = true;
-            if (!state.isProcessing) {
-                scheduleNextBatch(processBatch);
+            return 0;
+        }
+        set time(newTime) {
+            if (this.animation) {
+                this.animation.currentTime = secondsToMilliseconds(newTime);
             }
-        };
-        const schedule = stepsOrder.reduce((acc, key) => {
-            const step = steps[key];
-            acc[key] = (process, keepAlive = false, immediate = false) => {
-                if (!runNextFrame)
-                    wake();
-                return step.schedule(process, keepAlive, immediate);
-            };
-            return acc;
-        }, {});
-        const cancel = (process) => {
-            for (let i = 0; i < stepsOrder.length; i++) {
-                steps[stepsOrder[i]].cancel(process);
+        }
+        get speed() {
+            return this.animation ? this.animation.playbackRate : 1;
+        }
+        set speed(newSpeed) {
+            if (this.animation) {
+                this.animation.playbackRate = newSpeed;
             }
-        };
-        return { schedule, cancel, state, steps };
+        }
+        get state() {
+            return this.animation ? this.animation.playState : "finished";
+        }
+        get startTime() {
+            return this.animation ? this.animation.startTime : null;
+        }
+        get finished() {
+            return this.animation ? this.animation.finished : Promise.resolve();
+        }
+        play() {
+            this.animation && this.animation.play();
+        }
+        pause() {
+            this.animation && this.animation.pause();
+        }
+        stop() {
+            if (!this.animation ||
+                this.state === "idle" ||
+                this.state === "finished") {
+                return;
+            }
+            if (this.animation.commitStyles) {
+                this.animation.commitStyles();
+            }
+            this.cancel();
+        }
+        flatten() {
+            var _a;
+            if (!this.animation)
+                return;
+            (_a = this.animation.effect) === null || _a === void 0 ? void 0 : _a.updateTiming({ easing: "linear" });
+        }
+        attachTimeline(timeline) {
+            if (this.animation)
+                attachTimeline(this.animation, timeline);
+            return noop;
+        }
+        complete() {
+            this.animation && this.animation.finish();
+        }
+        cancel() {
+            try {
+                this.animation && this.animation.cancel();
+            }
+            catch (e) { }
+        }
     }
 
-    const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+    const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
 
-    let now;
-    function clearTime() {
-        now = undefined;
-    }
     /**
-     * An eventloop-synchronous alternative to performance.now().
-     *
-     * Ensures that time measurements remain consistent within a synchronous context.
-     * Usually calling performance.now() twice within the same synchronous context
-     * will return different values which isn't useful for animations when we're usually
-     * trying to sync animations to the same frame.
+     * Add the ability for test suites to manually set support flags
+     * to better test more environments.
      */
-    const time = {
-        now: () => {
-            if (now === undefined) {
-                time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming
-                    ? frameData.timestamp
-                    : performance.now());
-            }
-            return now;
-        },
-        set: (newTime) => {
-            now = newTime;
-            queueMicrotask(clearTime);
-        },
+    const supportsFlags = {
+        linearEasing: undefined,
     };
 
-    /**
-     * Maximum time between the value of two frames, beyond which we
-     * assume the velocity has since been 0.
-     */
-    const MAX_VELOCITY_DELTA = 30;
-    const isFloat = (value) => {
-        return !isNaN(parseFloat(value));
+    function memoSupports(callback, supportsFlag) {
+        const memoized = memo(callback);
+        return () => { var _a; return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized(); };
+    }
+
+    const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
+        try {
+            document
+                .createElement("div")
+                .animate({ opacity: 0 }, { easing: "linear(0, 1)" });
+        }
+        catch (e) {
+            return false;
+        }
+        return true;
+    }, "linearEasing");
+
+    const generateLinearEasing = (easing, duration, // as milliseconds
+    resolution = 10 // as milliseconds
+    ) => {
+        let points = "";
+        const numPoints = Math.max(Math.round(duration / resolution), 2);
+        for (let i = 0; i < numPoints; i++) {
+            points += easing(progress(0, numPoints - 1, i)) + ", ";
+        }
+        return `linear(${points.substring(0, points.length - 2)})`;
     };
-    /**
-     * `MotionValue` is used to track the state and velocity of motion values.
-     *
-     * @public
-     */
-    class MotionValue {
-        /**
-         * @param init - The initiating value
-         * @param config - Optional configuration options
-         *
-         * -  `transformer`: A function to transform incoming values with.
-         *
-         * @internal
-         */
-        constructor(init, options = {}) {
-            /**
-             * 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 = "11.15.0";
-            /**
-             * Tracks whether this value can output a velocity. Currently this is only true
-             * if the value is numerical, but we might be able to widen the scope here and support
-             * other value types.
-             *
-             * @internal
-             */
-            this.canTrackVelocity = null;
-            /**
-             * An object containing a SubscriptionManager for each active event.
-             */
-            this.events = {};
-            this.updateAndNotify = (v, render = true) => {
-                const currentTime = time.now();
-                /**
-                 * If we're updating the value during another frame or eventloop
-                 * than the previous frame, then the we set the previous frame value
-                 * to current.
-                 */
-                if (this.updatedAt !== currentTime) {
-                    this.setPrevFrameValue();
-                }
-                this.prev = this.current;
-                this.setCurrent(v);
-                // Update update subscribers
-                if (this.current !== this.prev && this.events.change) {
-                    this.events.change.notify(this.current);
-                }
-                // Update render subscribers
-                if (render && this.events.renderRequest) {
-                    this.events.renderRequest.notify(this.current);
-                }
-            };
-            this.hasAnimated = false;
-            this.setCurrent(init);
-            this.owner = options.owner;
-        }
-        setCurrent(current) {
-            this.current = current;
-            this.updatedAt = time.now();
-            if (this.canTrackVelocity === null && current !== undefined) {
-                this.canTrackVelocity = isFloat(this.current);
-            }
-        }
-        setPrevFrameValue(prevFrameValue = this.current) {
-            this.prevFrameValue = prevFrameValue;
-            this.prevUpdatedAt = this.updatedAt;
-        }
-        /**
-         * Adds a function that will be notified when the `MotionValue` is updated.
-         *
-         * It returns a function that, when called, will cancel the subscription.
-         *
-         * When calling `onChange` inside a React component, it should be wrapped with the
-         * `useEffect` hook. As it returns an unsubscribe function, this should be returned
-         * from the `useEffect` function to ensure you don't add duplicate subscribers..
-         *
-         * ```jsx
-         * export const MyComponent = () => {
-         *   const x = useMotionValue(0)
-         *   const y = useMotionValue(0)
-         *   const opacity = useMotionValue(1)
-         *
-         *   useEffect(() => {
-         *     function updateOpacity() {
-         *       const maxXY = Math.max(x.get(), y.get())
-         *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
-         *       opacity.set(newOpacity)
-         *     }
-         *
-         *     const unsubscribeX = x.on("change", updateOpacity)
-         *     const unsubscribeY = y.on("change", updateOpacity)
-         *
-         *     return () => {
-         *       unsubscribeX()
-         *       unsubscribeY()
-         *     }
-         *   }, [])
-         *
-         *   return <motion.div style={{ x }} />
-         * }
-         * ```
-         *
-         * @param subscriber - A function that receives the latest value.
-         * @returns A function that, when called, will cancel this subscription.
-         *
-         * @deprecated
-         */
-        onChange(subscription) {
-            {
-                warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
-            }
-            return this.on("change", subscription);
-        }
-        on(eventName, callback) {
-            if (!this.events[eventName]) {
-                this.events[eventName] = new SubscriptionManager();
-            }
-            const unsubscribe = this.events[eventName].add(callback);
-            if (eventName === "change") {
-                return () => {
-                    unsubscribe();
-                    /**
-                     * If we have no more change listeners by the start
-                     * of the next frame, stop active animations.
-                     */
-                    frame.read(() => {
-                        if (!this.events.change.getSize()) {
-                            this.stop();
-                        }
-                    });
-                };
-            }
-            return unsubscribe;
-        }
-        clearListeners() {
-            for (const eventManagers in this.events) {
-                this.events[eventManagers].clear();
-            }
-        }
-        /**
-         * Attaches a passive effect to the `MotionValue`.
-         *
-         * @internal
-         */
-        attach(passiveEffect, stopPassiveEffect) {
-            this.passiveEffect = passiveEffect;
-            this.stopPassiveEffect = stopPassiveEffect;
-        }
-        /**
-         * Sets the state of the `MotionValue`.
-         *
-         * @remarks
-         *
-         * ```jsx
-         * const x = useMotionValue(0)
-         * x.set(10)
-         * ```
-         *
-         * @param latest - Latest value to set.
-         * @param render - Whether to notify render subscribers. Defaults to `true`
-         *
-         * @public
-         */
-        set(v, render = true) {
-            if (!render || !this.passiveEffect) {
-                this.updateAndNotify(v, render);
-            }
-            else {
-                this.passiveEffect(v, this.updateAndNotify);
-            }
-        }
-        setWithVelocity(prev, current, delta) {
-            this.set(current);
-            this.prev = undefined;
-            this.prevFrameValue = prev;
-            this.prevUpdatedAt = this.updatedAt - delta;
-        }
-        /**
-         * Set the state of the `MotionValue`, stopping any active animations,
-         * effects, and resets velocity to `0`.
-         */
-        jump(v, endAnimation = true) {
-            this.updateAndNotify(v);
-            this.prev = v;
-            this.prevUpdatedAt = this.prevFrameValue = undefined;
-            endAnimation && this.stop();
-            if (this.stopPassiveEffect)
-                this.stopPassiveEffect();
-        }
-        /**
-         * Returns the latest state of `MotionValue`
-         *
-         * @returns - The latest state of `MotionValue`
-         *
-         * @public
-         */
-        get() {
-            return this.current;
-        }
-        /**
-         * @public
-         */
-        getPrevious() {
-            return this.prev;
-        }
-        /**
-         * Returns the latest velocity of `MotionValue`
-         *
-         * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-         *
-         * @public
-         */
-        getVelocity() {
-            const currentTime = time.now();
-            if (!this.canTrackVelocity ||
-                this.prevFrameValue === undefined ||
-                currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {
-                return 0;
-            }
-            const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
-            // Casts because of parseFloat's poor typing
-            return velocityPerSecond(parseFloat(this.current) -
-                parseFloat(this.prevFrameValue), delta);
-        }
-        /**
-         * Registers a new animation to control this `MotionValue`. Only one
-         * animation can drive a `MotionValue` at one time.
-         *
-         * ```jsx
-         * value.start()
-         * ```
-         *
-         * @param animation - A function that starts the provided animation
-         *
-         * @internal
-         */
-        start(startAnimation) {
-            this.stop();
-            return new Promise((resolve) => {
-                this.hasAnimated = true;
-                this.animation = startAnimation(resolve);
-                if (this.events.animationStart) {
-                    this.events.animationStart.notify();
-                }
-            }).then(() => {
-                if (this.events.animationComplete) {
-                    this.events.animationComplete.notify();
-                }
-                this.clearAnimation();
-            });
-        }
-        /**
-         * Stop the currently active animation.
-         *
-         * @public
-         */
-        stop() {
-            if (this.animation) {
-                this.animation.stop();
-                if (this.events.animationCancel) {
-                    this.events.animationCancel.notify();
-                }
-            }
-            this.clearAnimation();
-        }
-        /**
-         * Returns `true` if this value is currently animating.
-         *
-         * @public
-         */
-        isAnimating() {
-            return !!this.animation;
-        }
-        clearAnimation() {
-            delete this.animation;
-        }
-        /**
-         * Destroy and clean up subscribers to this `MotionValue`.
-         *
-         * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
-         * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
-         * created a `MotionValue` via the `motionValue` function.
-         *
-         * @public
-         */
-        destroy() {
-            this.clearListeners();
-            this.stop();
-            if (this.stopPassiveEffect) {
-                this.stopPassiveEffect();
-            }
-        }
-    }
-    function motionValue(init, options) {
-        return new MotionValue(init, options);
-    }
 
-    function memo(callback) {
-        let result;
-        return () => {
-            if (result === undefined)
-                result = callback();
-            return result;
-        };
+    function isWaapiSupportedEasing(easing) {
+        return Boolean((typeof easing === "function" && supportsLinearEasing()) ||
+            !easing ||
+            (typeof easing === "string" &&
+                (easing in supportedWaapiEasing || supportsLinearEasing())) ||
+            isBezierDefinition(easing) ||
+            (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
     }
-
-    const supportsScrollTimeline = memo(() => window.ScrollTimeline !== undefined);
-
-    class GroupPlaybackControls {
-        constructor(animations) {
-            // Bound to accomodate common `return animation.stop` pattern
-            this.stop = () => this.runAll("stop");
-            this.animations = animations.filter(Boolean);
-        }
-        then(onResolve, onReject) {
-            return Promise.all(this.animations).then(onResolve).catch(onReject);
-        }
-        /**
-         * TODO: Filter out cancelled or stopped animations before returning
-         */
-        getAll(propName) {
-            return this.animations[0][propName];
-        }
-        setAll(propName, newValue) {
-            for (let i = 0; i < this.animations.length; i++) {
-                this.animations[i][propName] = newValue;
-            }
-        }
-        attachTimeline(timeline, fallback) {
-            const subscriptions = this.animations.map((animation) => {
-                if (supportsScrollTimeline() && animation.attachTimeline) {
-                    return animation.attachTimeline(timeline);
-                }
-                else {
-                    return fallback(animation);
-                }
-            });
-            return () => {
-                subscriptions.forEach((cancel, i) => {
-                    cancel && cancel();
-                    this.animations[i].stop();
-                });
-            };
-        }
-        get time() {
-            return this.getAll("time");
-        }
-        set time(time) {
-            this.setAll("time", time);
-        }
-        get speed() {
-            return this.getAll("speed");
-        }
-        set speed(speed) {
-            this.setAll("speed", speed);
-        }
-        get startTime() {
-            return this.getAll("startTime");
-        }
-        get duration() {
-            let max = 0;
-            for (let i = 0; i < this.animations.length; i++) {
-                max = Math.max(max, this.animations[i].duration);
-            }
-            return max;
-        }
-        runAll(methodName) {
-            this.animations.forEach((controls) => controls[methodName]());
-        }
-        flatten() {
-            this.runAll("flatten");
+    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: /*@__PURE__*/ cubicBezierAsString([0, 0.65, 0.55, 1]),
+        circOut: /*@__PURE__*/ cubicBezierAsString([0.55, 0, 1, 0.45]),
+        backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
+        backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
+    };
+    function mapEasingToNativeEasing(easing, duration) {
+        if (!easing) {
+            return undefined;
         }
-        play() {
-            this.runAll("play");
+        else if (typeof easing === "function" && supportsLinearEasing()) {
+            return generateLinearEasing(easing, duration);
         }
-        pause() {
-            this.runAll("pause");
+        else if (isBezierDefinition(easing)) {
+            return cubicBezierAsString(easing);
         }
-        cancel() {
-            this.runAll("cancel");
+        else if (Array.isArray(easing)) {
+            return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) ||
+                supportedWaapiEasing.easeOut);
         }
-        complete() {
-            this.runAll("complete");
+        else {
+            return supportedWaapiEasing[easing];
         }
     }
 
-    /*
-      Progress within given range
-
-      Given a lower limit and an upper limit, we return the progress
-      (expressed as a number 0-1) represented by the given value, and
-      limit that progress to within 0-1.
-
-      @param [number]: Lower limit
-      @param [number]: Upper limit
-      @param [number]: Value to find progress within given range
-      @return [number]: Progress of value within range as expressed 0-1
-    */
-    const progress = (from, to, value) => {
-        const toFromDifference = to - from;
-        return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+    const isDragging = {
+        x: false,
+        y: false,
     };
+    function isDragActive() {
+        return isDragging.y;
+    }
 
-    const generateLinearEasing = (easing, duration, // as milliseconds
-    resolution = 10 // as milliseconds
-    ) => {
-        let points = "";
-        const numPoints = Math.max(Math.round(duration / resolution), 2);
-        for (let i = 0; i < numPoints; i++) {
-            points += easing(progress(0, numPoints - 1, i)) + ", ";
+    function resolveElements(elementOrSelector, scope, selectorCache) {
+        var _a;
+        if (elementOrSelector instanceof Element) {
+            return [elementOrSelector];
         }
-        return `linear(${points.substring(0, points.length - 2)})`;
-    };
-
-    /**
-     * Converts seconds to milliseconds
-     *
-     * @param seconds - Time in seconds.
-     * @return milliseconds - Converted time in milliseconds.
-     */
-    const secondsToMilliseconds = (seconds) => seconds * 1000;
-    const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
-
-    const velocitySampleDuration = 5; // ms
-    function calcGeneratorVelocity(resolveValue, t, current) {
-        const prevT = Math.max(t - velocitySampleDuration, 0);
-        return velocityPerSecond(current - resolveValue(prevT), t - prevT);
+        else if (typeof elementOrSelector === "string") {
+            let root = document;
+            if (scope) {
+                // TODO: Refactor to utils package
+                // invariant(
+                //     Boolean(scope.current),
+                //     "Scope provided, but no element detected."
+                // )
+                root = scope.current;
+            }
+            const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+            return elements ? Array.from(elements) : [];
+        }
+        return Array.from(elementOrSelector);
     }
 
     const clamp = (min, max, v) => {
@@ -745,6 +388,22 @@
         return v;
     };
 
+    /*
+      Convert velocity into velocity per second
+
+      @param [number]: Unit per frame
+      @param [number]: Frame duration in ms
+    */
+    function velocityPerSecond(velocity, frameDuration) {
+        return frameDuration ? velocity * (1000 / frameDuration) : 0;
+    }
+
+    const velocitySampleDuration = 5; // ms
+    function calcGeneratorVelocity(resolveValue, t, current) {
+        const prevT = Math.max(t - velocitySampleDuration, 0);
+        return velocityPerSecond(current - resolveValue(prevT), t - prevT);
+    }
+
     const springDefaults = {
         // Default spring physics
         stiffness: 100,
@@ -851,22 +510,6 @@
         return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
     }
 
-    /**
-     * Implement a practical max duration for keyframe generation
-     * to prevent infinite loops
-     */
-    const maxGeneratorDuration = 20000;
-    function calcGeneratorDuration(generator) {
-        let duration = 0;
-        const timeStep = 50;
-        let state = generator.next(duration);
-        while (!state.done && duration < maxGeneratorDuration) {
-            duration += timeStep;
-            state = generator.next(duration);
-        }
-        return duration >= maxGeneratorDuration ? Infinity : duration;
-    }
-
     const durationKeys = ["duration", "bounce"];
     const physicsKeys = ["stiffness", "damping", "mass"];
     function isSpringType(options, keys) {
@@ -888,7 +531,9 @@
                 const visualDuration = options.visualDuration;
                 const root = (2 * Math.PI) / (visualDuration * 1.2);
                 const stiffness = root * root;
-                const damping = 2 * clamp(0.05, 1, 1 - options.bounce) * Math.sqrt(stiffness);
+                const damping = 2 *
+                    clamp(0.05, 1, 1 - (options.bounce || 0)) *
+                    Math.sqrt(stiffness);
                 springOptions = {
                     ...springOptions,
                     mass: springDefaults.mass,
@@ -906,610 +551,1180 @@
                 springOptions.isResolvedFromDuration = true;
             }
         }
-        return springOptions;
+        return springOptions;
+    }
+    function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
+        const options = typeof optionsOrVisualDuration !== "object"
+            ? {
+                visualDuration: optionsOrVisualDuration,
+                keyframes: [0, 1],
+                bounce,
+            }
+            : optionsOrVisualDuration;
+        let { restSpeed, restDelta } = options;
+        const origin = options.keyframes[0];
+        const target = options.keyframes[options.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, duration, velocity, isResolvedFromDuration, } = getSpringOptions({
+            ...options,
+            velocity: -millisecondsToSeconds(options.velocity || 0),
+        });
+        const initialVelocity = velocity || 0.0;
+        const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
+        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
+            ? springDefaults.restSpeed.granular
+            : springDefaults.restSpeed.default);
+        restDelta || (restDelta = isGranularScale
+            ? springDefaults.restDelta.granular
+            : springDefaults.restDelta.default);
+        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);
+            };
+        }
+        const generator = {
+            calculatedDuration: isResolvedFromDuration ? duration || null : null,
+            next: (t) => {
+                const current = resolveSpring(t);
+                if (!isResolvedFromDuration) {
+                    let currentVelocity = 0.0;
+                    /**
+                     * We only need to calculate velocity for under-damped springs
+                     * as over- and critically-damped springs can't overshoot, so
+                     * checking only for displacement is enough.
+                     */
+                    if (dampingRatio < 1) {
+                        currentVelocity =
+                            t === 0
+                                ? secondsToMilliseconds(initialVelocity)
+                                : calcGeneratorVelocity(resolveSpring, t, current);
+                    }
+                    const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
+                    const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
+                    state.done =
+                        isBelowVelocityThreshold && isBelowDisplacementThreshold;
+                }
+                else {
+                    state.done = t >= duration;
+                }
+                state.value = state.done ? target : current;
+                return state;
+            },
+            toString: () => {
+                const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+                const easing = generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
+                return calculatedDuration + "ms " + easing;
+            },
+        };
+        return generator;
+    }
+
+    const wrap = (min, max, v) => {
+        const rangeSize = max - min;
+        return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
+    };
+
+    const isEasingArray = (ease) => {
+        return Array.isArray(ease) && typeof ease[0] !== "number";
+    };
+
+    function getEasingForSegment(easing, i) {
+        return isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
+    }
+
+    /*
+      Value in range from progress
+
+      Given a lower limit and an upper limit, we return the value within
+      that range as expressed by progress (usually a number from 0 to 1)
+
+      So progress = 0.5 would change
+
+      from -------- to
+
+      to
+
+      from ---- to
+
+      E.g. from = 10, to = 20, progress = 0.5 => 15
+
+      @param [number]: Lower limit of range
+      @param [number]: Upper limit of range
+      @param [number]: The progress between lower and upper limits expressed 0-1
+      @return [number]: Value as calculated from progress within range (not limited within range)
+    */
+    const mixNumber$1 = (from, to, progress) => {
+        return from + (to - from) * progress;
+    };
+
+    function fillOffset(offset, remaining) {
+        const min = offset[offset.length - 1];
+        for (let i = 1; i <= remaining; i++) {
+            const offsetProgress = progress(0, remaining, i);
+            offset.push(mixNumber$1(min, 1, offsetProgress));
+        }
+    }
+
+    function defaultOffset$1(arr) {
+        const offset = [0];
+        fillOffset(offset, arr.length - 1);
+        return offset;
+    }
+
+    const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
+    function isDOMKeyframes(keyframes) {
+        return typeof keyframes === "object" && !Array.isArray(keyframes);
+    }
+
+    function resolveSubjects(subject, keyframes, scope, selectorCache) {
+        if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
+            return resolveElements(subject, scope, selectorCache);
+        }
+        else if (subject instanceof NodeList) {
+            return Array.from(subject);
+        }
+        else if (Array.isArray(subject)) {
+            return subject;
+        }
+        else {
+            return [subject];
+        }
+    }
+
+    function calculateRepeatDuration(duration, repeat, _repeatDelay) {
+        return duration * (repeat + 1);
+    }
+
+    /**
+     * Given a absolute or relative time definition and current/prev time state of the sequence,
+     * calculate an absolute time for the next keyframes.
+     */
+    function calcNextTime(current, next, prev, labels) {
+        var _a;
+        if (typeof next === "number") {
+            return next;
+        }
+        else if (next.startsWith("-") || next.startsWith("+")) {
+            return Math.max(0, current + parseFloat(next));
+        }
+        else if (next === "<") {
+            return prev;
+        }
+        else {
+            return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
+        }
+    }
+
+    function addUniqueItem(arr, item) {
+        if (arr.indexOf(item) === -1)
+            arr.push(item);
+    }
+    function removeItem(arr, item) {
+        const index = arr.indexOf(item);
+        if (index > -1)
+            arr.splice(index, 1);
+    }
+
+    function eraseKeyframes(sequence, startTime, endTime) {
+        for (let i = 0; i < sequence.length; i++) {
+            const keyframe = sequence[i];
+            if (keyframe.at > startTime && keyframe.at < endTime) {
+                removeItem(sequence, keyframe);
+                // If we remove this item we have to push the pointer back one
+                i--;
+            }
+        }
     }
-    function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
-        const options = typeof optionsOrVisualDuration !== "object"
-            ? {
-                visualDuration: optionsOrVisualDuration,
-                keyframes: [0, 1],
-                bounce,
-            }
-            : optionsOrVisualDuration;
-        let { restSpeed, restDelta } = options;
-        const origin = options.keyframes[0];
-        const target = options.keyframes[options.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, duration, velocity, isResolvedFromDuration, } = getSpringOptions({
-            ...options,
-            velocity: -millisecondsToSeconds(options.velocity || 0),
-        });
-        const initialVelocity = velocity || 0.0;
-        const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
-        const initialDelta = target - origin;
-        const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));
+    function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
         /**
-         * 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.
+         * Erase every existing value between currentTime and targetTime,
+         * this will essentially splice this timeline into any currently
+         * defined ones.
          */
-        const isGranularScale = Math.abs(initialDelta) < 5;
-        restSpeed || (restSpeed = isGranularScale
-            ? springDefaults.restSpeed.granular
-            : springDefaults.restSpeed.default);
-        restDelta || (restDelta = isGranularScale
-            ? springDefaults.restDelta.granular
-            : springDefaults.restDelta.default);
-        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)));
-            };
+        eraseKeyframes(sequence, startTime, endTime);
+        for (let i = 0; i < keyframes.length; i++) {
+            sequence.push({
+                value: keyframes[i],
+                at: mixNumber$1(startTime, endTime, offset[i]),
+                easing: getEasingForSegment(easing, i),
+            });
         }
-        else if (dampingRatio === 1) {
-            // Critically damped spring
-            resolveSpring = (t) => target -
-                Math.exp(-undampedAngularFreq * t) *
-                    (initialDelta +
-                        (initialVelocity + undampedAngularFreq * initialDelta) * t);
+    }
+
+    /**
+     * Take an array of times that represent repeated keyframes. For instance
+     * if we have original times of [0, 0.5, 1] then our repeated times will
+     * be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back
+     * down to a 0-1 scale.
+     */
+    function normalizeTimes(times, repeat) {
+        for (let i = 0; i < times.length; i++) {
+            times[i] = times[i] / (repeat + 1);
+        }
+    }
+
+    function compareByTime(a, b) {
+        if (a.at === b.at) {
+            if (a.value === null)
+                return 1;
+            if (b.value === null)
+                return -1;
+            return 0;
         }
         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);
-            };
+            return a.at - b.at;
         }
-        const generator = {
-            calculatedDuration: isResolvedFromDuration ? duration || null : null,
-            next: (t) => {
-                const current = resolveSpring(t);
-                if (!isResolvedFromDuration) {
-                    let currentVelocity = 0.0;
+    }
+
+    const defaultSegmentEasing = "easeInOut";
+    const MAX_REPEAT = 20;
+    function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
+        const defaultDuration = defaultTransition.duration || 0.3;
+        const animationDefinitions = new Map();
+        const sequences = new Map();
+        const elementCache = {};
+        const timeLabels = new Map();
+        let prevTime = 0;
+        let currentTime = 0;
+        let totalDuration = 0;
+        /**
+         * Build the timeline by mapping over the sequence array and converting
+         * the definitions into keyframes and offsets with absolute time values.
+         * These will later get converted into relative offsets in a second pass.
+         */
+        for (let i = 0; i < sequence.length; i++) {
+            const segment = sequence[i];
+            /**
+             * If this is a timeline label, mark it and skip the rest of this iteration.
+             */
+            if (typeof segment === "string") {
+                timeLabels.set(segment, currentTime);
+                continue;
+            }
+            else if (!Array.isArray(segment)) {
+                timeLabels.set(segment.name, calcNextTime(currentTime, segment.at, prevTime, timeLabels));
+                continue;
+            }
+            let [subject, keyframes, transition = {}] = segment;
+            /**
+             * If a relative or absolute time value has been specified we need to resolve
+             * it in relation to the currentTime.
+             */
+            if (transition.at !== undefined) {
+                currentTime = calcNextTime(currentTime, transition.at, prevTime, timeLabels);
+            }
+            /**
+             * Keep track of the maximum duration in this definition. This will be
+             * applied to currentTime once the definition has been parsed.
+             */
+            let maxDuration = 0;
+            const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
+                const valueKeyframesAsList = keyframesAsList(valueKeyframes);
+                const { delay = 0, times = defaultOffset$1(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
+                let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
+                /**
+                 * Resolve stagger() if defined.
+                 */
+                const calculatedDelay = typeof delay === "function"
+                    ? delay(elementIndex, numSubjects)
+                    : delay;
+                /**
+                 * If this animation should and can use a spring, generate a spring easing function.
+                 */
+                const numKeyframes = valueKeyframesAsList.length;
+                const createGenerator = isGenerator(type)
+                    ? type
+                    : generators === null || generators === void 0 ? void 0 : generators[type];
+                if (numKeyframes <= 2 && createGenerator) {
+                    /**
+                     * As we're creating an easing function from a spring,
+                     * ideally we want to generate it using the real distance
+                     * between the two keyframes. However this isn't always
+                     * possible - in these situations we use 0-100.
+                     */
+                    let absoluteDelta = 100;
+                    if (numKeyframes === 2 &&
+                        isNumberKeyframesArray(valueKeyframesAsList)) {
+                        const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
+                        absoluteDelta = Math.abs(delta);
+                    }
+                    const springTransition = { ...remainingTransition };
+                    if (duration !== undefined) {
+                        springTransition.duration = secondsToMilliseconds(duration);
+                    }
+                    const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
+                    ease = springEasing.ease;
+                    duration = springEasing.duration;
+                }
+                duration !== null && duration !== void 0 ? duration : (duration = defaultDuration);
+                const startTime = currentTime + calculatedDelay;
+                /**
+                 * If there's only one time offset of 0, fill in a second with length 1
+                 */
+                if (times.length === 1 && times[0] === 0) {
+                    times[1] = 1;
+                }
+                /**
+                 * Fill out if offset if fewer offsets than keyframes
+                 */
+                const remainder = times.length - valueKeyframesAsList.length;
+                remainder > 0 && fillOffset(times, remainder);
+                /**
+                 * If only one value has been set, ie [1], push a null to the start of
+                 * the keyframe array. This will let us mark a keyframe at this point
+                 * that will later be hydrated with the previous value.
+                 */
+                valueKeyframesAsList.length === 1 &&
+                    valueKeyframesAsList.unshift(null);
+                /**
+                 * Handle repeat options
+                 */
+                if (repeat) {
+                    exports.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                    duration = calculateRepeatDuration(duration, repeat);
+                    const originalKeyframes = [...valueKeyframesAsList];
+                    const originalTimes = [...times];
+                    ease = Array.isArray(ease) ? [...ease] : [ease];
+                    const originalEase = [...ease];
+                    for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
+                        valueKeyframesAsList.push(...originalKeyframes);
+                        for (let keyframeIndex = 0; keyframeIndex < originalKeyframes.length; keyframeIndex++) {
+                            times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
+                            ease.push(keyframeIndex === 0
+                                ? "linear"
+                                : getEasingForSegment(originalEase, keyframeIndex - 1));
+                        }
+                    }
+                    normalizeTimes(times, repeat);
+                }
+                const targetTime = startTime + duration;
+                /**
+                 * Add keyframes, mapping offsets to absolute time.
+                 */
+                addKeyframes(valueSequence, valueKeyframesAsList, ease, times, startTime, targetTime);
+                maxDuration = Math.max(calculatedDelay + duration, maxDuration);
+                totalDuration = Math.max(targetTime, totalDuration);
+            };
+            if (isMotionValue(subject)) {
+                const subjectSequence = getSubjectSequence(subject, sequences);
+                resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
+            }
+            else {
+                const subjects = resolveSubjects(subject, keyframes, scope, elementCache);
+                const numSubjects = subjects.length;
+                /**
+                 * For every element in this segment, process the defined values.
+                 */
+                for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
                     /**
-                     * We only need to calculate velocity for under-damped springs
-                     * as over- and critically-damped springs can't overshoot, so
-                     * checking only for displacement is enough.
+                     * Cast necessary, but we know these are of this type
                      */
-                    if (dampingRatio < 1) {
-                        currentVelocity =
-                            t === 0
-                                ? secondsToMilliseconds(initialVelocity)
-                                : calcGeneratorVelocity(resolveSpring, t, current);
+                    keyframes = keyframes;
+                    transition = transition;
+                    const thisSubject = subjects[subjectIndex];
+                    const subjectSequence = getSubjectSequence(thisSubject, sequences);
+                    for (const key in keyframes) {
+                        resolveValueSequence(keyframes[key], getValueTransition(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
                     }
-                    const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
-                    const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
-                    state.done =
-                        isBelowVelocityThreshold && isBelowDisplacementThreshold;
                 }
-                else {
-                    state.done = t >= duration;
+            }
+            prevTime = currentTime;
+            currentTime += maxDuration;
+        }
+        /**
+         * For every element and value combination create a new animation.
+         */
+        sequences.forEach((valueSequences, element) => {
+            for (const key in valueSequences) {
+                const valueSequence = valueSequences[key];
+                /**
+                 * Arrange all the keyframes in ascending time order.
+                 */
+                valueSequence.sort(compareByTime);
+                const keyframes = [];
+                const valueOffset = [];
+                const valueEasing = [];
+                /**
+                 * For each keyframe, translate absolute times into
+                 * relative offsets based on the total duration of the timeline.
+                 */
+                for (let i = 0; i < valueSequence.length; i++) {
+                    const { at, value, easing } = valueSequence[i];
+                    keyframes.push(value);
+                    valueOffset.push(progress(0, totalDuration, at));
+                    valueEasing.push(easing || "easeOut");
                 }
-                state.value = state.done ? target : current;
-                return state;
-            },
-            toString: () => {
-                const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
-                const easing = generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
-                return calculatedDuration + "ms " + easing;
-            },
-        };
-        return generator;
+                /**
+                 * If the first keyframe doesn't land on offset: 0
+                 * provide one by duplicating the initial keyframe. This ensures
+                 * it snaps to the first keyframe when the animation starts.
+                 */
+                if (valueOffset[0] !== 0) {
+                    valueOffset.unshift(0);
+                    keyframes.unshift(keyframes[0]);
+                    valueEasing.unshift(defaultSegmentEasing);
+                }
+                /**
+                 * If the last keyframe doesn't land on offset: 1
+                 * provide one with a null wildcard value. This will ensure it
+                 * stays static until the end of the animation.
+                 */
+                if (valueOffset[valueOffset.length - 1] !== 1) {
+                    valueOffset.push(1);
+                    keyframes.push(null);
+                }
+                if (!animationDefinitions.has(element)) {
+                    animationDefinitions.set(element, {
+                        keyframes: {},
+                        transition: {},
+                    });
+                }
+                const definition = animationDefinitions.get(element);
+                definition.keyframes[key] = keyframes;
+                definition.transition[key] = {
+                    ...defaultTransition,
+                    duration: totalDuration,
+                    ease: valueEasing,
+                    times: valueOffset,
+                    ...sequenceTransition,
+                };
+            }
+        });
+        return animationDefinitions;
     }
-
-    /**
-     * Create a progress => progress easing function from a generator.
-     */
-    function createGeneratorEasing(options, scale = 100, createGenerator) {
-        const generator = createGenerator({ ...options, keyframes: [0, scale] });
-        const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
-        return {
-            type: "keyframes",
-            ease: (progress) => generator.next(duration * progress).value / scale,
-            duration: millisecondsToSeconds(duration),
-        };
+    function getSubjectSequence(subject, sequences) {
+        !sequences.has(subject) && sequences.set(subject, {});
+        return sequences.get(subject);
     }
+    function getValueSequence(name, sequences) {
+        if (!sequences[name])
+            sequences[name] = [];
+        return sequences[name];
+    }
+    function keyframesAsList(keyframes) {
+        return Array.isArray(keyframes) ? keyframes : [keyframes];
+    }
+    function getValueTransition(transition, key) {
+        return transition && transition[key]
+            ? {
+                ...transition,
+                ...transition[key],
+            }
+            : { ...transition };
+    }
+    const isNumber = (keyframe) => typeof keyframe === "number";
+    const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
 
-    /*
-      Value in range from progress
-
-      Given a lower limit and an upper limit, we return the value within
-      that range as expressed by progress (usually a number from 0 to 1)
-
-      So progress = 0.5 would change
-
-      from -------- to
+    const visualElementStore = new WeakMap();
 
-      to
+    /**
+     * Generate a list of every possible transform key.
+     */
+    const transformPropOrder = [
+        "transformPerspective",
+        "x",
+        "y",
+        "z",
+        "translateX",
+        "translateY",
+        "translateZ",
+        "scale",
+        "scaleX",
+        "scaleY",
+        "rotate",
+        "rotateX",
+        "rotateY",
+        "rotateZ",
+        "skew",
+        "skewX",
+        "skewY",
+    ];
+    /**
+     * A quick lookup for transform props.
+     */
+    const transformProps = new Set(transformPropOrder);
 
-      from ---- to
+    const isKeyframesTarget = (v) => {
+        return Array.isArray(v);
+    };
 
-      E.g. from = 10, to = 20, progress = 0.5 => 15
+    const resolveFinalValueInKeyframes = (v) => {
+        // TODO maybe throw if v.length - 1 is placeholder token?
+        return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
+    };
 
-      @param [number]: Lower limit of range
-      @param [number]: Upper limit of range
-      @param [number]: The progress between lower and upper limits expressed 0-1
-      @return [number]: Value as calculated from progress within range (not limited within range)
-    */
-    const mixNumber$1 = (from, to, progress) => {
-        return from + (to - from) * progress;
+    const MotionGlobalConfig = {
+        skipAnimations: false,
+        useManualTiming: false,
     };
 
-    function fillOffset(offset, remaining) {
-        const min = offset[offset.length - 1];
-        for (let i = 1; i <= remaining; i++) {
-            const offsetProgress = progress(0, remaining, i);
-            offset.push(mixNumber$1(min, 1, offsetProgress));
+    function createRenderStep(runNextFrame) {
+        /**
+         * We create and reuse two queues, one to queue jobs for the current frame
+         * and one for the next. We reuse to avoid triggering GC after x frames.
+         */
+        let thisFrame = new Set();
+        let nextFrame = new Set();
+        /**
+         * Track whether we're currently processing jobs in this step. This way
+         * we can decide whether to schedule new jobs for this frame or next.
+         */
+        let isProcessing = false;
+        let flushNextFrame = false;
+        /**
+         * A set of processes which were marked keepAlive when scheduled.
+         */
+        const toKeepAlive = new WeakSet();
+        let latestFrameData = {
+            delta: 0.0,
+            timestamp: 0.0,
+            isProcessing: false,
+        };
+        function triggerCallback(callback) {
+            if (toKeepAlive.has(callback)) {
+                step.schedule(callback);
+                runNextFrame();
+            }
+            callback(latestFrameData);
         }
+        const step = {
+            /**
+             * Schedule a process to run on the next frame.
+             */
+            schedule: (callback, keepAlive = false, immediate = false) => {
+                const addToCurrentFrame = immediate && isProcessing;
+                const queue = addToCurrentFrame ? thisFrame : nextFrame;
+                if (keepAlive)
+                    toKeepAlive.add(callback);
+                if (!queue.has(callback))
+                    queue.add(callback);
+                return callback;
+            },
+            /**
+             * Cancel the provided callback from running on the next frame.
+             */
+            cancel: (callback) => {
+                nextFrame.delete(callback);
+                toKeepAlive.delete(callback);
+            },
+            /**
+             * Execute all schedule callbacks.
+             */
+            process: (frameData) => {
+                latestFrameData = frameData;
+                /**
+                 * If we're already processing we've probably been triggered by a flushSync
+                 * inside an existing process. Instead of executing, mark flushNextFrame
+                 * as true and ensure we flush the following frame at the end of this one.
+                 */
+                if (isProcessing) {
+                    flushNextFrame = true;
+                    return;
+                }
+                isProcessing = true;
+                [thisFrame, nextFrame] = [nextFrame, thisFrame];
+                // Execute this frame
+                thisFrame.forEach(triggerCallback);
+                // Clear the frame so no callbacks remain. This is to avoid
+                // memory leaks should this render step not run for a while.
+                thisFrame.clear();
+                isProcessing = false;
+                if (flushNextFrame) {
+                    flushNextFrame = false;
+                    step.process(frameData);
+                }
+            },
+        };
+        return step;
     }
 
-    function defaultOffset$1(arr) {
-        const offset = [0];
-        fillOffset(offset, arr.length - 1);
-        return offset;
-    }
-
-    const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
-    function isDOMKeyframes(keyframes) {
-        return typeof keyframes === "object" && !Array.isArray(keyframes);
+    const stepsOrder = [
+        "read", // Read
+        "resolveKeyframes", // Write/Read/Write/Read
+        "update", // Compute
+        "preRender", // Compute
+        "render", // Write
+        "postRender", // Compute
+    ];
+    const maxElapsed$1 = 40;
+    function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
+        let runNextFrame = false;
+        let useDefaultElapsed = true;
+        const state = {
+            delta: 0.0,
+            timestamp: 0.0,
+            isProcessing: false,
+        };
+        const flagRunNextFrame = () => (runNextFrame = true);
+        const steps = stepsOrder.reduce((acc, key) => {
+            acc[key] = createRenderStep(flagRunNextFrame);
+            return acc;
+        }, {});
+        const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
+        const processBatch = () => {
+            const timestamp = performance.now();
+            runNextFrame = false;
+            state.delta = useDefaultElapsed
+                ? 1000 / 60
+                : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
+            state.timestamp = timestamp;
+            state.isProcessing = true;
+            // Unrolled render loop for better per-frame performance
+            read.process(state);
+            resolveKeyframes.process(state);
+            update.process(state);
+            preRender.process(state);
+            render.process(state);
+            postRender.process(state);
+            state.isProcessing = false;
+            if (runNextFrame && allowKeepAlive) {
+                useDefaultElapsed = false;
+                scheduleNextBatch(processBatch);
+            }
+        };
+        const wake = () => {
+            runNextFrame = true;
+            useDefaultElapsed = true;
+            if (!state.isProcessing) {
+                scheduleNextBatch(processBatch);
+            }
+        };
+        const schedule = stepsOrder.reduce((acc, key) => {
+            const step = steps[key];
+            acc[key] = (process, keepAlive = false, immediate = false) => {
+                if (!runNextFrame)
+                    wake();
+                return step.schedule(process, keepAlive, immediate);
+            };
+            return acc;
+        }, {});
+        const cancel = (process) => {
+            for (let i = 0; i < stepsOrder.length; i++) {
+                steps[stepsOrder[i]].cancel(process);
+            }
+        };
+        return { schedule, cancel, state, steps };
     }
 
-    function resolveSubjects(subject, keyframes, scope, selectorCache) {
-        if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
-            return resolveElements(subject, scope, selectorCache);
-        }
-        else if (subject instanceof NodeList) {
-            return Array.from(subject);
-        }
-        else if (Array.isArray(subject)) {
-            return subject;
-        }
-        else {
-            return [subject];
-        }
-    }
+    const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 
-    function isGenerator(type) {
-        return typeof type === "function";
+    let now;
+    function clearTime() {
+        now = undefined;
     }
-
     /**
-     * Given a absolute or relative time definition and current/prev time state of the sequence,
-     * calculate an absolute time for the next keyframes.
+     * An eventloop-synchronous alternative to performance.now().
+     *
+     * Ensures that time measurements remain consistent within a synchronous context.
+     * Usually calling performance.now() twice within the same synchronous context
+     * will return different values which isn't useful for animations when we're usually
+     * trying to sync animations to the same frame.
      */
-    function calcNextTime(current, next, prev, labels) {
-        var _a;
-        if (typeof next === "number") {
-            return next;
-        }
-        else if (next.startsWith("-") || next.startsWith("+")) {
-            return Math.max(0, current + parseFloat(next));
-        }
-        else if (next === "<") {
-            return prev;
-        }
-        else {
-            return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
-        }
-    }
-
-    const wrap = (min, max, v) => {
-        const rangeSize = max - min;
-        return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
-    };
-
-    const isEasingArray = (ease) => {
-        return Array.isArray(ease) && typeof ease[0] !== "number";
+    const time = {
+        now: () => {
+            if (now === undefined) {
+                time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming
+                    ? frameData.timestamp
+                    : performance.now());
+            }
+            return now;
+        },
+        set: (newTime) => {
+            now = newTime;
+            queueMicrotask(clearTime);
+        },
     };
 
-    function getEasingForSegment(easing, i) {
-        return isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
-    }
-
-    function eraseKeyframes(sequence, startTime, endTime) {
-        for (let i = 0; i < sequence.length; i++) {
-            const keyframe = sequence[i];
-            if (keyframe.at > startTime && keyframe.at < endTime) {
-                removeItem(sequence, keyframe);
-                // If we remove this item we have to push the pointer back one
-                i--;
-            }
+    class SubscriptionManager {
+        constructor() {
+            this.subscriptions = [];
         }
-    }
-    function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
-        /**
-         * Erase every existing value between currentTime and targetTime,
-         * this will essentially splice this timeline into any currently
-         * defined ones.
-         */
-        eraseKeyframes(sequence, startTime, endTime);
-        for (let i = 0; i < keyframes.length; i++) {
-            sequence.push({
-                value: keyframes[i],
-                at: mixNumber$1(startTime, endTime, offset[i]),
-                easing: getEasingForSegment(easing, i),
-            });
+        add(handler) {
+            addUniqueItem(this.subscriptions, handler);
+            return () => removeItem(this.subscriptions, handler);
         }
-    }
-
-    function compareByTime(a, b) {
-        if (a.at === b.at) {
-            if (a.value === null)
-                return 1;
-            if (b.value === null)
-                return -1;
-            return 0;
+        notify(a, b, c) {
+            const numSubscriptions = this.subscriptions.length;
+            if (!numSubscriptions)
+                return;
+            if (numSubscriptions === 1) {
+                /**
+                 * If there's only a single handler we can just call it without invoking a loop.
+                 */
+                this.subscriptions[0](a, b, c);
+            }
+            else {
+                for (let i = 0; i < numSubscriptions; i++) {
+                    /**
+                     * Check whether the handler exists before firing as it's possible
+                     * the subscriptions were modified during this loop running.
+                     */
+                    const handler = this.subscriptions[i];
+                    handler && handler(a, b, c);
+                }
+            }
         }
-        else {
-            return a.at - b.at;
+        getSize() {
+            return this.subscriptions.length;
         }
-    }
-
-    /**
-     * Take an array of times that represent repeated keyframes. For instance
-     * if we have original times of [0, 0.5, 1] then our repeated times will
-     * be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back
-     * down to a 0-1 scale.
-     */
-    function normalizeTimes(times, repeat) {
-        for (let i = 0; i < times.length; i++) {
-            times[i] = times[i] / (repeat + 1);
+        clear() {
+            this.subscriptions.length = 0;
         }
     }
 
-    function calculateRepeatDuration(duration, repeat, _repeatDelay) {
-        return duration * (repeat + 1);
+    const warned = new Set();
+    function warnOnce(condition, message, element) {
+        if (condition || warned.has(message))
+            return;
+        console.warn(message);
+        if (element)
+            console.warn(element);
+        warned.add(message);
     }
 
-    const defaultSegmentEasing = "easeInOut";
-    const MAX_REPEAT = 20;
-    function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
-        const defaultDuration = defaultTransition.duration || 0.3;
-        const animationDefinitions = new Map();
-        const sequences = new Map();
-        const elementCache = {};
-        const timeLabels = new Map();
-        let prevTime = 0;
-        let currentTime = 0;
-        let totalDuration = 0;
+    /**
+     * Maximum time between the value of two frames, beyond which we
+     * assume the velocity has since been 0.
+     */
+    const MAX_VELOCITY_DELTA = 30;
+    const isFloat = (value) => {
+        return !isNaN(parseFloat(value));
+    };
+    /**
+     * `MotionValue` is used to track the state and velocity of motion values.
+     *
+     * @public
+     */
+    class MotionValue {
         /**
-         * Build the timeline by mapping over the sequence array and converting
-         * the definitions into keyframes and offsets with absolute time values.
-         * These will later get converted into relative offsets in a second pass.
+         * @param init - The initiating value
+         * @param config - Optional configuration options
+         *
+         * -  `transformer`: A function to transform incoming values with.
+         *
+         * @internal
          */
-        for (let i = 0; i < sequence.length; i++) {
-            const segment = sequence[i];
+        constructor(init, options = {}) {
             /**
-             * If this is a timeline label, mark it and skip the rest of this iteration.
+             * 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.
              */
-            if (typeof segment === "string") {
-                timeLabels.set(segment, currentTime);
-                continue;
-            }
-            else if (!Array.isArray(segment)) {
-                timeLabels.set(segment.name, calcNextTime(currentTime, segment.at, prevTime, timeLabels));
-                continue;
-            }
-            let [subject, keyframes, transition = {}] = segment;
+            this.version = "11.16.0";
             /**
-             * If a relative or absolute time value has been specified we need to resolve
-             * it in relation to the currentTime.
+             * Tracks whether this value can output a velocity. Currently this is only true
+             * if the value is numerical, but we might be able to widen the scope here and support
+             * other value types.
+             *
+             * @internal
              */
-            if (transition.at !== undefined) {
-                currentTime = calcNextTime(currentTime, transition.at, prevTime, timeLabels);
-            }
+            this.canTrackVelocity = null;
             /**
-             * Keep track of the maximum duration in this definition. This will be
-             * applied to currentTime once the definition has been parsed.
+             * An object containing a SubscriptionManager for each active event.
              */
-            let maxDuration = 0;
-            const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
-                const valueKeyframesAsList = keyframesAsList(valueKeyframes);
-                const { delay = 0, times = defaultOffset$1(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
-                let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
-                /**
-                 * Resolve stagger() if defined.
-                 */
-                const calculatedDelay = typeof delay === "function"
-                    ? delay(elementIndex, numSubjects)
-                    : delay;
+            this.events = {};
+            this.updateAndNotify = (v, render = true) => {
+                const currentTime = time.now();
                 /**
-                 * If this animation should and can use a spring, generate a spring easing function.
+                 * If we're updating the value during another frame or eventloop
+                 * than the previous frame, then the we set the previous frame value
+                 * to current.
                  */
-                const numKeyframes = valueKeyframesAsList.length;
-                const createGenerator = isGenerator(type)
-                    ? type
-                    : generators === null || generators === void 0 ? void 0 : generators[type];
-                if (numKeyframes <= 2 && createGenerator) {
-                    /**
-                     * As we're creating an easing function from a spring,
-                     * ideally we want to generate it using the real distance
-                     * between the two keyframes. However this isn't always
-                     * possible - in these situations we use 0-100.
-                     */
-                    let absoluteDelta = 100;
-                    if (numKeyframes === 2 &&
-                        isNumberKeyframesArray(valueKeyframesAsList)) {
-                        const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
-                        absoluteDelta = Math.abs(delta);
-                    }
-                    const springTransition = { ...remainingTransition };
-                    if (duration !== undefined) {
-                        springTransition.duration = secondsToMilliseconds(duration);
-                    }
-                    const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
-                    ease = springEasing.ease;
-                    duration = springEasing.duration;
+                if (this.updatedAt !== currentTime) {
+                    this.setPrevFrameValue();
                 }
-                duration !== null && duration !== void 0 ? duration : (duration = defaultDuration);
-                const startTime = currentTime + calculatedDelay;
-                /**
-                 * If there's only one time offset of 0, fill in a second with length 1
-                 */
-                if (times.length === 1 && times[0] === 0) {
-                    times[1] = 1;
+                this.prev = this.current;
+                this.setCurrent(v);
+                // Update update subscribers
+                if (this.current !== this.prev && this.events.change) {
+                    this.events.change.notify(this.current);
                 }
-                /**
-                 * Fill out if offset if fewer offsets than keyframes
-                 */
-                const remainder = times.length - valueKeyframesAsList.length;
-                remainder > 0 && fillOffset(times, remainder);
-                /**
-                 * If only one value has been set, ie [1], push a null to the start of
-                 * the keyframe array. This will let us mark a keyframe at this point
-                 * that will later be hydrated with the previous value.
-                 */
-                valueKeyframesAsList.length === 1 &&
-                    valueKeyframesAsList.unshift(null);
-                /**
-                 * Handle repeat options
-                 */
-                if (repeat) {
-                    exports.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
-                    duration = calculateRepeatDuration(duration, repeat);
-                    const originalKeyframes = [...valueKeyframesAsList];
-                    const originalTimes = [...times];
-                    ease = Array.isArray(ease) ? [...ease] : [ease];
-                    const originalEase = [...ease];
-                    for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
-                        valueKeyframesAsList.push(...originalKeyframes);
-                        for (let keyframeIndex = 0; keyframeIndex < originalKeyframes.length; keyframeIndex++) {
-                            times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
-                            ease.push(keyframeIndex === 0
-                                ? "linear"
-                                : getEasingForSegment(originalEase, keyframeIndex - 1));
-                        }
-                    }
-                    normalizeTimes(times, repeat);
+                // Update render subscribers
+                if (render && this.events.renderRequest) {
+                    this.events.renderRequest.notify(this.current);
                 }
-                const targetTime = startTime + duration;
-                /**
-                 * Add keyframes, mapping offsets to absolute time.
-                 */
-                addKeyframes(valueSequence, valueKeyframesAsList, ease, times, startTime, targetTime);
-                maxDuration = Math.max(calculatedDelay + duration, maxDuration);
-                totalDuration = Math.max(targetTime, totalDuration);
             };
-            if (isMotionValue(subject)) {
-                const subjectSequence = getSubjectSequence(subject, sequences);
-                resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
+            this.hasAnimated = false;
+            this.setCurrent(init);
+            this.owner = options.owner;
+        }
+        setCurrent(current) {
+            this.current = current;
+            this.updatedAt = time.now();
+            if (this.canTrackVelocity === null && current !== undefined) {
+                this.canTrackVelocity = isFloat(this.current);
+            }
+        }
+        setPrevFrameValue(prevFrameValue = this.current) {
+            this.prevFrameValue = prevFrameValue;
+            this.prevUpdatedAt = this.updatedAt;
+        }
+        /**
+         * Adds a function that will be notified when the `MotionValue` is updated.
+         *
+         * It returns a function that, when called, will cancel the subscription.
+         *
+         * When calling `onChange` inside a React component, it should be wrapped with the
+         * `useEffect` hook. As it returns an unsubscribe function, this should be returned
+         * from the `useEffect` function to ensure you don't add duplicate subscribers..
+         *
+         * ```jsx
+         * export const MyComponent = () => {
+         *   const x = useMotionValue(0)
+         *   const y = useMotionValue(0)
+         *   const opacity = useMotionValue(1)
+         *
+         *   useEffect(() => {
+         *     function updateOpacity() {
+         *       const maxXY = Math.max(x.get(), y.get())
+         *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
+         *       opacity.set(newOpacity)
+         *     }
+         *
+         *     const unsubscribeX = x.on("change", updateOpacity)
+         *     const unsubscribeY = y.on("change", updateOpacity)
+         *
+         *     return () => {
+         *       unsubscribeX()
+         *       unsubscribeY()
+         *     }
+         *   }, [])
+         *
+         *   return <motion.div style={{ x }} />
+         * }
+         * ```
+         *
+         * @param subscriber - A function that receives the latest value.
+         * @returns A function that, when called, will cancel this subscription.
+         *
+         * @deprecated
+         */
+        onChange(subscription) {
+            {
+                warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
+            }
+            return this.on("change", subscription);
+        }
+        on(eventName, callback) {
+            if (!this.events[eventName]) {
+                this.events[eventName] = new SubscriptionManager();
+            }
+            const unsubscribe = this.events[eventName].add(callback);
+            if (eventName === "change") {
+                return () => {
+                    unsubscribe();
+                    /**
+                     * If we have no more change listeners by the start
+                     * of the next frame, stop active animations.
+                     */
+                    frame.read(() => {
+                        if (!this.events.change.getSize()) {
+                            this.stop();
+                        }
+                    });
+                };
+            }
+            return unsubscribe;
+        }
+        clearListeners() {
+            for (const eventManagers in this.events) {
+                this.events[eventManagers].clear();
+            }
+        }
+        /**
+         * Attaches a passive effect to the `MotionValue`.
+         *
+         * @internal
+         */
+        attach(passiveEffect, stopPassiveEffect) {
+            this.passiveEffect = passiveEffect;
+            this.stopPassiveEffect = stopPassiveEffect;
+        }
+        /**
+         * Sets the state of the `MotionValue`.
+         *
+         * @remarks
+         *
+         * ```jsx
+         * const x = useMotionValue(0)
+         * x.set(10)
+         * ```
+         *
+         * @param latest - Latest value to set.
+         * @param render - Whether to notify render subscribers. Defaults to `true`
+         *
+         * @public
+         */
+        set(v, render = true) {
+            if (!render || !this.passiveEffect) {
+                this.updateAndNotify(v, render);
             }
             else {
-                const subjects = resolveSubjects(subject, keyframes, scope, elementCache);
-                const numSubjects = subjects.length;
-                /**
-                 * For every element in this segment, process the defined values.
-                 */
-                for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
-                    /**
-                     * Cast necessary, but we know these are of this type
-                     */
-                    keyframes = keyframes;
-                    transition = transition;
-                    const thisSubject = subjects[subjectIndex];
-                    const subjectSequence = getSubjectSequence(thisSubject, sequences);
-                    for (const key in keyframes) {
-                        resolveValueSequence(keyframes[key], getValueTransition$1(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
-                    }
-                }
+                this.passiveEffect(v, this.updateAndNotify);
             }
-            prevTime = currentTime;
-            currentTime += maxDuration;
+        }
+        setWithVelocity(prev, current, delta) {
+            this.set(current);
+            this.prev = undefined;
+            this.prevFrameValue = prev;
+            this.prevUpdatedAt = this.updatedAt - delta;
         }
         /**
-         * For every element and value combination create a new animation.
+         * Set the state of the `MotionValue`, stopping any active animations,
+         * effects, and resets velocity to `0`.
          */
-        sequences.forEach((valueSequences, element) => {
-            for (const key in valueSequences) {
-                const valueSequence = valueSequences[key];
-                /**
-                 * Arrange all the keyframes in ascending time order.
-                 */
-                valueSequence.sort(compareByTime);
-                const keyframes = [];
-                const valueOffset = [];
-                const valueEasing = [];
-                /**
-                 * For each keyframe, translate absolute times into
-                 * relative offsets based on the total duration of the timeline.
-                 */
-                for (let i = 0; i < valueSequence.length; i++) {
-                    const { at, value, easing } = valueSequence[i];
-                    keyframes.push(value);
-                    valueOffset.push(progress(0, totalDuration, at));
-                    valueEasing.push(easing || "easeOut");
-                }
-                /**
-                 * If the first keyframe doesn't land on offset: 0
-                 * provide one by duplicating the initial keyframe. This ensures
-                 * it snaps to the first keyframe when the animation starts.
-                 */
-                if (valueOffset[0] !== 0) {
-                    valueOffset.unshift(0);
-                    keyframes.unshift(keyframes[0]);
-                    valueEasing.unshift(defaultSegmentEasing);
+        jump(v, endAnimation = true) {
+            this.updateAndNotify(v);
+            this.prev = v;
+            this.prevUpdatedAt = this.prevFrameValue = undefined;
+            endAnimation && this.stop();
+            if (this.stopPassiveEffect)
+                this.stopPassiveEffect();
+        }
+        /**
+         * Returns the latest state of `MotionValue`
+         *
+         * @returns - The latest state of `MotionValue`
+         *
+         * @public
+         */
+        get() {
+            return this.current;
+        }
+        /**
+         * @public
+         */
+        getPrevious() {
+            return this.prev;
+        }
+        /**
+         * Returns the latest velocity of `MotionValue`
+         *
+         * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
+         *
+         * @public
+         */
+        getVelocity() {
+            const currentTime = time.now();
+            if (!this.canTrackVelocity ||
+                this.prevFrameValue === undefined ||
+                currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {
+                return 0;
+            }
+            const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
+            // Casts because of parseFloat's poor typing
+            return velocityPerSecond(parseFloat(this.current) -
+                parseFloat(this.prevFrameValue), delta);
+        }
+        /**
+         * Registers a new animation to control this `MotionValue`. Only one
+         * animation can drive a `MotionValue` at one time.
+         *
+         * ```jsx
+         * value.start()
+         * ```
+         *
+         * @param animation - A function that starts the provided animation
+         *
+         * @internal
+         */
+        start(startAnimation) {
+            this.stop();
+            return new Promise((resolve) => {
+                this.hasAnimated = true;
+                this.animation = startAnimation(resolve);
+                if (this.events.animationStart) {
+                    this.events.animationStart.notify();
                 }
-                /**
-                 * If the last keyframe doesn't land on offset: 1
-                 * provide one with a null wildcard value. This will ensure it
-                 * stays static until the end of the animation.
-                 */
-                if (valueOffset[valueOffset.length - 1] !== 1) {
-                    valueOffset.push(1);
-                    keyframes.push(null);
+            }).then(() => {
+                if (this.events.animationComplete) {
+                    this.events.animationComplete.notify();
                 }
-                if (!animationDefinitions.has(element)) {
-                    animationDefinitions.set(element, {
-                        keyframes: {},
-                        transition: {},
-                    });
+                this.clearAnimation();
+            });
+        }
+        /**
+         * Stop the currently active animation.
+         *
+         * @public
+         */
+        stop() {
+            if (this.animation) {
+                this.animation.stop();
+                if (this.events.animationCancel) {
+                    this.events.animationCancel.notify();
                 }
-                const definition = animationDefinitions.get(element);
-                definition.keyframes[key] = keyframes;
-                definition.transition[key] = {
-                    ...defaultTransition,
-                    duration: totalDuration,
-                    ease: valueEasing,
-                    times: valueOffset,
-                    ...sequenceTransition,
-                };
             }
+            this.clearAnimation();
+        }
+        /**
+         * Returns `true` if this value is currently animating.
+         *
+         * @public
+         */
+        isAnimating() {
+            return !!this.animation;
+        }
+        clearAnimation() {
+            delete this.animation;
+        }
+        /**
+         * Destroy and clean up subscribers to this `MotionValue`.
+         *
+         * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
+         * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
+         * created a `MotionValue` via the `motionValue` function.
+         *
+         * @public
+         */
+        destroy() {
+            this.clearListeners();
+            this.stop();
+            if (this.stopPassiveEffect) {
+                this.stopPassiveEffect();
+            }
+        }
+    }
+    function motionValue(init, options) {
+        return new MotionValue(init, options);
+    }
+
+    function getValueState(visualElement) {
+        const state = [{}, {}];
+        visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
+            state[0][key] = value.get();
+            state[1][key] = value.getVelocity();
         });
-        return animationDefinitions;
+        return state;
     }
-    function getSubjectSequence(subject, sequences) {
-        !sequences.has(subject) && sequences.set(subject, {});
-        return sequences.get(subject);
+    function resolveVariantFromProps(props, definition, custom, visualElement) {
+        /**
+         * If the variant definition is a function, resolve.
+         */
+        if (typeof definition === "function") {
+            const [current, velocity] = getValueState(visualElement);
+            definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
+        }
+        /**
+         * If the variant definition is a variant label, or
+         * the function returned a variant label, resolve.
+         */
+        if (typeof definition === "string") {
+            definition = props.variants && props.variants[definition];
+        }
+        /**
+         * At this point we've resolved both functions and variant labels,
+         * but the resolved variant label might itself have been a function.
+         * If so, resolve. This can only have returned a valid target object.
+         */
+        if (typeof definition === "function") {
+            const [current, velocity] = getValueState(visualElement);
+            definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
+        }
+        return definition;
     }
-    function getValueSequence(name, sequences) {
-        if (!sequences[name])
-            sequences[name] = [];
-        return sequences[name];
+
+    function resolveVariant(visualElement, definition, custom) {
+        const props = visualElement.getProps();
+        return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement);
     }
-    function keyframesAsList(keyframes) {
-        return Array.isArray(keyframes) ? keyframes : [keyframes];
+
+    /**
+     * Set VisualElement's MotionValue, creating a new MotionValue for it if
+     * it doesn't exist.
+     */
+    function setMotionValue(visualElement, key, value) {
+        if (visualElement.hasValue(key)) {
+            visualElement.getValue(key).set(value);
+        }
+        else {
+            visualElement.addValue(key, motionValue(value));
+        }
     }
-    function getValueTransition$1(transition, key) {
-        return transition && transition[key]
-            ? {
-                ...transition,
-                ...transition[key],
-            }
-            : { ...transition };
+    function setTarget(visualElement, definition) {
+        const resolved = resolveVariant(visualElement, definition);
+        let { transitionEnd = {}, transition = {}, ...target } = resolved || {};
+        target = { ...target, ...transitionEnd };
+        for (const key in target) {
+            const value = resolveFinalValueInKeyframes(target[key]);
+            setMotionValue(visualElement, key, value);
+        }
     }
-    const isNumber = (keyframe) => typeof keyframe === "number";
-    const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
 
-    const visualElementStore = new WeakMap();
+    function isWillChangeMotionValue(value) {
+        return Boolean(isMotionValue(value) && value.add);
+    }
 
-    /**
-     * Generate a list of every possible transform key.
-     */
-    const transformPropOrder = [
-        "transformPerspective",
-        "x",
-        "y",
-        "z",
-        "translateX",
-        "translateY",
-        "translateZ",
-        "scale",
-        "scaleX",
-        "scaleY",
-        "rotate",
-        "rotateX",
-        "rotateY",
-        "rotateZ",
-        "skew",
-        "skewX",
-        "skewY",
-    ];
-    /**
-     * A quick lookup for transform props.
-     */
-    const transformProps = new Set(transformPropOrder);
+    function addValueToWillChange(visualElement, key) {
+        const willChange = visualElement.getValue("willChange");
+        /**
+         * It could be that a user has set willChange to a regular MotionValue,
+         * in which case we can't add the value to it.
+         */
+        if (isWillChangeMotionValue(willChange)) {
+            return willChange.add(key);
+        }
+    }
 
-    const underDampedSpring = {
-        type: "spring",
-        stiffness: 500,
-        damping: 25,
-        restSpeed: 10,
-    };
-    const criticallyDampedSpring = (target) => ({
-        type: "spring",
-        stiffness: 550,
-        damping: target === 0 ? 2 * Math.sqrt(550) : 30,
-        restSpeed: 10,
-    });
-    const keyframesTransition = {
-        type: "keyframes",
-        duration: 0.8,
-    };
     /**
-     * Default easing curve is a slightly shallower version of
-     * the default browser easing curve.
+     * Convert camelCase to dash-case properties.
      */
-    const ease = {
-        type: "keyframes",
-        ease: [0.25, 0.1, 0.35, 1],
-        duration: 0.3,
-    };
-    const getDefaultTransition = (valueKey, { keyframes }) => {
-        if (keyframes.length > 2) {
-            return keyframesTransition;
-        }
-        else if (transformProps.has(valueKey)) {
-            return valueKey.startsWith("scale")
-                ? criticallyDampedSpring(keyframes[1])
-                : underDampedSpring;
-        }
-        return ease;
-    };
+    const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
 
-    function getValueTransition(transition, key) {
-        return transition
-            ? transition[key] ||
-                transition["default"] ||
-                transition
-            : undefined;
-    }
+    const optimizedAppearDataId = "framerAppearId";
+    const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
 
-    const isNotNull = (value) => value !== null;
-    function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
-        const resolvedKeyframes = keyframes.filter(isNotNull);
-        const index = repeat && repeatType !== "loop" && repeat % 2 === 1
-            ? 0
-            : resolvedKeyframes.length - 1;
-        return !index || finalKeyframe === undefined
-            ? resolvedKeyframes[index]
-            : finalKeyframe;
+    function getOptimisedAppearId(visualElement) {
+        return visualElement.props[optimizedAppearDataAttribute];
     }
 
     /*
@@ -2493,6 +2708,17 @@
             ((type === "spring" || isGenerator(type)) && velocity));
     }
 
+    const isNotNull = (value) => value !== null;
+    function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
+        const resolvedKeyframes = keyframes.filter(isNotNull);
+        const index = repeat && repeatType !== "loop" && repeat % 2 === 1
+            ? 0
+            : resolvedKeyframes.length - 1;
+        return !index || finalKeyframe === undefined
+            ? resolvedKeyframes[index]
+            : finalKeyframe;
+    }
+
     /**
      * Maximum time allowed between an animation being created and it being
      * resolved for us to use the latter as the start time.
@@ -2583,152 +2809,25 @@
             };
             this.onPostResolved();
         }
-        onPostResolved() { }
-        /**
-         * Allows the returned animation to be awaited or promise-chained. Currently
-         * resolves when the animation finishes at all but in a future update could/should
-         * reject if its cancels.
-         */
-        then(resolve, reject) {
-            return this.currentFinishedPromise.then(resolve, reject);
-        }
-        flatten() {
-            this.options.type = "keyframes";
-            this.options.ease = "linear";
-        }
-        updateFinishedPromise() {
-            this.currentFinishedPromise = new Promise((resolve) => {
-                this.resolveFinishedPromise = resolve;
-            });
-        }
-    }
-
-    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];
-        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);
-        /**
-         * If the target has changed we need to re-calculate the amplitude, otherwise
-         * the animation will start from the wrong position.
-         */
-        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), // TODO: This should be passing * 1000
-                damping: bounceDamping,
-                stiffness: bounceStiffness,
-                restDelta,
-                restSpeed,
-            });
-        };
-        checkCatchBoundary(0);
-        return {
-            calculatedDuration: null,
-            next: (t) => {
-                /**
-                 * 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;
-                }
-            },
-        };
-    }
-
-    const easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);
-    const easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);
-    const easeInOut = /*@__PURE__*/ cubicBezier(0.42, 0, 0.58, 1);
-
-    const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-
-    const easingLookup = {
-        linear: noop,
-        easeIn,
-        easeInOut,
-        easeOut,
-        circIn,
-        circInOut,
-        circOut,
-        backIn,
-        backInOut,
-        backOut,
-        anticipate,
-    };
-    const easingDefinitionToFunction = (definition) => {
-        if (isBezierDefinition(definition)) {
-            // If cubic bezier definition, create bezier curve
-            exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
-            const [x1, y1, x2, y2] = definition;
-            return cubicBezier(x1, y1, x2, y2);
-        }
-        else if (typeof definition === "string") {
-            // Else lookup from table
-            exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
-            return easingLookup[definition];
+        onPostResolved() { }
+        /**
+         * Allows the returned animation to be awaited or promise-chained. Currently
+         * resolves when the animation finishes at all but in a future update could/should
+         * reject if its cancels.
+         */
+        then(resolve, reject) {
+            return this.currentFinishedPromise.then(resolve, reject);
         }
-        return definition;
-    };
-
-    /**
-     * Pipe
-     * Compose other transformers to run linearily
-     * pipe(min(20), max(40))
-     * @param  {...functions} transformers
-     * @return {function}
-     */
-    const combineFunctions = (a, b) => (v) => b(a(v));
-    const pipe = (...transformers) => transformers.reduce(combineFunctions);
+        flatten() {
+            this.options.type = "keyframes";
+            this.options.ease = "linear";
+        }
+        updateFinishedPromise() {
+            this.currentFinishedPromise = new Promise((resolve) => {
+                this.resolveFinishedPromise = resolve;
+            });
+        }
+    }
 
     // Adapted from https://gist.github.com/mjackson/5311256
     function hueToRgb(p, q, t) {
@@ -2813,6 +2912,16 @@
         };
     };
 
+    /**
+     * Pipe
+     * Compose other transformers to run linearily
+     * pipe(min(20), max(40))
+     * @param  {...functions} transformers
+     * @return {function}
+     */
+    const combineFunctions = (a, b) => (v) => b(a(v));
+    const pipe = (...transformers) => transformers.reduce(combineFunctions);
+
     const invisibleValues = new Set(["none", "hidden"]);
     /**
      * Returns a function that, when provided a progress value between 0 and 1,
@@ -2921,6 +3030,121 @@
         return mixer(from, to);
     }
 
+    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];
+        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);
+        /**
+         * If the target has changed we need to re-calculate the amplitude, otherwise
+         * the animation will start from the wrong position.
+         */
+        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), // TODO: This should be passing * 1000
+                damping: bounceDamping,
+                stiffness: bounceStiffness,
+                restDelta,
+                restSpeed,
+            });
+        };
+        checkCatchBoundary(0);
+        return {
+            calculatedDuration: null,
+            next: (t) => {
+                /**
+                 * 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;
+                }
+            },
+        };
+    }
+
+    const easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);
+    const easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);
+    const easeInOut = /*@__PURE__*/ cubicBezier(0.42, 0, 0.58, 1);
+
+    const easingLookup = {
+        linear: noop,
+        easeIn,
+        easeInOut,
+        easeOut,
+        circIn,
+        circInOut,
+        circOut,
+        backIn,
+        backInOut,
+        backOut,
+        anticipate,
+    };
+    const easingDefinitionToFunction = (definition) => {
+        if (isBezierDefinition(definition)) {
+            // If cubic bezier definition, create bezier curve
+            exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
+            const [x1, y1, x2, y2] = definition;
+            return cubicBezier(x1, y1, x2, y2);
+        }
+        else if (typeof definition === "string") {
+            // Else lookup from table
+            exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
+            return easingLookup[definition];
+        }
+        return definition;
+    };
+
     function createMixers(output, ease, customMixer) {
         const mixers = [];
         const mixerFactory = customMixer || mix;
@@ -3432,70 +3656,6 @@
         // "background-color"
     ]);
 
-    /**
-     * Add the ability for test suites to manually set support flags
-     * to better test more environments.
-     */
-    const supportsFlags = {
-        linearEasing: undefined,
-    };
-
-    function memoSupports(callback, supportsFlag) {
-        const memoized = memo(callback);
-        return () => { var _a; return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized(); };
-    }
-
-    const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
-        try {
-            document
-                .createElement("div")
-                .animate({ opacity: 0 }, { easing: "linear(0, 1)" });
-        }
-        catch (e) {
-            return false;
-        }
-        return true;
-    }, "linearEasing");
-
-    function isWaapiSupportedEasing(easing) {
-        return Boolean((typeof easing === "function" && supportsLinearEasing()) ||
-            !easing ||
-            (typeof easing === "string" &&
-                (easing in supportedWaapiEasing || supportsLinearEasing())) ||
-            isBezierDefinition(easing) ||
-            (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
-    }
-    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: /*@__PURE__*/ cubicBezierAsString([0, 0.65, 0.55, 1]),
-        circOut: /*@__PURE__*/ cubicBezierAsString([0.55, 0, 1, 0.45]),
-        backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
-        backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
-    };
-    function mapEasingToNativeEasing(easing, duration) {
-        if (!easing) {
-            return undefined;
-        }
-        else if (typeof easing === "function" && supportsLinearEasing()) {
-            return generateLinearEasing(easing, duration);
-        }
-        else if (isBezierDefinition(easing)) {
-            return cubicBezierAsString(easing);
-        }
-        else if (Array.isArray(easing)) {
-            return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) ||
-                supportedWaapiEasing.easeOut);
-        }
-        else {
-            return supportedWaapiEasing[easing];
-        }
-    }
-
     function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}) {
         const keyframeOptions = { [valueName]: keyframes };
         if (times)
@@ -3516,11 +3676,6 @@
         });
     }
 
-    function attachTimeline(animation, timeline) {
-        animation.timeline = timeline;
-        animation.onfinish = null;
-    }
-
     const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
 
     /**
@@ -3821,7 +3976,44 @@
                 damping !== 0 &&
                 type !== "inertia");
         }
-    }
+    }
+
+    const underDampedSpring = {
+        type: "spring",
+        stiffness: 500,
+        damping: 25,
+        restSpeed: 10,
+    };
+    const criticallyDampedSpring = (target) => ({
+        type: "spring",
+        stiffness: 550,
+        damping: target === 0 ? 2 * Math.sqrt(550) : 30,
+        restSpeed: 10,
+    });
+    const keyframesTransition = {
+        type: "keyframes",
+        duration: 0.8,
+    };
+    /**
+     * Default easing curve is a slightly shallower version of
+     * the default browser easing curve.
+     */
+    const ease = {
+        type: "keyframes",
+        ease: [0.25, 0.1, 0.35, 1],
+        duration: 0.3,
+    };
+    const getDefaultTransition = (valueKey, { keyframes }) => {
+        if (keyframes.length > 2) {
+            return keyframesTransition;
+        }
+        else if (transformProps.has(valueKey)) {
+            return valueKey.startsWith("scale")
+                ? criticallyDampedSpring(keyframes[1])
+                : underDampedSpring;
+        }
+        return ease;
+    };
 
     /**
      * Decide whether a transition is defined on a given Transition.
@@ -3833,7 +4025,7 @@
     }
 
     const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
-        const valueTransition = getValueTransition(transition, name) || {};
+        const valueTransition = getValueTransition$1(transition, name) || {};
         /**
          * Most transition values are currently completely overwritten by value-specific
          * transitions. In the future it'd be nicer to blend these transitions. But for now
@@ -3926,104 +4118,6 @@
         }
     };
 
-    const isKeyframesTarget = (v) => {
-        return Array.isArray(v);
-    };
-
-    const resolveFinalValueInKeyframes = (v) => {
-        // TODO maybe throw if v.length - 1 is placeholder token?
-        return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
-    };
-
-    function getValueState(visualElement) {
-        const state = [{}, {}];
-        visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
-            state[0][key] = value.get();
-            state[1][key] = value.getVelocity();
-        });
-        return state;
-    }
-    function resolveVariantFromProps(props, definition, custom, visualElement) {
-        /**
-         * If the variant definition is a function, resolve.
-         */
-        if (typeof definition === "function") {
-            const [current, velocity] = getValueState(visualElement);
-            definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
-        }
-        /**
-         * If the variant definition is a variant label, or
-         * the function returned a variant label, resolve.
-         */
-        if (typeof definition === "string") {
-            definition = props.variants && props.variants[definition];
-        }
-        /**
-         * At this point we've resolved both functions and variant labels,
-         * but the resolved variant label might itself have been a function.
-         * If so, resolve. This can only have returned a valid target object.
-         */
-        if (typeof definition === "function") {
-            const [current, velocity] = getValueState(visualElement);
-            definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
-        }
-        return definition;
-    }
-
-    function resolveVariant(visualElement, definition, custom) {
-        const props = visualElement.getProps();
-        return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement);
-    }
-
-    /**
-     * Set VisualElement's MotionValue, creating a new MotionValue for it if
-     * it doesn't exist.
-     */
-    function setMotionValue(visualElement, key, value) {
-        if (visualElement.hasValue(key)) {
-            visualElement.getValue(key).set(value);
-        }
-        else {
-            visualElement.addValue(key, motionValue(value));
-        }
-    }
-    function setTarget(visualElement, definition) {
-        const resolved = resolveVariant(visualElement, definition);
-        let { transitionEnd = {}, transition = {}, ...target } = resolved || {};
-        target = { ...target, ...transitionEnd };
-        for (const key in target) {
-            const value = resolveFinalValueInKeyframes(target[key]);
-            setMotionValue(visualElement, key, value);
-        }
-    }
-
-    /**
-     * Convert camelCase to dash-case properties.
-     */
-    const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
-
-    const optimizedAppearDataId = "framerAppearId";
-    const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
-
-    function getOptimisedAppearId(visualElement) {
-        return visualElement.props[optimizedAppearDataAttribute];
-    }
-
-    function isWillChangeMotionValue(value) {
-        return Boolean(isMotionValue(value) && value.add);
-    }
-
-    function addValueToWillChange(visualElement, key) {
-        const willChange = visualElement.getValue("willChange");
-        /**
-         * It could be that a user has set willChange to a regular MotionValue,
-         * in which case we can't add the value to it.
-         */
-        if (isWillChangeMotionValue(willChange)) {
-            return willChange.add(key);
-        }
-    }
-
     /**
      * Decide whether we should block this animation. Previously, we achieved this
      * just by checking whether the key was listed in protectedKeys, but this
@@ -4054,7 +4148,7 @@
             }
             const valueTransition = {
                 delay,
-                ...getValueTransition(transition || {}, key),
+                ...getValueTransition$1(transition || {}, key),
             };
             /**
              * If this is the first time a value is being animated, check
@@ -4201,7 +4295,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "11.15.0", `Attempting to mix Motion versions ${nextValue.version} with 11.15.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "11.16.0", `Attempting to mix Motion versions ${nextValue.version} with 11.16.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -5332,12 +5426,9 @@
         state.set(element, animationState);
         return state.get(element);
     }
-    class NativeAnimation {
+    class NativeAnimation extends NativeAnimationControls {
         constructor(element, valueName, valueKeyframes, options) {
             const isCSSVar = valueName.startsWith("--");
-            this.setValue = isCSSVar ? setCSSVar : setStyle;
-            this.options = options;
-            this.updateFinishedPromise();
             exports.invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
             const existingAnimation = getElementAnimationState(element).get(valueName);
             existingAnimation && existingAnimation.stop();
@@ -5362,92 +5453,32 @@
             else {
                 options.ease = options.ease || defaultEasing;
             }
-            this.removeAnimation = () => { var _a; return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName); };
             const onFinish = () => {
-                this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, this.options));
+                this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, options));
                 this.cancel();
                 this.resolveFinishedPromise();
             };
+            const init = () => {
+                this.setValue = isCSSVar ? setCSSVar : setStyle;
+                this.options = options;
+                this.updateFinishedPromise();
+                this.removeAnimation = () => { var _a; return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName); };
+            };
             if (!supportsWaapi()) {
+                super();
+                init();
                 onFinish();
             }
             else {
-                this.animation = startWaapiAnimation(element, valueName, valueKeyframes, options);
+                super(startWaapiAnimation(element, valueName, valueKeyframes, options));
+                init();
                 if (options.autoplay === false) {
                     this.animation.pause();
                 }
                 this.animation.onfinish = onFinish;
-                if (this.pendingTimeline) {
-                    attachTimeline(this.animation, this.pendingTimeline);
-                }
                 getElementAnimationState(element).set(valueName, this);
             }
         }
-        get duration() {
-            return millisecondsToSeconds(this.options.duration || 300);
-        }
-        get time() {
-            var _a;
-            if (this.animation) {
-                return millisecondsToSeconds(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
-            }
-            return 0;
-        }
-        set time(newTime) {
-            if (this.animation) {
-                this.animation.currentTime = secondsToMilliseconds(newTime);
-            }
-        }
-        get speed() {
-            return this.animation ? this.animation.playbackRate : 1;
-        }
-        set speed(newSpeed) {
-            if (this.animation) {
-                this.animation.playbackRate = newSpeed;
-            }
-        }
-        get state() {
-            return this.animation ? this.animation.playState : "finished";
-        }
-        get startTime() {
-            return this.animation ? this.animation.startTime : null;
-        }
-        flatten() {
-            var _a;
-            if (!this.animation)
-                return;
-            (_a = this.animation.effect) === null || _a === void 0 ? void 0 : _a.updateTiming({ easing: "linear" });
-        }
-        play() {
-            if (this.state === "finished") {
-                this.updateFinishedPromise();
-            }
-            this.animation && this.animation.play();
-        }
-        pause() {
-            this.animation && this.animation.pause();
-        }
-        stop() {
-            if (!this.animation ||
-                this.state === "idle" ||
-                this.state === "finished") {
-                return;
-            }
-            if (this.animation.commitStyles) {
-                this.animation.commitStyles();
-            }
-            this.cancel();
-        }
-        complete() {
-            this.animation && this.animation.finish();
-        }
-        cancel() {
-            this.removeAnimation();
-            try {
-                this.animation && this.animation.cancel();
-            }
-            catch (e) { }
-        }
         /**
          * Allows the returned animation to be awaited or promise-chained. Currently
          * resolves when the animation finishes at all but in a future update could/should
@@ -5461,14 +5492,15 @@
                 this.resolveFinishedPromise = resolve;
             });
         }
-        attachTimeline(timeline) {
-            if (!this.animation) {
-                this.pendingTimeline = timeline;
-            }
-            else {
-                attachTimeline(this.animation, timeline);
+        play() {
+            if (this.state === "finished") {
+                this.updateFinishedPromise();
             }
-            return noop;
+            super.play();
+        }
+        cancel() {
+            this.removeAnimation();
+            super.cancel();
         }
     }
 
@@ -5489,7 +5521,7 @@
             for (const valueName in keyframes) {
                 const valueKeyframes = keyframes[valueName];
                 const valueOptions = {
-                    ...getValueTransition(elementTransition, valueName),
+                    ...getValueTransition$1(elementTransition, valueName),
                 };
                 valueOptions.duration = valueOptions.duration
                     ? secondsToMilliseconds(valueOptions.duration)
@@ -5509,6 +5541,21 @@
     };
     const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
 
+    function observeTimeline(update, timeline) {
+        let prevProgress;
+        const onFrame = () => {
+            const { currentTime } = timeline;
+            const percentage = currentTime === null ? 0 : currentTime.value;
+            const progress = percentage / 100;
+            if (prevProgress !== progress) {
+                update(progress);
+            }
+            prevProgress = progress;
+        };
+        frame.update(onFrame, true);
+        return () => cancelFrame(onFrame);
+    }
+
     const resizeHandlers = new WeakMap();
     let observer;
     function getElementSize(target, borderBoxSize) {
@@ -5967,21 +6014,6 @@
         };
     }
 
-    function observeTimeline(update, timeline) {
-        let prevProgress;
-        const onFrame = () => {
-            const { currentTime } = timeline;
-            const percentage = currentTime === null ? 0 : currentTime.value;
-            const progress = percentage / 100;
-            if (prevProgress !== progress) {
-                update(progress);
-            }
-            prevProgress = progress;
-        };
-        frame.update(onFrame, true);
-        return () => cancelFrame(onFrame);
-    }
-
     function scrollTimelineFallback({ source, container, axis = "y", }) {
         // Support legacy source argument. Deprecate later.
         if (source)
@@ -6138,24 +6170,6 @@
         };
     }
 
-    const isCustomValueType = (v) => {
-        return v && typeof v === "object" && v.mix;
-    };
-    const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
-    function transform(...args) {
-        const useImmediate = !Array.isArray(args[0]);
-        const argOffset = useImmediate ? 0 : -1;
-        const inputValue = args[0 + argOffset];
-        const inputRange = args[1 + argOffset];
-        const outputRange = args[2 + argOffset];
-        const options = args[3 + argOffset];
-        const interpolator = interpolate(inputRange, outputRange, {
-            mixer: getMixer(outputRange[0]),
-            ...options,
-        });
-        return useImmediate ? interpolator(inputValue) : interpolator;
-    }
-
     /**
      * Timeout defined in ms
      */
@@ -6183,6 +6197,24 @@
         return Math.sqrt(xDelta ** 2 + yDelta ** 2);
     }
 
+    const isCustomValueType = (v) => {
+        return v && typeof v === "object" && v.mix;
+    };
+    const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
+    function transform(...args) {
+        const useImmediate = !Array.isArray(args[0]);
+        const argOffset = useImmediate ? 0 : -1;
+        const inputValue = args[0 + argOffset];
+        const inputRange = args[1 + argOffset];
+        const outputRange = args[2 + argOffset];
+        const options = args[3 + argOffset];
+        const interpolator = interpolate(inputRange, outputRange, {
+            mixer: getMixer(outputRange[0]),
+            ...options,
+        });
+        return useImmediate ? interpolator(inputValue) : interpolator;
+    }
+
     /**
      * @deprecated
      *