framer-motion 7.7.3 → 7.8.1

package/dist/framer-motion.dev.js

@@ -1867,2065 +1867,2135 @@
     }
 
     /**
-     * Converts seconds to milliseconds
-     *
-     * @param seconds - Time in seconds.
-     * @return milliseconds - Converted time in milliseconds.
+     * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
      */
-    const secondsToMilliseconds = (seconds) => seconds * 1000;
+    const isNumericalString = (v) => /^\-?\d*\.?\d+$/.test(v);
 
-    var warning = function () { };
-    var invariant = function () { };
-    {
-        warning = function (check, message) {
-            if (!check && typeof console !== 'undefined') {
-                console.warn(message);
-            }
-        };
-        invariant = function (check, message) {
-            if (!check) {
-                throw new Error(message);
-            }
-        };
-    }
+    /**
+     * Check if the value is a zero value string like "0px" or "0%"
+     */
+    const isZeroValueString = (v) => /^0[^.\s]+$/.test(v);
 
-    const noop = (any) => any;
+    const frameData = {
+        delta: 0,
+        timestamp: 0,
+    };
 
     /*
-      Bezier function generator
-      This has been modified from Gaëtan Renaudeau's BezierEasing
-      https://github.com/gre/bezier-easing/blob/master/src/index.js
-      https://github.com/gre/bezier-easing/blob/master/LICENSE
-      
-      I've removed the newtonRaphsonIterate algo because in benchmarking it
-      wasn't noticiably faster than binarySubdivision, indeed removing it
-      usually improved times, depending on the curve.
-      I also removed the lookup table, as for the added bundle size and loop we're
-      only cutting ~4 or so subdivision iterations. I bumped the max iterations up
-      to 12 to compensate and this still tended to be faster for no perceivable
-      loss in accuracy.
-      Usage
-        const easeOut = cubicBezier(.17,.67,.83,.67);
-        const x = easeOut(0.5); // returns 0.627...
-    */
-    // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-    const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
-        t;
-    const subdivisionPrecision = 0.0000001;
-    const subdivisionMaxIterations = 12;
-    function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-        let currentX;
-        let currentT;
-        let i = 0;
-        do {
-            currentT = lowerBound + (upperBound - lowerBound) / 2.0;
-            currentX = calcBezier(currentT, mX1, mX2) - x;
-            if (currentX > 0.0) {
-                upperBound = currentT;
-            }
-            else {
-                lowerBound = currentT;
-            }
-        } while (Math.abs(currentX) > subdivisionPrecision &&
-            ++i < subdivisionMaxIterations);
-        return currentT;
-    }
-    function cubicBezier(mX1, mY1, mX2, mY2) {
-        // If this is a linear gradient, return linear easing
-        if (mX1 === mY1 && mX2 === mY2)
-            return noop;
-        const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
-        // If animation is at start/end, return t without easing
-        return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
-    }
-
-    // Accepts an easing function and returns a new one that outputs mirrored values for
-    // the second half of the animation. Turns easeIn into easeInOut.
-    const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
-
-    // Accepts an easing function and returns a new one that outputs reversed values.
-    // Turns easeIn into easeOut.
-    const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
-
-    const easeIn = (p) => p * p;
-    const easeOut = reverseEasing(easeIn);
-    const easeInOut = mirrorEasing(easeIn);
-
-    const circIn = (p) => 1 - Math.sin(Math.acos(p));
-    const circOut = reverseEasing(circIn);
-    const circInOut = mirrorEasing(circOut);
+      Detect and load appropriate clock setting for the execution environment
+     */
+    const defaultTimestep = (1 / 60) * 1000;
+    const getCurrentTime = typeof performance !== "undefined"
+        ? () => performance.now()
+        : () => Date.now();
+    const onNextFrame = typeof window !== "undefined"
+        ? (callback) => window.requestAnimationFrame(callback)
+        : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
 
-    const createBackIn = (power = 1.525) => (p) => p * p * ((power + 1) * p - power);
-    const backIn = createBackIn();
-    const backOut = reverseEasing(backIn);
-    const backInOut = mirrorEasing(backIn);
+    function createRenderStep(runNextFrame) {
+        /**
+         * We create and reuse two arrays, one to queue jobs for the current frame
+         * and one for the next. We reuse to avoid triggering GC after x frames.
+         */
+        let toRun = [];
+        let toRunNextFrame = [];
+        /**
+         *
+         */
+        let numToRun = 0;
+        /**
+         * 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();
+        const step = {
+            /**
+             * Schedule a process to run on the next frame.
+             */
+            schedule: (callback, keepAlive = false, immediate = false) => {
+                const addToCurrentFrame = immediate && isProcessing;
+                const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
+                if (keepAlive)
+                    toKeepAlive.add(callback);
+                // If the buffer doesn't already contain this callback, add it
+                if (buffer.indexOf(callback) === -1) {
+                    buffer.push(callback);
+                    // If we're adding it to the currently running buffer, update its measured size
+                    if (addToCurrentFrame && isProcessing)
+                        numToRun = toRun.length;
+                }
+                return callback;
+            },
+            /**
+             * Cancel the provided callback from running on the next frame.
+             */
+            cancel: (callback) => {
+                const index = toRunNextFrame.indexOf(callback);
+                if (index !== -1)
+                    toRunNextFrame.splice(index, 1);
+                toKeepAlive.delete(callback);
+            },
+            /**
+             * Execute all schedule callbacks.
+             */
+            process: (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;
+                [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
+                // Clear the next frame list
+                toRunNextFrame.length = 0;
+                // Execute this frame
+                numToRun = toRun.length;
+                if (numToRun) {
+                    for (let i = 0; i < numToRun; i++) {
+                        const callback = toRun[i];
+                        callback(frameData);
+                        if (toKeepAlive.has(callback)) {
+                            step.schedule(callback);
+                            runNextFrame();
+                        }
+                    }
+                }
+                isProcessing = false;
+                if (flushNextFrame) {
+                    flushNextFrame = false;
+                    step.process(frameData);
+                }
+            },
+        };
+        return step;
+    }
 
-    const createAnticipate = (power) => {
-        const backEasing = createBackIn(power);
-        return (p) => (p *= 2) < 1
-            ? 0.5 * backEasing(p)
-            : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+    const maxElapsed$1 = 40;
+    let useDefaultElapsed = true;
+    let runNextFrame = false;
+    let isProcessing = false;
+    const stepsOrder = [
+        "read",
+        "update",
+        "preRender",
+        "render",
+        "postRender",
+    ];
+    const steps = stepsOrder.reduce((acc, key) => {
+        acc[key] = createRenderStep(() => (runNextFrame = true));
+        return acc;
+    }, {});
+    const sync = stepsOrder.reduce((acc, key) => {
+        const step = steps[key];
+        acc[key] = (process, keepAlive = false, immediate = false) => {
+            if (!runNextFrame)
+                startLoop();
+            return step.schedule(process, keepAlive, immediate);
+        };
+        return acc;
+    }, {});
+    const cancelSync = stepsOrder.reduce((acc, key) => {
+        acc[key] = steps[key].cancel;
+        return acc;
+    }, {});
+    const flushSync = stepsOrder.reduce((acc, key) => {
+        acc[key] = () => steps[key].process(frameData);
+        return acc;
+    }, {});
+    const processStep = (stepId) => steps[stepId].process(frameData);
+    const processFrame = (timestamp) => {
+        runNextFrame = false;
+        frameData.delta = useDefaultElapsed
+            ? defaultTimestep
+            : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed$1), 1);
+        frameData.timestamp = timestamp;
+        isProcessing = true;
+        stepsOrder.forEach(processStep);
+        isProcessing = false;
+        if (runNextFrame) {
+            useDefaultElapsed = false;
+            onNextFrame(processFrame);
+        }
+    };
+    const startLoop = () => {
+        runNextFrame = true;
+        useDefaultElapsed = true;
+        if (!isProcessing)
+            onNextFrame(processFrame);
     };
-    const anticipate = createAnticipate();
 
-    const easingLookup = {
-        linear: noop,
-        easeIn,
-        easeInOut,
-        easeOut,
-        circIn,
-        circInOut,
-        circOut,
-        backIn,
-        backInOut,
-        backOut,
-        anticipate,
-    };
-    const easingDefinitionToFunction = (definition) => {
-        if (Array.isArray(definition)) {
-            // If cubic bezier definition, create bezier curve
-            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
-            invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
-            return easingLookup[definition];
+    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);
+    }
+    // Adapted from array-move
+    function moveItem([...arr], fromIndex, toIndex) {
+        const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
+        if (startIndex >= 0 && startIndex < arr.length) {
+            const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
+            const [item] = arr.splice(fromIndex, 1);
+            arr.splice(endIndex, 0, item);
         }
-        return definition;
-    };
-    const isEasingArray = (ease) => {
-        return Array.isArray(ease) && typeof ease[0] !== "number";
-    };
-
-    /**
-     * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
-     * but false if a number or multiple colors
-     */
-    const isColorString = (type, testProp) => (v) => {
-        return Boolean((isString$1(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
-            (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
-    };
-    const splitColor = (aName, bName, cName) => (v) => {
-        if (!isString$1(v))
-            return v;
-        const [a, b, c, alpha] = v.match(floatRegex);
-        return {
-            [aName]: parseFloat(a),
-            [bName]: parseFloat(b),
-            [cName]: parseFloat(c),
-            alpha: alpha !== undefined ? parseFloat(alpha) : 1,
-        };
-    };
-
-    const clampRgbUnit = (v) => clamp$1(0, 255, v);
-    const rgbUnit = {
-        ...number,
-        transform: (v) => Math.round(clampRgbUnit(v)),
-    };
-    const rgba = {
-        test: isColorString("rgb", "red"),
-        parse: splitColor("red", "green", "blue"),
-        transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" +
-            rgbUnit.transform(red) +
-            ", " +
-            rgbUnit.transform(green) +
-            ", " +
-            rgbUnit.transform(blue) +
-            ", " +
-            sanitize(alpha.transform(alpha$1)) +
-            ")",
-    };
+        return arr;
+    }
 
-    function parseHex(v) {
-        let r = "";
-        let g = "";
-        let b = "";
-        let a = "";
-        // If we have 6 characters, ie #FF0000
-        if (v.length > 5) {
-            r = v.substring(1, 3);
-            g = v.substring(3, 5);
-            b = v.substring(5, 7);
-            a = v.substring(7, 9);
-            // Or we have 3 characters, ie #F00
+    class SubscriptionManager {
+        constructor() {
+            this.subscriptions = [];
         }
-        else {
-            r = v.substring(1, 2);
-            g = v.substring(2, 3);
-            b = v.substring(3, 4);
-            a = v.substring(4, 5);
-            r += r;
-            g += g;
-            b += b;
-            a += a;
+        add(handler) {
+            addUniqueItem(this.subscriptions, handler);
+            return () => removeItem(this.subscriptions, handler);
         }
-        return {
-            red: parseInt(r, 16),
-            green: parseInt(g, 16),
-            blue: parseInt(b, 16),
-            alpha: a ? parseInt(a, 16) / 255 : 1,
-        };
-    }
-    const hex = {
-        test: isColorString("#"),
-        parse: parseHex,
-        transform: rgba.transform,
-    };
-
-    const hsla = {
-        test: isColorString("hsl", "hue"),
-        parse: splitColor("hue", "saturation", "lightness"),
-        transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
-            return ("hsla(" +
-                Math.round(hue) +
-                ", " +
-                percent.transform(sanitize(saturation)) +
-                ", " +
-                percent.transform(sanitize(lightness)) +
-                ", " +
-                sanitize(alpha.transform(alpha$1)) +
-                ")");
-        },
-    };
-
-    const color = {
-        test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
-        parse: (v) => {
-            if (rgba.test(v)) {
-                return rgba.parse(v);
-            }
-            else if (hsla.test(v)) {
-                return hsla.parse(v);
+        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 {
-                return hex.parse(v);
+                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);
+                }
             }
-        },
-        transform: (v) => {
-            return isString$1(v)
-                ? v
-                : v.hasOwnProperty("red")
-                    ? rgba.transform(v)
-                    : hsla.transform(v);
-        },
-    };
-
-    const colorToken = "${c}";
-    const numberToken = "${n}";
-    function test(v) {
-        var _a, _b;
-        return (isNaN(v) &&
-            isString$1(v) &&
-            (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
-                (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
-                0);
-    }
-    function analyseComplexValue(v) {
-        if (typeof v === "number")
-            v = `${v}`;
-        const values = [];
-        let numColors = 0;
-        let numNumbers = 0;
-        const colors = v.match(colorRegex);
-        if (colors) {
-            numColors = colors.length;
-            // Strip colors from input so they're not picked up by number regex.
-            // There's a better way to combine these regex searches, but its beyond my regex skills
-            v = v.replace(colorRegex, colorToken);
-            values.push(...colors.map(color.parse));
         }
-        const numbers = v.match(floatRegex);
-        if (numbers) {
-            numNumbers = numbers.length;
-            v = v.replace(floatRegex, numberToken);
-            values.push(...numbers.map(number.parse));
+        getSize() {
+            return this.subscriptions.length;
+        }
+        clear() {
+            this.subscriptions.length = 0;
         }
-        return { values, numColors, numNumbers, tokenised: v };
-    }
-    function parse(v) {
-        return analyseComplexValue(v).values;
-    }
-    function createTransformer(source) {
-        const { values, numColors, tokenised } = analyseComplexValue(source);
-        const numValues = values.length;
-        return (v) => {
-            let output = tokenised;
-            for (let i = 0; i < numValues; i++) {
-                output = output.replace(i < numColors ? colorToken : numberToken, i < numColors
-                    ? color.transform(v[i])
-                    : sanitize(v[i]));
-            }
-            return output;
-        };
     }
-    const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
-    function getAnimatableNone$1(v) {
-        const parsed = parse(v);
-        const transformer = createTransformer(v);
-        return transformer(parsed.map(convertNumbersToZero));
+
+    /*
+      Convert velocity into velocity per second
+
+      @param [number]: Unit per frame
+      @param [number]: Frame duration in ms
+    */
+    function velocityPerSecond$1(velocity, frameDuration) {
+        return frameDuration ? velocity * (1000 / frameDuration) : 0;
     }
-    const complex = { test, parse, createTransformer, getAnimatableNone: getAnimatableNone$1 };
 
+    const isFloat = (value) => {
+        return !isNaN(parseFloat(value));
+    };
     /**
-     * Check if a value is animatable. Examples:
-     *
-     * ✅: 100, "100px", "#fff"
-     * ❌: "block", "url(2.jpg)"
-     * @param value
+     * `MotionValue` is used to track the state and velocity of motion values.
      *
-     * @internal
+     * @public
      */
-    const isAnimatable = (key, value) => {
-        // If the list of keys tat might be non-animatable grows, replace with Set
-        if (key === "zIndex")
-            return false;
-        // If it's a number or a keyframes array, we can animate it. We might at some point
-        // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
-        // but for now lets leave it like this for performance reasons
-        if (typeof value === "number" || Array.isArray(value))
-            return true;
-        if (typeof value === "string" && // It's animatable if we have a string
-            complex.test(value) && // And it contains numbers and/or colors
-            !value.startsWith("url(") // Unless it starts with "url("
-        ) {
-            return true;
+    class MotionValue {
+        /**
+         * @param init - The initiating value
+         * @param config - Optional configuration options
+         *
+         * -  `transformer`: A function to transform incoming values with.
+         *
+         * @internal
+         */
+        constructor(init) {
+            /**
+             * 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 = "7.8.1";
+            /**
+             * Duration, in milliseconds, since last updating frame.
+             *
+             * @internal
+             */
+            this.timeDelta = 0;
+            /**
+             * Timestamp of the last time this `MotionValue` was updated.
+             *
+             * @internal
+             */
+            this.lastUpdated = 0;
+            /**
+             * Functions to notify when the `MotionValue` updates.
+             *
+             * @internal
+             */
+            this.updateSubscribers = new SubscriptionManager();
+            /**
+             * Functions to notify when the velocity updates.
+             *
+             * @internal
+             */
+            this.velocityUpdateSubscribers = new SubscriptionManager();
+            /**
+             * Functions to notify when the `MotionValue` updates and `render` is set to `true`.
+             *
+             * @internal
+             */
+            this.renderSubscribers = new SubscriptionManager();
+            /**
+             * 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 = false;
+            this.updateAndNotify = (v, render = true) => {
+                this.prev = this.current;
+                this.current = v;
+                // Update timestamp
+                const { delta, timestamp } = frameData;
+                if (this.lastUpdated !== timestamp) {
+                    this.timeDelta = delta;
+                    this.lastUpdated = timestamp;
+                    sync.postRender(this.scheduleVelocityCheck);
+                }
+                // Update update subscribers
+                if (this.prev !== this.current) {
+                    this.updateSubscribers.notify(this.current);
+                }
+                // Update velocity subscribers
+                if (this.velocityUpdateSubscribers.getSize()) {
+                    this.velocityUpdateSubscribers.notify(this.getVelocity());
+                }
+                // Update render subscribers
+                if (render) {
+                    this.renderSubscribers.notify(this.current);
+                }
+            };
+            /**
+             * Schedule a velocity check for the next frame.
+             *
+             * This is an instanced and bound function to prevent generating a new
+             * function once per frame.
+             *
+             * @internal
+             */
+            this.scheduleVelocityCheck = () => sync.postRender(this.velocityCheck);
+            /**
+             * Updates `prev` with `current` if the value hasn't been updated this frame.
+             * This ensures velocity calculations return `0`.
+             *
+             * This is an instanced and bound function to prevent generating a new
+             * function once per frame.
+             *
+             * @internal
+             */
+            this.velocityCheck = ({ timestamp }) => {
+                if (timestamp !== this.lastUpdated) {
+                    this.prev = this.current;
+                    this.velocityUpdateSubscribers.notify(this.getVelocity());
+                }
+            };
+            this.hasAnimated = false;
+            this.prev = this.current = init;
+            this.canTrackVelocity = isFloat(this.current);
         }
-        return false;
-    };
-
-    const underDampedSpring = () => ({
-        type: "spring",
-        stiffness: 500,
-        damping: 25,
-        restSpeed: 10,
-    });
-    const criticallyDampedSpring = (to) => ({
-        type: "spring",
-        stiffness: 550,
-        damping: to === 0 ? 2 * Math.sqrt(550) : 30,
-        restSpeed: 10,
-    });
-    const linearTween = () => ({
-        type: "keyframes",
-        ease: "linear",
-        duration: 0.3,
-    });
-    const keyframes$1 = (values) => ({
-        type: "keyframes",
-        duration: 0.8,
-        values,
-    });
-    const defaultTransitions = {
-        x: underDampedSpring,
-        y: underDampedSpring,
-        z: underDampedSpring,
-        rotate: underDampedSpring,
-        rotateX: underDampedSpring,
-        rotateY: underDampedSpring,
-        rotateZ: underDampedSpring,
-        scaleX: criticallyDampedSpring,
-        scaleY: criticallyDampedSpring,
-        scale: criticallyDampedSpring,
-        opacity: linearTween,
-        backgroundColor: linearTween,
-        color: linearTween,
-        default: criticallyDampedSpring,
-    };
-    const getDefaultTransition = (valueKey, to) => {
-        let transitionFactory;
-        if (isKeyframesTarget(to)) {
-            transitionFactory = keyframes$1;
+        /**
+         * 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.onChange(updateOpacity)
+         *     const unsubscribeY = y.onChange(updateOpacity)
+         *
+         *     return () => {
+         *       unsubscribeX()
+         *       unsubscribeY()
+         *     }
+         *   }, [])
+         *
+         *   return <motion.div style={{ x }} />
+         * }
+         * ```
+         *
+         * @privateRemarks
+         *
+         * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
+         *
+         * ```jsx
+         * useOnChange(x, () => {})
+         * ```
+         *
+         * @param subscriber - A function that receives the latest value.
+         * @returns A function that, when called, will cancel this subscription.
+         *
+         * @public
+         */
+        onChange(subscription) {
+            return this.updateSubscribers.add(subscription);
         }
-        else {
-            transitionFactory =
-                defaultTransitions[valueKey] || defaultTransitions.default;
+        clearListeners() {
+            this.updateSubscribers.clear();
+        }
+        /**
+         * Adds a function that will be notified when the `MotionValue` requests a render.
+         *
+         * @param subscriber - A function that's provided the latest value.
+         * @returns A function that, when called, will cancel this subscription.
+         *
+         * @internal
+         */
+        onRenderRequest(subscription) {
+            // Render immediately
+            subscription(this.get());
+            return this.renderSubscribers.add(subscription);
+        }
+        /**
+         * Attaches a passive effect to the `MotionValue`.
+         *
+         * @internal
+         */
+        attach(passiveEffect) {
+            this.passiveEffect = passiveEffect;
+        }
+        /**
+         * 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);
+            }
+        }
+        /**
+         * Returns the latest state of `MotionValue`
+         *
+         * @returns - The latest state of `MotionValue`
+         *
+         * @public
+         */
+        get() {
+            return this.current;
+        }
+        /**
+         * @public
+         */
+        getPrevious() {
+            return this.prev;
         }
-        return { to, ...transitionFactory(to) };
-    };
-
-    /**
-     * Properties that should default to 1 or 100%
-     */
-    const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
-    function applyDefaultFilter(v) {
-        const [name, value] = v.slice(0, -1).split("(");
-        if (name === "drop-shadow")
-            return v;
-        const [number] = value.match(floatRegex) || [];
-        if (!number)
-            return v;
-        const unit = value.replace(number, "");
-        let defaultValue = maxDefaults.has(name) ? 1 : 0;
-        if (number !== value)
-            defaultValue *= 100;
-        return name + "(" + defaultValue + unit + ")";
-    }
-    const functionRegex = /([a-z-]*)\(.*?\)/g;
-    const filter = {
-        ...complex,
-        getAnimatableNone: (v) => {
-            const functions = v.match(functionRegex);
-            return functions ? functions.map(applyDefaultFilter).join(" ") : v;
-        },
-    };
-
-    /**
-     * A map of default value types for common values
-     */
-    const defaultValueTypes = {
-        ...numberValueTypes,
-        // Color props
-        color,
-        backgroundColor: color,
-        outlineColor: color,
-        fill: color,
-        stroke: color,
-        // Border props
-        borderColor: color,
-        borderTopColor: color,
-        borderRightColor: color,
-        borderBottomColor: color,
-        borderLeftColor: color,
-        filter,
-        WebkitFilter: filter,
-    };
-    /**
-     * Gets the default ValueType for the provided value key
-     */
-    const getDefaultValueType = (key) => defaultValueTypes[key];
-
-    function getAnimatableNone(key, value) {
-        var _a;
-        let defaultValueType = getDefaultValueType(key);
-        if (defaultValueType !== filter)
-            defaultValueType = complex;
-        // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
-        return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);
-    }
-
-    const instantAnimationState = {
-        current: false,
-    };
-
-    /*
-      Detect and load appropriate clock setting for the execution environment
-     */
-    const defaultTimestep = (1 / 60) * 1000;
-    const getCurrentTime = typeof performance !== "undefined"
-        ? () => performance.now()
-        : () => Date.now();
-    const onNextFrame = typeof window !== "undefined"
-        ? (callback) => window.requestAnimationFrame(callback)
-        : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
-
-    function createRenderStep(runNextFrame) {
         /**
-         * We create and reuse two arrays, one to queue jobs for the current frame
-         * and one for the next. We reuse to avoid triggering GC after x frames.
+         * Returns the latest velocity of `MotionValue`
+         *
+         * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
+         *
+         * @public
          */
-        let toRun = [];
-        let toRunNextFrame = [];
+        getVelocity() {
+            // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful
+            return this.canTrackVelocity
+                ? // These casts could be avoided if parseFloat would be typed better
+                    velocityPerSecond$1(parseFloat(this.current) -
+                        parseFloat(this.prev), this.timeDelta)
+                : 0;
+        }
         /**
+         * 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
          */
-        let numToRun = 0;
+        start(animation) {
+            this.stop();
+            return new Promise((resolve) => {
+                this.hasAnimated = true;
+                this.stopAnimation = animation(resolve);
+            }).then(() => this.clearAnimation());
+        }
         /**
-         * 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.
+         * Stop the currently active animation.
+         *
+         * @public
          */
-        let isProcessing = false;
-        let flushNextFrame = false;
+        stop() {
+            if (this.stopAnimation)
+                this.stopAnimation();
+            this.clearAnimation();
+        }
         /**
-         * A set of processes which were marked keepAlive when scheduled.
+         * Returns `true` if this value is currently animating.
+         *
+         * @public
          */
-        const toKeepAlive = new WeakSet();
-        const step = {
-            /**
-             * Schedule a process to run on the next frame.
-             */
-            schedule: (callback, keepAlive = false, immediate = false) => {
-                const addToCurrentFrame = immediate && isProcessing;
-                const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
-                if (keepAlive)
-                    toKeepAlive.add(callback);
-                // If the buffer doesn't already contain this callback, add it
-                if (buffer.indexOf(callback) === -1) {
-                    buffer.push(callback);
-                    // If we're adding it to the currently running buffer, update its measured size
-                    if (addToCurrentFrame && isProcessing)
-                        numToRun = toRun.length;
-                }
-                return callback;
-            },
-            /**
-             * Cancel the provided callback from running on the next frame.
-             */
-            cancel: (callback) => {
-                const index = toRunNextFrame.indexOf(callback);
-                if (index !== -1)
-                    toRunNextFrame.splice(index, 1);
-                toKeepAlive.delete(callback);
-            },
-            /**
-             * Execute all schedule callbacks.
-             */
-            process: (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;
-                [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
-                // Clear the next frame list
-                toRunNextFrame.length = 0;
-                // Execute this frame
-                numToRun = toRun.length;
-                if (numToRun) {
-                    for (let i = 0; i < numToRun; i++) {
-                        const callback = toRun[i];
-                        callback(frameData);
-                        if (toKeepAlive.has(callback)) {
-                            step.schedule(callback);
-                            runNextFrame();
-                        }
-                    }
-                }
-                isProcessing = false;
-                if (flushNextFrame) {
-                    flushNextFrame = false;
-                    step.process(frameData);
-                }
-            },
-        };
-        return step;
+        isAnimating() {
+            return !!this.stopAnimation;
+        }
+        clearAnimation() {
+            this.stopAnimation = null;
+        }
+        /**
+         * 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.updateSubscribers.clear();
+            this.renderSubscribers.clear();
+            this.stop();
+        }
+    }
+    function motionValue(init) {
+        return new MotionValue(init);
     }
 
-    const frameData = {
-        delta: 0,
-        timestamp: 0,
+    /**
+     * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
+     * but false if a number or multiple colors
+     */
+    const isColorString = (type, testProp) => (v) => {
+        return Boolean((isString$1(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
+            (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
     };
-
-    const maxElapsed$1 = 40;
-    let useDefaultElapsed = true;
-    let runNextFrame = false;
-    let isProcessing = false;
-    const stepsOrder = [
-        "read",
-        "update",
-        "preRender",
-        "render",
-        "postRender",
-    ];
-    const steps = stepsOrder.reduce((acc, key) => {
-        acc[key] = createRenderStep(() => (runNextFrame = true));
-        return acc;
-    }, {});
-    const sync = stepsOrder.reduce((acc, key) => {
-        const step = steps[key];
-        acc[key] = (process, keepAlive = false, immediate = false) => {
-            if (!runNextFrame)
-                startLoop();
-            return step.schedule(process, keepAlive, immediate);
+    const splitColor = (aName, bName, cName) => (v) => {
+        if (!isString$1(v))
+            return v;
+        const [a, b, c, alpha] = v.match(floatRegex);
+        return {
+            [aName]: parseFloat(a),
+            [bName]: parseFloat(b),
+            [cName]: parseFloat(c),
+            alpha: alpha !== undefined ? parseFloat(alpha) : 1,
         };
-        return acc;
-    }, {});
-    const cancelSync = stepsOrder.reduce((acc, key) => {
-        acc[key] = steps[key].cancel;
-        return acc;
-    }, {});
-    const flushSync = stepsOrder.reduce((acc, key) => {
-        acc[key] = () => steps[key].process(frameData);
-        return acc;
-    }, {});
-    const processStep = (stepId) => steps[stepId].process(frameData);
-    const processFrame = (timestamp) => {
-        runNextFrame = false;
-        frameData.delta = useDefaultElapsed
-            ? defaultTimestep
-            : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed$1), 1);
-        frameData.timestamp = timestamp;
-        isProcessing = true;
-        stepsOrder.forEach(processStep);
-        isProcessing = false;
-        if (runNextFrame) {
-            useDefaultElapsed = false;
-            onNextFrame(processFrame);
-        }
-    };
-    const startLoop = () => {
-        runNextFrame = true;
-        useDefaultElapsed = true;
-        if (!isProcessing)
-            onNextFrame(processFrame);
     };
 
-    function delay(callback, timeout) {
-        const start = performance.now();
-        const checkElapsed = ({ timestamp }) => {
-            const elapsed = timestamp - start;
-            if (elapsed >= timeout) {
-                cancelSync.read(checkElapsed);
-                callback(elapsed - timeout);
-            }
-        };
-        sync.read(checkElapsed, true);
-        return () => cancelSync.read(checkElapsed);
-    }
-
-    /*
-      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 mix$1 = (from, to, progress) => -progress * from + progress * to + from;
+    const clampRgbUnit = (v) => clamp$1(0, 255, v);
+    const rgbUnit = {
+        ...number,
+        transform: (v) => Math.round(clampRgbUnit(v)),
+    };
+    const rgba = {
+        test: isColorString("rgb", "red"),
+        parse: splitColor("red", "green", "blue"),
+        transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" +
+            rgbUnit.transform(red) +
+            ", " +
+            rgbUnit.transform(green) +
+            ", " +
+            rgbUnit.transform(blue) +
+            ", " +
+            sanitize(alpha.transform(alpha$1)) +
+            ")",
+    };
 
-    // Adapted from https://gist.github.com/mjackson/5311256
-    function hueToRgb(p, q, t) {
-        if (t < 0)
-            t += 1;
-        if (t > 1)
-            t -= 1;
-        if (t < 1 / 6)
-            return p + (q - p) * 6 * t;
-        if (t < 1 / 2)
-            return q;
-        if (t < 2 / 3)
-            return p + (q - p) * (2 / 3 - t) * 6;
-        return p;
-    }
-    function hslaToRgba({ hue, saturation, lightness, alpha }) {
-        hue /= 360;
-        saturation /= 100;
-        lightness /= 100;
-        let red = 0;
-        let green = 0;
-        let blue = 0;
-        if (!saturation) {
-            red = green = blue = lightness;
+    function parseHex(v) {
+        let r = "";
+        let g = "";
+        let b = "";
+        let a = "";
+        // If we have 6 characters, ie #FF0000
+        if (v.length > 5) {
+            r = v.substring(1, 3);
+            g = v.substring(3, 5);
+            b = v.substring(5, 7);
+            a = v.substring(7, 9);
+            // Or we have 3 characters, ie #F00
         }
         else {
-            const q = lightness < 0.5
-                ? lightness * (1 + saturation)
-                : lightness + saturation - lightness * saturation;
-            const p = 2 * lightness - q;
-            red = hueToRgb(p, q, hue + 1 / 3);
-            green = hueToRgb(p, q, hue);
-            blue = hueToRgb(p, q, hue - 1 / 3);
+            r = v.substring(1, 2);
+            g = v.substring(2, 3);
+            b = v.substring(3, 4);
+            a = v.substring(4, 5);
+            r += r;
+            g += g;
+            b += b;
+            a += a;
         }
         return {
-            red: Math.round(red * 255),
-            green: Math.round(green * 255),
-            blue: Math.round(blue * 255),
-            alpha,
+            red: parseInt(r, 16),
+            green: parseInt(g, 16),
+            blue: parseInt(b, 16),
+            alpha: a ? parseInt(a, 16) / 255 : 1,
         };
     }
+    const hex = {
+        test: isColorString("#"),
+        parse: parseHex,
+        transform: rgba.transform,
+    };
 
-    // Linear color space blending
-    // Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
-    // Demonstrated http://codepen.io/osublake/pen/xGVVaN
-    const mixLinearColor = (from, to, v) => {
-        const fromExpo = from * from;
-        return Math.sqrt(Math.max(0, v * (to * to - fromExpo) + fromExpo));
+    const hsla = {
+        test: isColorString("hsl", "hue"),
+        parse: splitColor("hue", "saturation", "lightness"),
+        transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
+            return ("hsla(" +
+                Math.round(hue) +
+                ", " +
+                percent.transform(sanitize(saturation)) +
+                ", " +
+                percent.transform(sanitize(lightness)) +
+                ", " +
+                sanitize(alpha.transform(alpha$1)) +
+                ")");
+        },
     };
-    const colorTypes = [hex, rgba, hsla];
-    const getColorType = (v) => colorTypes.find((type) => type.test(v));
-    function asRGBA(color) {
-        const type = getColorType(color);
-        invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
-        let model = type.parse(color);
-        if (type === hsla) {
-            // TODO Remove this cast - needed since Framer Motion's stricter typing
-            model = hslaToRgba(model);
-        }
-        return model;
-    }
-    const mixColor = (from, to) => {
-        const fromRGBA = asRGBA(from);
-        const toRGBA = asRGBA(to);
-        const blended = { ...fromRGBA };
-        return (v) => {
-            blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
-            blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
-            blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
-            blended.alpha = mix$1(fromRGBA.alpha, toRGBA.alpha, v);
-            return rgba.transform(blended);
-        };
+
+    const color = {
+        test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
+        parse: (v) => {
+            if (rgba.test(v)) {
+                return rgba.parse(v);
+            }
+            else if (hsla.test(v)) {
+                return hsla.parse(v);
+            }
+            else {
+                return hex.parse(v);
+            }
+        },
+        transform: (v) => {
+            return isString$1(v)
+                ? v
+                : v.hasOwnProperty("red")
+                    ? rgba.transform(v)
+                    : hsla.transform(v);
+        },
     };
 
-    function getMixer$1(origin, target) {
-        if (typeof origin === "number") {
-            return (v) => mix$1(origin, target, v);
-        }
-        else if (color.test(origin)) {
-            return mixColor(origin, target);
+    const colorToken = "${c}";
+    const numberToken = "${n}";
+    function test(v) {
+        var _a, _b;
+        return (isNaN(v) &&
+            isString$1(v) &&
+            (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
+                (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
+                0);
+    }
+    function analyseComplexValue(v) {
+        if (typeof v === "number")
+            v = `${v}`;
+        const values = [];
+        let numColors = 0;
+        let numNumbers = 0;
+        const colors = v.match(colorRegex);
+        if (colors) {
+            numColors = colors.length;
+            // Strip colors from input so they're not picked up by number regex.
+            // There's a better way to combine these regex searches, but its beyond my regex skills
+            v = v.replace(colorRegex, colorToken);
+            values.push(...colors.map(color.parse));
         }
-        else {
-            return mixComplex(origin, target);
+        const numbers = v.match(floatRegex);
+        if (numbers) {
+            numNumbers = numbers.length;
+            v = v.replace(floatRegex, numberToken);
+            values.push(...numbers.map(number.parse));
         }
+        return { values, numColors, numNumbers, tokenised: v };
     }
-    const mixArray = (from, to) => {
-        const output = [...from];
-        const numValues = output.length;
-        const blendValue = from.map((fromThis, i) => getMixer$1(fromThis, to[i]));
+    function parse(v) {
+        return analyseComplexValue(v).values;
+    }
+    function createTransformer(source) {
+        const { values, numColors, tokenised } = analyseComplexValue(source);
+        const numValues = values.length;
         return (v) => {
+            let output = tokenised;
             for (let i = 0; i < numValues; i++) {
-                output[i] = blendValue[i](v);
-            }
-            return output;
-        };
-    };
-    const mixObject = (origin, target) => {
-        const output = { ...origin, ...target };
-        const blendValue = {};
-        for (const key in output) {
-            if (origin[key] !== undefined && target[key] !== undefined) {
-                blendValue[key] = getMixer$1(origin[key], target[key]);
-            }
-        }
-        return (v) => {
-            for (const key in blendValue) {
-                output[key] = blendValue[key](v);
+                output = output.replace(i < numColors ? colorToken : numberToken, i < numColors
+                    ? color.transform(v[i])
+                    : sanitize(v[i]));
             }
             return output;
         };
+    }
+    const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
+    function getAnimatableNone$1(v) {
+        const parsed = parse(v);
+        const transformer = createTransformer(v);
+        return transformer(parsed.map(convertNumbersToZero));
+    }
+    const complex = { test, parse, createTransformer, getAnimatableNone: getAnimatableNone$1 };
+
+    /**
+     * Properties that should default to 1 or 100%
+     */
+    const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
+    function applyDefaultFilter(v) {
+        const [name, value] = v.slice(0, -1).split("(");
+        if (name === "drop-shadow")
+            return v;
+        const [number] = value.match(floatRegex) || [];
+        if (!number)
+            return v;
+        const unit = value.replace(number, "");
+        let defaultValue = maxDefaults.has(name) ? 1 : 0;
+        if (number !== value)
+            defaultValue *= 100;
+        return name + "(" + defaultValue + unit + ")";
+    }
+    const functionRegex = /([a-z-]*)\(.*?\)/g;
+    const filter = {
+        ...complex,
+        getAnimatableNone: (v) => {
+            const functions = v.match(functionRegex);
+            return functions ? functions.map(applyDefaultFilter).join(" ") : v;
+        },
     };
-    const mixComplex = (origin, target) => {
-        const template = complex.createTransformer(target);
-        const originStats = analyseComplexValue(origin);
-        const targetStats = analyseComplexValue(target);
-        const canInterpolate = originStats.numColors === targetStats.numColors &&
-            originStats.numNumbers >= targetStats.numNumbers;
-        if (canInterpolate) {
-            return pipe(mixArray(originStats.values, targetStats.values), template);
-        }
-        else {
-            warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
-            return (p) => `${p > 0 ? target : origin}`;
-        }
+
+    /**
+     * A map of default value types for common values
+     */
+    const defaultValueTypes = {
+        ...numberValueTypes,
+        // Color props
+        color,
+        backgroundColor: color,
+        outlineColor: color,
+        fill: color,
+        stroke: color,
+        // Border props
+        borderColor: color,
+        borderTopColor: color,
+        borderRightColor: color,
+        borderBottomColor: color,
+        borderLeftColor: color,
+        filter,
+        WebkitFilter: filter,
     };
+    /**
+     * Gets the default ValueType for the provided value key
+     */
+    const getDefaultValueType = (key) => defaultValueTypes[key];
 
-    /*
-      Progress within given range
+    function getAnimatableNone(key, value) {
+        var _a;
+        let defaultValueType = getDefaultValueType(key);
+        if (defaultValueType !== filter)
+            defaultValueType = complex;
+        // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
+        return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);
+    }
 
-      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.
+    /**
+     * Tests a provided value against a ValueType
+     */
+    const testValueType = (v) => (type) => type.test(v);
 
-      @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$1 = (from, to, value) => {
-        const toFromDifference = to - from;
-        return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+    /**
+     * ValueType for "auto"
+     */
+    const auto = {
+        test: (v) => v === "auto",
+        parse: (v) => v,
     };
 
-    const mixNumber = (from, to) => (p) => mix$1(from, to, p);
-    function detectMixerFactory(v) {
-        if (typeof v === "number") {
-            return mixNumber;
-        }
-        else if (typeof v === "string") {
-            if (color.test(v)) {
-                return mixColor;
-            }
-            else {
-                return mixComplex;
-            }
-        }
-        else if (Array.isArray(v)) {
-            return mixArray;
-        }
-        else if (typeof v === "object") {
-            return mixObject;
-        }
-        return mixNumber;
-    }
-    function createMixers(output, ease, customMixer) {
-        const mixers = [];
-        const mixerFactory = customMixer || detectMixerFactory(output[0]);
-        const numMixers = output.length - 1;
-        for (let i = 0; i < numMixers; i++) {
-            let mixer = mixerFactory(output[i], output[i + 1]);
-            if (ease) {
-                const easingFunction = Array.isArray(ease) ? ease[i] : ease;
-                mixer = pipe(easingFunction, mixer);
-            }
-            mixers.push(mixer);
-        }
-        return mixers;
-    }
     /**
-     * Create a function that maps from a numerical input array to a generic output array.
-     *
-     * Accepts:
-     *   - Numbers
-     *   - Colors (hex, hsl, hsla, rgb, rgba)
-     *   - Complex (combinations of one or more numbers or strings)
-     *
-     * ```jsx
-     * const mixColor = interpolate([0, 1], ['#fff', '#000'])
-     *
-     * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
-     * ```
-     *
-     * TODO Revist this approach once we've moved to data models for values,
-     * probably not needed to pregenerate mixer functions.
-     *
-     * @public
+     * A list of value types commonly used for dimensions
      */
-    function interpolate$1(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
-        const inputLength = input.length;
-        invariant(inputLength === output.length, "Both input and output ranges must be the same length");
-        invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, "Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.");
-        // If input runs highest -> lowest, reverse both arrays
-        if (input[0] > input[inputLength - 1]) {
-            input = [...input].reverse();
-            output = [...output].reverse();
-        }
-        const mixers = createMixers(output, ease, mixer);
-        const numMixers = mixers.length;
-        const interpolator = (v) => {
-            let i = 0;
-            if (numMixers > 1) {
-                for (; i < input.length - 2; i++) {
-                    if (v < input[i + 1])
-                        break;
-                }
-            }
-            const progressInRange = progress$1(input[i], input[i + 1], v);
-            return mixers[i](progressInRange);
-        };
-        return isClamp
-            ? (v) => interpolator(clamp$1(input[0], input[inputLength - 1], v))
-            : interpolator;
-    }
+    const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
+    /**
+     * Tests a dimensional value against the list of dimension ValueTypes
+     */
+    const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
 
-    function defaultEasing(values, easing) {
-        return values.map(() => easing || easeInOut).splice(0, values.length - 1);
-    }
-    function defaultOffset$2(values) {
-        const numValues = values.length;
-        return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0);
+    /**
+     * A list of all ValueTypes
+     */
+    const valueTypes = [...dimensionValueTypes, color, complex];
+    /**
+     * Tests a value against the list of ValueTypes
+     */
+    const findValueType = (v) => valueTypes.find(testValueType(v));
+
+    /**
+     * Creates an object containing the latest state of every MotionValue on a VisualElement
+     */
+    function getCurrent(visualElement) {
+        const current = {};
+        visualElement.values.forEach((value, key) => (current[key] = value.get()));
+        return current;
     }
-    function convertOffsetToTimes(offset, duration) {
-        return offset.map((o) => o * duration);
+    /**
+     * Creates an object containing the latest velocity of every MotionValue on a VisualElement
+     */
+    function getVelocity$1(visualElement) {
+        const velocity = {};
+        visualElement.values.forEach((value, key) => (velocity[key] = value.getVelocity()));
+        return velocity;
     }
-    function keyframes({ from = 0, to = 1, ease, offset, duration = 300, }) {
-        /**
-         * 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: from };
-        /**
-         * Convert values to an array if they've been given as from/to options
-         */
-        const values = Array.isArray(to) ? to : [from, to];
-        /**
-         * Create a times array based on the provided 0-1 offsets
-         */
-        const times = convertOffsetToTimes(
-        // Only use the provided offsets if they're the correct length
-        // TODO Maybe we should warn here if there's a length mismatch
-        offset && offset.length === values.length
-            ? offset
-            : defaultOffset$2(values), duration);
-        function createInterpolator() {
-            return interpolate$1(times, values, {
-                ease: Array.isArray(ease) ? ease : defaultEasing(values, ease),
-            });
-        }
-        let interpolator = createInterpolator();
-        return {
-            next: (t) => {
-                state.value = interpolator(t);
-                state.done = t >= duration;
-                return state;
-            },
-            flipTarget: () => {
-                values.reverse();
-                interpolator = createInterpolator();
-            },
-        };
+    function resolveVariant(visualElement, definition, custom) {
+        const props = visualElement.getProps();
+        return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, getCurrent(visualElement), getVelocity$1(visualElement));
     }
 
-    const safeMin = 0.001;
-    const minDuration = 0.01;
-    const maxDuration = 10.0;
-    const minDamping = 0.05;
-    const maxDamping = 1;
-    function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
-        let envelope;
-        let derivative;
-        warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
-        let dampingRatio = 1 - bounce;
-        /**
-         * Restrict dampingRatio and duration to within acceptable ranges.
-         */
-        dampingRatio = clamp$1(minDamping, maxDamping, dampingRatio);
-        duration = clamp$1(minDuration, maxDuration, duration / 1000);
-        if (dampingRatio < 1) {
-            /**
-             * Underdamped spring
-             */
-            envelope = (undampedFreq) => {
-                const exponentialDecay = undampedFreq * dampingRatio;
-                const delta = exponentialDecay * duration;
-                const a = exponentialDecay - velocity;
-                const b = calcAngularFreq(undampedFreq, dampingRatio);
-                const c = Math.exp(-delta);
-                return safeMin - (a / b) * c;
-            };
-            derivative = (undampedFreq) => {
-                const exponentialDecay = undampedFreq * dampingRatio;
-                const delta = exponentialDecay * duration;
-                const d = delta * velocity + velocity;
-                const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;
-                const f = Math.exp(-delta);
-                const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);
-                const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;
-                return (factor * ((d - e) * f)) / g;
-            };
-        }
-        else {
-            /**
-             * Critically-damped spring
-             */
-            envelope = (undampedFreq) => {
-                const a = Math.exp(-undampedFreq * duration);
-                const b = (undampedFreq - velocity) * duration + 1;
-                return -safeMin + a * b;
-            };
-            derivative = (undampedFreq) => {
-                const a = Math.exp(-undampedFreq * duration);
-                const b = (velocity - undampedFreq) * (duration * duration);
-                return a * b;
-            };
-        }
-        const initialGuess = 5 / duration;
-        const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
-        duration = duration * 1000;
-        if (isNaN(undampedFreq)) {
-            return {
-                stiffness: 100,
-                damping: 10,
-                duration,
-            };
+    /**
+     * 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 {
-            const stiffness = Math.pow(undampedFreq, 2) * mass;
-            return {
-                stiffness,
-                damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),
-                duration,
-            };
+            visualElement.addValue(key, motionValue(value));
         }
     }
-    const rootIterations = 12;
-    function approximateRoot(envelope, derivative, initialGuess) {
-        let result = initialGuess;
-        for (let i = 1; i < rootIterations; i++) {
-            result = result - envelope(result) / derivative(result);
+    function setTarget(visualElement, definition) {
+        const resolved = resolveVariant(visualElement, definition);
+        let { transitionEnd = {}, transition = {}, ...target } = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {};
+        target = { ...target, ...transitionEnd };
+        for (const key in target) {
+            const value = resolveFinalValueInKeyframes(target[key]);
+            setMotionValue(visualElement, key, value);
         }
-        return result;
     }
-    function calcAngularFreq(undampedFreq, dampingRatio) {
-        return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
-    }
-
-    const durationKeys = ["duration", "bounce"];
-    const physicsKeys = ["stiffness", "damping", "mass"];
-    function isSpringType(options, keys) {
-        return keys.some((key) => options[key] !== undefined);
+    function setVariants(visualElement, variantLabels) {
+        const reversedLabels = [...variantLabels].reverse();
+        reversedLabels.forEach((key) => {
+            var _a;
+            const variant = visualElement.getVariant(key);
+            variant && setTarget(visualElement, variant);
+            (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
+                setVariants(child, variantLabels);
+            });
+        });
     }
-    function getSpringOptions(options) {
-        let springOptions = {
-            velocity: 0.0,
-            stiffness: 100,
-            damping: 10,
-            mass: 1.0,
-            isResolvedFromDuration: false,
-            ...options,
-        };
-        // stiffness/damping/mass overrides duration/bounce
-        if (!isSpringType(options, physicsKeys) &&
-            isSpringType(options, durationKeys)) {
-            const derived = findSpring(options);
-            springOptions = {
-                ...springOptions,
-                ...derived,
-                velocity: 0.0,
-                mass: 1.0,
-            };
-            springOptions.isResolvedFromDuration = true;
+    function setValues(visualElement, definition) {
+        if (Array.isArray(definition)) {
+            return setVariants(visualElement, definition);
+        }
+        else if (typeof definition === "string") {
+            return setVariants(visualElement, [definition]);
+        }
+        else {
+            setTarget(visualElement, definition);
         }
-        return springOptions;
     }
-    /**
-     * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
-     */
-    function spring({ from = 0.0, to = 1.0, restSpeed = 2, restDelta = 0.01, ...options }) {
-        /**
-         * 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: from };
-        let { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
-        let resolveSpring = zero;
-        let resolveVelocity = zero;
-        function createSpring() {
-            const initialVelocity = velocity ? -(velocity / 1000) : 0.0;
-            const initialDelta = to - from;
-            const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
-            const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
+    function checkTargetForNewValues(visualElement, target, origin) {
+        var _a, _b;
+        const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));
+        const numNewValues = newValueKeys.length;
+        if (!numNewValues)
+            return;
+        for (let i = 0; i < numNewValues; i++) {
+            const key = newValueKeys[i];
+            const targetValue = target[key];
+            let value = null;
             /**
-             * If we're working within what looks like a 0-1 range, change the default restDelta
-             * to 0.01
+             * If the target is a series of keyframes, we can use the first value
+             * in the array. If this first value is null, we'll still need to read from the DOM.
              */
-            if (restDelta === undefined) {
-                restDelta = Math.min(Math.abs(to - from) / 100, 0.4);
+            if (Array.isArray(targetValue)) {
+                value = targetValue[0];
             }
-            if (dampingRatio < 1) {
-                const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
-                // Underdamped spring
-                resolveSpring = (t) => {
-                    const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                    return (to -
-                        envelope *
-                            (((initialVelocity +
-                                dampingRatio * undampedAngularFreq * initialDelta) /
-                                angularFreq) *
-                                Math.sin(angularFreq * t) +
-                                initialDelta * Math.cos(angularFreq * t)));
-                };
-                resolveVelocity = (t) => {
-                    // TODO Resolve these calculations with the above
-                    const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                    return (dampingRatio *
-                        undampedAngularFreq *
-                        envelope *
-                        ((Math.sin(angularFreq * t) *
-                            (initialVelocity +
-                                dampingRatio *
-                                    undampedAngularFreq *
-                                    initialDelta)) /
-                            angularFreq +
-                            initialDelta * Math.cos(angularFreq * t)) -
-                        envelope *
-                            (Math.cos(angularFreq * t) *
-                                (initialVelocity +
-                                    dampingRatio *
-                                        undampedAngularFreq *
-                                        initialDelta) -
-                                angularFreq *
-                                    initialDelta *
-                                    Math.sin(angularFreq * t)));
-                };
+            /**
+             * If the target isn't keyframes, or the first keyframe was null, we need to
+             * first check if an origin value was explicitly defined in the transition as "from",
+             * if not read the value from the DOM. As an absolute fallback, take the defined target value.
+             */
+            if (value === null) {
+                value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key];
             }
-            else if (dampingRatio === 1) {
-                // Critically damped spring
-                resolveSpring = (t) => to -
-                    Math.exp(-undampedAngularFreq * t) *
-                        (initialDelta +
-                            (initialVelocity + undampedAngularFreq * initialDelta) *
-                                t);
+            /**
+             * If value is still undefined or null, ignore it. Preferably this would throw,
+             * but this was causing issues in Framer.
+             */
+            if (value === undefined || value === null)
+                continue;
+            if (typeof value === "string" &&
+                (isNumericalString(value) || isZeroValueString(value))) {
+                // If this is a number read as a string, ie "0" or "200", convert it to a number
+                value = parseFloat(value);
             }
-            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 (to -
-                        (envelope *
-                            ((initialVelocity +
-                                dampingRatio * undampedAngularFreq * initialDelta) *
-                                Math.sinh(freqForT) +
-                                dampedAngularFreq *
-                                    initialDelta *
-                                    Math.cosh(freqForT))) /
-                            dampedAngularFreq);
-                };
+            else if (!findValueType(value) && complex.test(targetValue)) {
+                value = getAnimatableNone(key, targetValue);
+            }
+            visualElement.addValue(key, motionValue(value));
+            if (origin[key] === undefined) {
+                origin[key] = value;
             }
+            if (value !== null)
+                visualElement.setBaseTarget(key, value);
         }
-        createSpring();
-        return {
-            next: (t) => {
-                const current = resolveSpring(t);
-                if (!isResolvedFromDuration) {
-                    const currentVelocity = resolveVelocity(t) * 1000;
-                    const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
-                    const isBelowDisplacementThreshold = Math.abs(to - current) <= restDelta;
-                    state.done =
-                        isBelowVelocityThreshold && isBelowDisplacementThreshold;
-                }
-                else {
-                    state.done = t >= duration;
+    }
+    function getOriginFromTransition(key, transition) {
+        if (!transition)
+            return;
+        const valueTransition = transition[key] || transition["default"] || transition;
+        return valueTransition.from;
+    }
+    function getOrigin(target, transition, visualElement) {
+        var _a;
+        const origin = {};
+        for (const key in target) {
+            const transitionOrigin = getOriginFromTransition(key, transition);
+            origin[key] =
+                transitionOrigin !== undefined
+                    ? transitionOrigin
+                    : (_a = visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.get();
+        }
+        return origin;
+    }
+
+    function isWillChangeMotionValue(value) {
+        return Boolean(isMotionValue(value) && value.add);
+    }
+
+    const appearStoreId = (id, value) => `${id}: ${value}`;
+
+    function handoffOptimizedAppearAnimation(id, name) {
+        const { MotionAppearAnimations } = window;
+        const animationId = appearStoreId(id, transformProps.has(name) ? "transform" : name);
+        const animation = MotionAppearAnimations && MotionAppearAnimations.get(animationId);
+        if (animation) {
+            /**
+             * We allow the animation to persist until the next frame:
+             *   1. So it continues to play until Framer Motion is ready to render
+             *      (avoiding a potential flash of the element's original state)
+             *   2. As all independent transforms share a single transform animation, stopping
+             *      it synchronously would prevent subsequent transforms from handing off.
+             */
+            sync.render(() => {
+                /**
+                 * Animation.cancel() throws so it needs to be wrapped in a try/catch
+                 */
+                try {
+                    animation.cancel();
+                    MotionAppearAnimations.delete(animationId);
                 }
-                state.value = state.done ? to : current;
-                return state;
-            },
-            flipTarget: () => {
-                velocity = -velocity;
-                [from, to] = [to, from];
-                createSpring();
-            },
+                catch (e) { }
+            });
+            return animation.currentTime || 0;
+        }
+        else {
+            return 0;
+        }
+    }
+
+    const optimizedAppearDataId = "framerAppearId";
+    const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
+
+    var warning = function () { };
+    var invariant = function () { };
+    {
+        warning = function (check, message) {
+            if (!check && typeof console !== 'undefined') {
+                console.warn(message);
+            }
+        };
+        invariant = function (check, message) {
+            if (!check) {
+                throw new Error(message);
+            }
+        };
+    }
+
+    /**
+     * Converts seconds to milliseconds
+     *
+     * @param seconds - Time in seconds.
+     * @return milliseconds - Converted time in milliseconds.
+     */
+    const secondsToMilliseconds = (seconds) => seconds * 1000;
+
+    const instantAnimationState = {
+        current: false,
+    };
+
+    /**
+     *
+     */
+    function createAcceleratedAnimation() {
+        return () => { };
+    }
+
+    /**
+     * Timeout defined in ms
+     */
+    function delay(callback, timeout) {
+        const start = performance.now();
+        const checkElapsed = ({ timestamp }) => {
+            const elapsed = timestamp - start;
+            if (elapsed >= timeout) {
+                cancelSync.read(checkElapsed);
+                callback(elapsed - timeout);
+            }
         };
+        sync.read(checkElapsed, true);
+        return () => cancelSync.read(checkElapsed);
     }
-    spring.needsInterpolation = (a, b) => typeof a === "string" || typeof b === "string";
-    const zero = (_t) => 0;
 
-    function decay({ velocity = 0, from = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget, }) {
-        /**
-         * 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: from };
-        let amplitude = power * velocity;
-        const ideal = from + 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 - from;
-        return {
-            next: (t) => {
-                const delta = -amplitude * Math.exp(-t / timeConstant);
-                state.done = !(delta > restDelta || delta < -restDelta);
-                state.value = state.done ? target : target + delta;
-                return state;
-            },
-            flipTarget: () => { },
+    function createInstantAnimation({ keyframes, elapsed, onUpdate, onComplete, }) {
+        const setValue = () => {
+            onUpdate && onUpdate(keyframes[keyframes.length - 1]);
+            onComplete && onComplete();
+            return () => { };
         };
+        return elapsed ? delay(setValue, -elapsed) : setValue();
     }
 
-    const types = { decay, keyframes, spring };
-    function loopElapsed(elapsed, duration, delay = 0) {
-        return elapsed - duration - delay;
+    // Accepts an easing function and returns a new one that outputs mirrored values for
+    // the second half of the animation. Turns easeIn into easeInOut.
+    const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
+
+    // Accepts an easing function and returns a new one that outputs reversed values.
+    // Turns easeIn into easeOut.
+    const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
+
+    const easeIn = (p) => p * p;
+    const easeOut = reverseEasing(easeIn);
+    const easeInOut = mirrorEasing(easeIn);
+
+    /*
+      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 mix$1 = (from, to, progress) => -progress * from + progress * to + from;
+
+    // Adapted from https://gist.github.com/mjackson/5311256
+    function hueToRgb(p, q, t) {
+        if (t < 0)
+            t += 1;
+        if (t > 1)
+            t -= 1;
+        if (t < 1 / 6)
+            return p + (q - p) * 6 * t;
+        if (t < 1 / 2)
+            return q;
+        if (t < 2 / 3)
+            return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
     }
-    function reverseElapsed(elapsed, duration = 0, delay = 0, isForwardPlayback = true) {
-        return isForwardPlayback
-            ? loopElapsed(duration + -elapsed, duration, delay)
-            : duration - (elapsed - duration) + delay;
+    function hslaToRgba({ hue, saturation, lightness, alpha }) {
+        hue /= 360;
+        saturation /= 100;
+        lightness /= 100;
+        let red = 0;
+        let green = 0;
+        let blue = 0;
+        if (!saturation) {
+            red = green = blue = lightness;
+        }
+        else {
+            const q = lightness < 0.5
+                ? lightness * (1 + saturation)
+                : lightness + saturation - lightness * saturation;
+            const p = 2 * lightness - q;
+            red = hueToRgb(p, q, hue + 1 / 3);
+            green = hueToRgb(p, q, hue);
+            blue = hueToRgb(p, q, hue - 1 / 3);
+        }
+        return {
+            red: Math.round(red * 255),
+            green: Math.round(green * 255),
+            blue: Math.round(blue * 255),
+            alpha,
+        };
     }
-    function hasRepeatDelayElapsed(elapsed, duration, delay, isForwardPlayback) {
-        return isForwardPlayback ? elapsed >= duration + delay : elapsed <= -delay;
+
+    // Linear color space blending
+    // Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
+    // Demonstrated http://codepen.io/osublake/pen/xGVVaN
+    const mixLinearColor = (from, to, v) => {
+        const fromExpo = from * from;
+        return Math.sqrt(Math.max(0, v * (to * to - fromExpo) + fromExpo));
+    };
+    const colorTypes = [hex, rgba, hsla];
+    const getColorType = (v) => colorTypes.find((type) => type.test(v));
+    function asRGBA(color) {
+        const type = getColorType(color);
+        invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
+        let model = type.parse(color);
+        if (type === hsla) {
+            // TODO Remove this cast - needed since Framer Motion's stricter typing
+            model = hslaToRgba(model);
+        }
+        return model;
     }
-    const framesync = (update) => {
-        const passTimestamp = ({ delta }) => update(delta);
-        return {
-            start: () => sync.update(passTimestamp, true),
-            stop: () => cancelSync.update(passTimestamp),
+    const mixColor = (from, to) => {
+        const fromRGBA = asRGBA(from);
+        const toRGBA = asRGBA(to);
+        const blended = { ...fromRGBA };
+        return (v) => {
+            blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
+            blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
+            blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
+            blended.alpha = mix$1(fromRGBA.alpha, toRGBA.alpha, v);
+            return rgba.transform(blended);
         };
     };
-    function animate$1({ from, autoplay = true, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
-        var _a, _b;
-        let { to } = options;
-        let driverControls;
-        let repeatCount = 0;
-        let computedDuration = options
-            .duration;
-        let latest;
-        let isComplete = false;
-        let isForwardPlayback = true;
-        let interpolateFromNumber;
-        const animator = types[Array.isArray(to) ? "keyframes" : type];
-        if ((_b = (_a = animator).needsInterpolation) === null || _b === void 0 ? void 0 : _b.call(_a, from, to)) {
-            interpolateFromNumber = interpolate$1([0, 100], [from, to], {
-                clamp: false,
-            });
-            from = 0;
-            to = 100;
+
+    function getMixer$1(origin, target) {
+        if (typeof origin === "number") {
+            return (v) => mix$1(origin, target, v);
         }
-        const animation = animator({ ...options, from, to });
-        function repeat() {
-            repeatCount++;
-            if (repeatType === "reverse") {
-                isForwardPlayback = repeatCount % 2 === 0;
-                elapsed = reverseElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback);
+        else if (color.test(origin)) {
+            return mixColor(origin, target);
+        }
+        else {
+            return mixComplex(origin, target);
+        }
+    }
+    const mixArray = (from, to) => {
+        const output = [...from];
+        const numValues = output.length;
+        const blendValue = from.map((fromThis, i) => getMixer$1(fromThis, to[i]));
+        return (v) => {
+            for (let i = 0; i < numValues; i++) {
+                output[i] = blendValue[i](v);
+            }
+            return output;
+        };
+    };
+    const mixObject = (origin, target) => {
+        const output = { ...origin, ...target };
+        const blendValue = {};
+        for (const key in output) {
+            if (origin[key] !== undefined && target[key] !== undefined) {
+                blendValue[key] = getMixer$1(origin[key], target[key]);
+            }
+        }
+        return (v) => {
+            for (const key in blendValue) {
+                output[key] = blendValue[key](v);
+            }
+            return output;
+        };
+    };
+    const mixComplex = (origin, target) => {
+        const template = complex.createTransformer(target);
+        const originStats = analyseComplexValue(origin);
+        const targetStats = analyseComplexValue(target);
+        const canInterpolate = originStats.numColors === targetStats.numColors &&
+            originStats.numNumbers >= targetStats.numNumbers;
+        if (canInterpolate) {
+            return pipe(mixArray(originStats.values, targetStats.values), template);
+        }
+        else {
+            warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
+            return (p) => `${p > 0 ? target : origin}`;
+        }
+    };
+
+    /*
+      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$1 = (from, to, value) => {
+        const toFromDifference = to - from;
+        return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+    };
+
+    const mixNumber = (from, to) => (p) => mix$1(from, to, p);
+    function detectMixerFactory(v) {
+        if (typeof v === "number") {
+            return mixNumber;
+        }
+        else if (typeof v === "string") {
+            if (color.test(v)) {
+                return mixColor;
             }
             else {
-                elapsed = loopElapsed(elapsed, computedDuration, repeatDelay);
-                if (repeatType === "mirror")
-                    animation.flipTarget();
+                return mixComplex;
+            }
+        }
+        else if (Array.isArray(v)) {
+            return mixArray;
+        }
+        else if (typeof v === "object") {
+            return mixObject;
+        }
+        return mixNumber;
+    }
+    function createMixers(output, ease, customMixer) {
+        const mixers = [];
+        const mixerFactory = customMixer || detectMixerFactory(output[0]);
+        const numMixers = output.length - 1;
+        for (let i = 0; i < numMixers; i++) {
+            let mixer = mixerFactory(output[i], output[i + 1]);
+            if (ease) {
+                const easingFunction = Array.isArray(ease) ? ease[i] : ease;
+                mixer = pipe(easingFunction, mixer);
             }
-            isComplete = false;
-            onRepeat && onRepeat();
+            mixers.push(mixer);
         }
-        function complete() {
-            driverControls.stop();
-            onComplete && onComplete();
+        return mixers;
+    }
+    /**
+     * Create a function that maps from a numerical input array to a generic output array.
+     *
+     * Accepts:
+     *   - Numbers
+     *   - Colors (hex, hsl, hsla, rgb, rgba)
+     *   - Complex (combinations of one or more numbers or strings)
+     *
+     * ```jsx
+     * const mixColor = interpolate([0, 1], ['#fff', '#000'])
+     *
+     * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
+     * ```
+     *
+     * TODO Revist this approach once we've moved to data models for values,
+     * probably not needed to pregenerate mixer functions.
+     *
+     * @public
+     */
+    function interpolate$1(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
+        const inputLength = input.length;
+        invariant(inputLength === output.length, "Both input and output ranges must be the same length");
+        invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, "Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.");
+        // If input runs highest -> lowest, reverse both arrays
+        if (input[0] > input[inputLength - 1]) {
+            input = [...input].reverse();
+            output = [...output].reverse();
         }
-        function update(delta) {
-            if (!isForwardPlayback)
-                delta = -delta;
-            elapsed += delta;
-            if (!isComplete) {
-                const state = animation.next(Math.max(0, elapsed));
-                latest = state.value;
-                if (interpolateFromNumber)
-                    latest = interpolateFromNumber(latest);
-                isComplete = isForwardPlayback ? state.done : elapsed <= 0;
-            }
-            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(latest);
-            if (isComplete) {
-                if (repeatCount === 0) {
-                    computedDuration =
-                        computedDuration !== undefined ? computedDuration : elapsed;
-                }
-                if (repeatCount < repeatMax) {
-                    hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();
-                }
-                else {
-                    complete();
+        const mixers = createMixers(output, ease, mixer);
+        const numMixers = mixers.length;
+        const interpolator = (v) => {
+            let i = 0;
+            if (numMixers > 1) {
+                for (; i < input.length - 2; i++) {
+                    if (v < input[i + 1])
+                        break;
                 }
             }
-        }
-        function play() {
-            onPlay === null || onPlay === void 0 ? void 0 : onPlay();
-            driverControls = driver(update);
-            driverControls.start();
-        }
-        autoplay && play();
-        return {
-            stop: () => {
-                onStop === null || onStop === void 0 ? void 0 : onStop();
-                driverControls.stop();
-            },
+            const progressInRange = progress$1(input[i], input[i + 1], v);
+            return mixers[i](progressInRange);
         };
+        return isClamp
+            ? (v) => interpolator(clamp$1(input[0], input[inputLength - 1], v))
+            : interpolator;
     }
 
-    /*
-      Convert velocity into velocity per second
+    const noop = (any) => any;
 
-      @param [number]: Unit per frame
-      @param [number]: Frame duration in ms
+    /*
+      Bezier function generator
+      This has been modified from Gaëtan Renaudeau's BezierEasing
+      https://github.com/gre/bezier-easing/blob/master/src/index.js
+      https://github.com/gre/bezier-easing/blob/master/LICENSE
+      
+      I've removed the newtonRaphsonIterate algo because in benchmarking it
+      wasn't noticiably faster than binarySubdivision, indeed removing it
+      usually improved times, depending on the curve.
+      I also removed the lookup table, as for the added bundle size and loop we're
+      only cutting ~4 or so subdivision iterations. I bumped the max iterations up
+      to 12 to compensate and this still tended to be faster for no perceivable
+      loss in accuracy.
+      Usage
+        const easeOut = cubicBezier(.17,.67,.83,.67);
+        const x = easeOut(0.5); // returns 0.627...
     */
-    function velocityPerSecond$1(velocity, frameDuration) {
-        return frameDuration ? velocity * (1000 / frameDuration) : 0;
+    // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+    const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
+        t;
+    const subdivisionPrecision = 0.0000001;
+    const subdivisionMaxIterations = 12;
+    function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
+        let currentX;
+        let currentT;
+        let i = 0;
+        do {
+            currentT = lowerBound + (upperBound - lowerBound) / 2.0;
+            currentX = calcBezier(currentT, mX1, mX2) - x;
+            if (currentX > 0.0) {
+                upperBound = currentT;
+            }
+            else {
+                lowerBound = currentT;
+            }
+        } while (Math.abs(currentX) > subdivisionPrecision &&
+            ++i < subdivisionMaxIterations);
+        return currentT;
+    }
+    function cubicBezier(mX1, mY1, mX2, mY2) {
+        // If this is a linear gradient, return linear easing
+        if (mX1 === mY1 && mX2 === mY2)
+            return noop;
+        const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
+        // If animation is at start/end, return t without easing
+        return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
     }
 
-    function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
-        let currentAnimation;
-        function isOutOfBounds(v) {
-            return (min !== undefined && v < min) || (max !== undefined && v > max);
-        }
-        function boundaryNearest(v) {
-            if (min === undefined)
-                return max;
-            if (max === undefined)
-                return min;
-            return Math.abs(min - v) < Math.abs(max - v) ? min : max;
-        }
-        function startAnimation(options) {
-            currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();
-            currentAnimation = animate$1({
-                ...options,
-                driver,
-                onUpdate: (v) => {
-                    var _a;
-                    onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(v);
-                    (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, v);
-                },
-                onComplete,
-                onStop,
-            });
-        }
-        function startSpring(options) {
-            startAnimation({
-                type: "spring",
-                stiffness: bounceStiffness,
-                damping: bounceDamping,
-                restDelta,
-                ...options,
-            });
-        }
-        if (isOutOfBounds(from)) {
-            // Start the animation with spring if outside the defined boundaries
-            startSpring({ from, velocity, to: boundaryNearest(from) });
+    const circIn = (p) => 1 - Math.sin(Math.acos(p));
+    const circOut = reverseEasing(circIn);
+    const circInOut = mirrorEasing(circOut);
+
+    const createBackIn = (power = 1.525) => (p) => p * p * ((power + 1) * p - power);
+    const backIn = createBackIn();
+    const backOut = reverseEasing(backIn);
+    const backInOut = mirrorEasing(backIn);
+
+    const createAnticipate = (power) => {
+        const backEasing = createBackIn(power);
+        return (p) => (p *= 2) < 1
+            ? 0.5 * backEasing(p)
+            : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+    };
+    const anticipate = createAnticipate();
+
+    const easingLookup = {
+        linear: noop,
+        easeIn,
+        easeInOut,
+        easeOut,
+        circIn,
+        circInOut,
+        circOut,
+        backIn,
+        backInOut,
+        backOut,
+        anticipate,
+    };
+    const easingDefinitionToFunction = (definition) => {
+        if (Array.isArray(definition)) {
+            // If cubic bezier definition, create bezier curve
+            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 {
-            /**
-             * Or if the value is out of bounds, simulate the inertia movement
-             * with the decay animation.
-             *
-             * Pre-calculate the target so we can detect if it's out-of-bounds.
-             * If it is, we want to check per frame when to switch to a spring
-             * animation
-             */
-            let target = power * velocity + from;
-            if (typeof modifyTarget !== "undefined")
-                target = modifyTarget(target);
-            const boundary = boundaryNearest(target);
-            const heading = boundary === min ? -1 : 1;
-            let prev;
-            let current;
-            const checkBoundary = (v) => {
-                prev = current;
-                current = v;
-                velocity = velocityPerSecond$1(v - prev, frameData.delta);
-                if ((heading === 1 && v > boundary) ||
-                    (heading === -1 && v < boundary)) {
-                    startSpring({ from: v, to: boundary, velocity });
-                }
-            };
-            startAnimation({
-                type: "decay",
-                from,
-                velocity,
-                timeConstant,
-                power,
-                restDelta,
-                modifyTarget,
-                onUpdate: isOutOfBounds(target) ? checkBoundary : undefined,
-            });
+        else if (typeof definition === "string") {
+            // Else lookup from table
+            invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
+            return easingLookup[definition];
         }
-        return {
-            stop: () => currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop(),
-        };
-    }
+        return definition;
+    };
+    const isEasingArray = (ease) => {
+        return Array.isArray(ease) && typeof ease[0] !== "number";
+    };
 
-    /**
-     * Decide whether a transition is defined on a given Transition.
-     * This filters out orchestration options and returns true
-     * if any options are left.
-     */
-    function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
-        return !!Object.keys(transition).length;
+    function defaultEasing(values, easing) {
+        return values.map(() => easing || easeInOut).splice(0, values.length - 1);
+    }
+    function defaultOffset$2(values) {
+        const numValues = values.length;
+        return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0);
     }
-    /**
-     * Convert Framer Motion's Transition type into Popmotion-compatible options.
-     */
-    function convertTransitionToAnimationOptions({ ease, times, ...transition }) {
-        const options = { ...transition };
-        if (times)
-            options["offset"] = times;
-        /**
-         * Convert any existing durations from seconds to milliseconds
-         */
-        if (transition.duration)
-            options["duration"] = secondsToMilliseconds(transition.duration);
-        if (transition.repeatDelay)
-            options.repeatDelay = secondsToMilliseconds(transition.repeatDelay);
+    function convertOffsetToTimes(offset, duration) {
+        return offset.map((o) => o * duration);
+    }
+    function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duration = 300, }) {
+        keyframeValues = [...keyframeValues];
+        const origin = keyframes[0];
         /**
-         * Map easing names to Popmotion's easing functions
+         * Easing functions can be externally defined as strings. Here we convert them
+         * into actual functions.
          */
-        if (ease) {
-            options["ease"] = isEasingArray(ease)
-                ? ease.map(easingDefinitionToFunction)
-                : easingDefinitionToFunction(ease);
-        }
+        const easingFunctions = isEasingArray(ease)
+            ? ease.map(easingDefinitionToFunction)
+            : easingDefinitionToFunction(ease);
         /**
-         * Support legacy transition API
+         * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+         * to reduce GC during animation.
          */
-        if (transition.type === "tween")
-            options.type = "keyframes";
+        const state = { done: false, value: origin };
         /**
-         * TODO: Popmotion 9 has the ability to automatically detect whether to use
-         * a keyframes or spring animation, but does so by detecting velocity and other spring options.
-         * It'd be good to introduce a similar thing here.
+         * Create a times array based on the provided 0-1 offsets
          */
-        if (transition.type !== "spring")
-            options.type = "keyframes";
-        return options;
-    }
-    /**
-     * Get the delay for a value by checking Transition with decreasing specificity.
-     */
-    function getDelayFromTransition(transition, key) {
-        const valueTransition = getValueTransition(transition, key) || {};
-        return valueTransition.delay !== undefined
-            ? valueTransition.delay
-            : transition.delay !== undefined
-                ? transition.delay
-                : 0;
-    }
-    function hydrateKeyframes(options) {
-        if (Array.isArray(options.to) && options.to[0] === null) {
-            options.to = [...options.to];
-            options.to[0] = options.from;
+        const absoluteTimes = convertOffsetToTimes(
+        // Only use the provided offsets if they're the correct length
+        // TODO Maybe we should warn here if there's a length mismatch
+        times && times.length === keyframes.length
+            ? times
+            : defaultOffset$2(keyframeValues), duration);
+        function createInterpolator() {
+            return interpolate$1(absoluteTimes, keyframeValues, {
+                ease: Array.isArray(easingFunctions)
+                    ? easingFunctions
+                    : defaultEasing(keyframeValues, easingFunctions),
+            });
         }
-        return options;
+        let interpolator = createInterpolator();
+        return {
+            next: (t) => {
+                state.value = interpolator(t);
+                state.done = t >= duration;
+                return state;
+            },
+            flipTarget: () => {
+                keyframeValues.reverse();
+                interpolator = createInterpolator();
+            },
+        };
     }
-    function getPopmotionAnimationOptions(transition, options, key) {
-        if (Array.isArray(options.to) && transition.duration === undefined) {
-            transition.duration = 0.8;
-        }
-        hydrateKeyframes(options);
+
+    const safeMin = 0.001;
+    const minDuration = 0.01;
+    const maxDuration = 10.0;
+    const minDamping = 0.05;
+    const maxDamping = 1;
+    function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
+        let envelope;
+        let derivative;
+        warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
+        let dampingRatio = 1 - bounce;
         /**
-         * Get a default transition if none is determined to be defined.
+         * Restrict dampingRatio and duration to within acceptable ranges.
          */
-        if (!isTransitionDefined(transition)) {
-            transition = {
-                ...transition,
-                ...getDefaultTransition(key, options.to),
+        dampingRatio = clamp$1(minDamping, maxDamping, dampingRatio);
+        duration = clamp$1(minDuration, maxDuration, duration / 1000);
+        if (dampingRatio < 1) {
+            /**
+             * Underdamped spring
+             */
+            envelope = (undampedFreq) => {
+                const exponentialDecay = undampedFreq * dampingRatio;
+                const delta = exponentialDecay * duration;
+                const a = exponentialDecay - velocity;
+                const b = calcAngularFreq(undampedFreq, dampingRatio);
+                const c = Math.exp(-delta);
+                return safeMin - (a / b) * c;
+            };
+            derivative = (undampedFreq) => {
+                const exponentialDecay = undampedFreq * dampingRatio;
+                const delta = exponentialDecay * duration;
+                const d = delta * velocity + velocity;
+                const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;
+                const f = Math.exp(-delta);
+                const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);
+                const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;
+                return (factor * ((d - e) * f)) / g;
             };
         }
-        return {
-            ...options,
-            ...convertTransitionToAnimationOptions(transition),
-        };
-    }
-    /**
-     *
-     */
-    function getAnimation(key, value, target, transition, onComplete) {
-        const valueTransition = getValueTransition(transition, key) || {};
-        let origin = valueTransition.from !== undefined ? valueTransition.from : value.get();
-        const isTargetAnimatable = isAnimatable(key, target);
-        if (origin === "none" && isTargetAnimatable && typeof target === "string") {
+        else {
             /**
-             * If we're trying to animate from "none", try and get an animatable version
-             * of the target. This could be improved to work both ways.
+             * Critically-damped spring
              */
-            origin = getAnimatableNone(key, target);
-        }
-        else if (isZero(origin) && typeof target === "string") {
-            origin = getZeroUnit(target);
-        }
-        else if (!Array.isArray(target) &&
-            isZero(target) &&
-            typeof origin === "string") {
-            target = getZeroUnit(origin);
+            envelope = (undampedFreq) => {
+                const a = Math.exp(-undampedFreq * duration);
+                const b = (undampedFreq - velocity) * duration + 1;
+                return -safeMin + a * b;
+            };
+            derivative = (undampedFreq) => {
+                const a = Math.exp(-undampedFreq * duration);
+                const b = (velocity - undampedFreq) * (duration * duration);
+                return a * b;
+            };
         }
-        const isOriginAnimatable = isAnimatable(key, origin);
-        warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${key} from "${origin}" to "${target}". ${origin} is not an animatable value - to enable this animation set ${origin} to a value animatable to ${target} via the \`style\` property.`);
-        function start() {
-            const options = {
-                from: origin,
-                to: target,
-                velocity: value.getVelocity(),
-                onComplete,
-                onUpdate: (v) => value.set(v),
+        const initialGuess = 5 / duration;
+        const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
+        duration = duration * 1000;
+        if (isNaN(undampedFreq)) {
+            return {
+                stiffness: 100,
+                damping: 10,
+                duration,
             };
-            return valueTransition.type === "inertia" ||
-                valueTransition.type === "decay"
-                ? inertia({ ...options, ...valueTransition })
-                : animate$1({
-                    ...getPopmotionAnimationOptions(valueTransition, options, key),
-                    onUpdate: (v) => {
-                        options.onUpdate(v);
-                        valueTransition.onUpdate && valueTransition.onUpdate(v);
-                    },
-                    onComplete: () => {
-                        options.onComplete();
-                        valueTransition.onComplete && valueTransition.onComplete();
-                    },
-                });
         }
-        function set() {
-            const finalTarget = resolveFinalValueInKeyframes(target);
-            value.set(finalTarget);
-            onComplete();
-            valueTransition.onUpdate && valueTransition.onUpdate(finalTarget);
-            valueTransition.onComplete && valueTransition.onComplete();
-            return { stop: () => { } };
+        else {
+            const stiffness = Math.pow(undampedFreq, 2) * mass;
+            return {
+                stiffness,
+                damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),
+                duration,
+            };
         }
-        return !isOriginAnimatable ||
-            !isTargetAnimatable ||
-            valueTransition.type === false
-            ? set
-            : start;
     }
-    function isZero(value) {
-        return (value === 0 ||
-            (typeof value === "string" &&
-                parseFloat(value) === 0 &&
-                value.indexOf(" ") === -1));
+    const rootIterations = 12;
+    function approximateRoot(envelope, derivative, initialGuess) {
+        let result = initialGuess;
+        for (let i = 1; i < rootIterations; i++) {
+            result = result - envelope(result) / derivative(result);
+        }
+        return result;
     }
-    function getZeroUnit(potentialUnitType) {
-        return typeof potentialUnitType === "number"
-            ? 0
-            : getAnimatableNone("", potentialUnitType);
+    function calcAngularFreq(undampedFreq, dampingRatio) {
+        return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
     }
-    function getValueTransition(transition, key) {
-        return transition[key] || transition["default"] || transition;
+
+    const durationKeys = ["duration", "bounce"];
+    const physicsKeys = ["stiffness", "damping", "mass"];
+    function isSpringType(options, keys) {
+        return keys.some((key) => options[key] !== undefined);
     }
-    /**
-     * Start animation on a MotionValue. This function is an interface between
-     * Framer Motion and Popmotion
-     */
-    function startAnimation(key, value, target, transition = {}) {
-        if (instantAnimationState.current) {
-            transition = { type: false };
-        }
-        return value.start((onComplete) => {
-            let controls;
-            const animation = getAnimation(key, value, target, transition, onComplete);
-            const delayBy = getDelayFromTransition(transition, key);
-            const start = () => (controls = animation());
-            let cancelDelay;
-            if (delayBy) {
-                cancelDelay = delay(start, secondsToMilliseconds(delayBy));
-            }
-            else {
-                start();
-            }
-            return () => {
-                cancelDelay && cancelDelay();
-                controls && controls.stop();
+    function getSpringOptions(options) {
+        let springOptions = {
+            velocity: 0.0,
+            stiffness: 100,
+            damping: 10,
+            mass: 1.0,
+            isResolvedFromDuration: false,
+            ...options,
+        };
+        // stiffness/damping/mass overrides duration/bounce
+        if (!isSpringType(options, physicsKeys) &&
+            isSpringType(options, durationKeys)) {
+            const derived = findSpring(options);
+            springOptions = {
+                ...springOptions,
+                ...derived,
+                velocity: 0.0,
+                mass: 1.0,
             };
-        });
+            springOptions.isResolvedFromDuration = true;
+        }
+        return springOptions;
     }
-
-    /**
-     * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
-     */
-    const isNumericalString = (v) => /^\-?\d*\.?\d+$/.test(v);
-
+    const velocitySampleDuration = 5;
     /**
-     * Check if the value is a zero value string like "0px" or "0%"
+     * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
      */
-    const isZeroValueString = (v) => /^0[^.\s]+$/.test(v);
-
-    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);
-    }
-    // Adapted from array-move
-    function moveItem([...arr], fromIndex, toIndex) {
-        const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
-        if (startIndex >= 0 && startIndex < arr.length) {
-            const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
-            const [item] = arr.splice(fromIndex, 1);
-            arr.splice(endIndex, 0, item);
-        }
-        return arr;
-    }
-
-    class SubscriptionManager {
-        constructor() {
-            this.subscriptions = [];
-        }
-        add(handler) {
-            addUniqueItem(this.subscriptions, handler);
-            return () => removeItem(this.subscriptions, handler);
-        }
-        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);
+    function spring({ keyframes, restSpeed = 2, restDelta = 0.01, ...options }) {
+        let origin = keyframes[0];
+        let target = keyframes[keyframes.length - 1];
+        /**
+         * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+         * to reduce GC during animation.
+         */
+        const state = { done: false, value: origin };
+        const { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
+        let resolveSpring = zero;
+        let initialVelocity = velocity ? -(velocity / 1000) : 0.0;
+        const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
+        function createSpring() {
+            const initialDelta = target - origin;
+            const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
+            /**
+             * If we're working within what looks like a 0-1 range, change the default restDelta
+             * to 0.01
+             */
+            if (restDelta === undefined) {
+                restDelta = Math.min(Math.abs(target - origin) / 100, 0.4);
             }
-            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);
-                }
+            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);
+                };
             }
         }
-        getSize() {
-            return this.subscriptions.length;
-        }
-        clear() {
-            this.subscriptions.length = 0;
-        }
+        createSpring();
+        return {
+            next: (t) => {
+                const current = resolveSpring(t);
+                if (!isResolvedFromDuration) {
+                    let currentVelocity = initialVelocity;
+                    if (t !== 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) {
+                            const prevT = Math.max(0, t - velocitySampleDuration);
+                            currentVelocity = velocityPerSecond$1(current - resolveSpring(prevT), t - prevT);
+                        }
+                        else {
+                            currentVelocity = 0;
+                        }
+                    }
+                    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;
+            },
+            flipTarget: () => {
+                initialVelocity = -initialVelocity;
+                [origin, target] = [target, origin];
+                createSpring();
+            },
+        };
     }
+    spring.needsInterpolation = (a, b) => typeof a === "string" || typeof b === "string";
+    const zero = (_t) => 0;
 
-    const isFloat = (value) => {
-        return !isNaN(parseFloat(value));
-    };
+    function decay({ 
     /**
-     * `MotionValue` is used to track the state and velocity of motion values.
-     *
-     * @public
+     * The decay animation dynamically calculates an end of the animation
+     * based on the initial keyframe, so we only need to define a single keyframe
+     * as default.
      */
-    class MotionValue {
+    keyframes = [0], velocity = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget, }) {
+        const origin = keyframes[0];
         /**
-         * @param init - The initiating value
-         * @param config - Optional configuration options
-         *
-         * -  `transformer`: A function to transform incoming values with.
-         *
-         * @internal
+         * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+         * to reduce GC during animation.
          */
-        constructor(init) {
-            /**
-             * 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 = "7.7.3";
-            /**
-             * Duration, in milliseconds, since last updating frame.
-             *
-             * @internal
-             */
-            this.timeDelta = 0;
-            /**
-             * Timestamp of the last time this `MotionValue` was updated.
-             *
-             * @internal
-             */
-            this.lastUpdated = 0;
-            /**
-             * Functions to notify when the `MotionValue` updates.
-             *
-             * @internal
-             */
-            this.updateSubscribers = new SubscriptionManager();
-            /**
-             * Functions to notify when the velocity updates.
-             *
-             * @internal
-             */
-            this.velocityUpdateSubscribers = new SubscriptionManager();
-            /**
-             * Functions to notify when the `MotionValue` updates and `render` is set to `true`.
-             *
-             * @internal
-             */
-            this.renderSubscribers = new SubscriptionManager();
-            /**
-             * 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 = false;
-            this.updateAndNotify = (v, render = true) => {
-                this.prev = this.current;
-                this.current = v;
-                // Update timestamp
-                const { delta, timestamp } = frameData;
-                if (this.lastUpdated !== timestamp) {
-                    this.timeDelta = delta;
-                    this.lastUpdated = timestamp;
-                    sync.postRender(this.scheduleVelocityCheck);
-                }
-                // Update update subscribers
-                if (this.prev !== this.current) {
-                    this.updateSubscribers.notify(this.current);
-                }
-                // Update velocity subscribers
-                if (this.velocityUpdateSubscribers.getSize()) {
-                    this.velocityUpdateSubscribers.notify(this.getVelocity());
-                }
-                // Update render subscribers
-                if (render) {
-                    this.renderSubscribers.notify(this.current);
-                }
-            };
-            /**
-             * Schedule a velocity check for the next frame.
-             *
-             * This is an instanced and bound function to prevent generating a new
-             * function once per frame.
-             *
-             * @internal
-             */
-            this.scheduleVelocityCheck = () => sync.postRender(this.velocityCheck);
-            /**
-             * Updates `prev` with `current` if the value hasn't been updated this frame.
-             * This ensures velocity calculations return `0`.
-             *
-             * This is an instanced and bound function to prevent generating a new
-             * function once per frame.
-             *
-             * @internal
-             */
-            this.velocityCheck = ({ timestamp }) => {
-                if (timestamp !== this.lastUpdated) {
-                    this.prev = this.current;
-                    this.velocityUpdateSubscribers.notify(this.getVelocity());
-                }
-            };
-            this.hasAnimated = false;
-            this.prev = this.current = init;
-            this.canTrackVelocity = isFloat(this.current);
-        }
+        const state = { done: false, value: origin };
+        let amplitude = power * velocity;
+        const ideal = origin + amplitude;
+        const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
         /**
-         * 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.onChange(updateOpacity)
-         *     const unsubscribeY = y.onChange(updateOpacity)
-         *
-         *     return () => {
-         *       unsubscribeX()
-         *       unsubscribeY()
-         *     }
-         *   }, [])
-         *
-         *   return <motion.div style={{ x }} />
-         * }
-         * ```
-         *
-         * @privateRemarks
-         *
-         * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
-         *
-         * ```jsx
-         * useOnChange(x, () => {})
-         * ```
-         *
-         * @param subscriber - A function that receives the latest value.
-         * @returns A function that, when called, will cancel this subscription.
-         *
-         * @public
+         * If the target has changed we need to re-calculate the amplitude, otherwise
+         * the animation will start from the wrong position.
          */
-        onChange(subscription) {
-            return this.updateSubscribers.add(subscription);
-        }
-        clearListeners() {
-            this.updateSubscribers.clear();
+        if (target !== ideal)
+            amplitude = target - origin;
+        return {
+            next: (t) => {
+                const delta = -amplitude * Math.exp(-t / timeConstant);
+                state.done = !(delta > restDelta || delta < -restDelta);
+                state.value = state.done ? target : target + delta;
+                return state;
+            },
+            flipTarget: () => { },
+        };
+    }
+
+    const types = {
+        decay,
+        keyframes: keyframes,
+        tween: keyframes,
+        spring,
+    };
+    function loopElapsed(elapsed, duration, delay = 0) {
+        return elapsed - duration - delay;
+    }
+    function reverseElapsed(elapsed, duration = 0, delay = 0, isForwardPlayback = true) {
+        return isForwardPlayback
+            ? loopElapsed(duration + -elapsed, duration, delay)
+            : duration - (elapsed - duration) + delay;
+    }
+    function hasRepeatDelayElapsed(elapsed, duration, delay, isForwardPlayback) {
+        return isForwardPlayback ? elapsed >= duration + delay : elapsed <= -delay;
+    }
+    const framesync = (update) => {
+        const passTimestamp = ({ delta }) => update(delta);
+        return {
+            start: () => sync.update(passTimestamp, true),
+            stop: () => cancelSync.update(passTimestamp),
+        };
+    };
+    function animate$1({ duration, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, keyframes, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
+        var _a, _b;
+        let driverControls;
+        let repeatCount = 0;
+        let computedDuration = duration;
+        let latest;
+        let isComplete = false;
+        let isForwardPlayback = true;
+        let interpolateFromNumber;
+        const animator = types[keyframes.length > 2 ? "keyframes" : type];
+        const origin = keyframes[0];
+        const target = keyframes[keyframes.length - 1];
+        if ((_b = (_a = animator).needsInterpolation) === null || _b === void 0 ? void 0 : _b.call(_a, origin, target)) {
+            interpolateFromNumber = interpolate$1([0, 100], [origin, target], {
+                clamp: false,
+            });
+            keyframes = [0, 100];
         }
-        /**
-         * Adds a function that will be notified when the `MotionValue` requests a render.
-         *
-         * @param subscriber - A function that's provided the latest value.
-         * @returns A function that, when called, will cancel this subscription.
-         *
-         * @internal
-         */
-        onRenderRequest(subscription) {
-            // Render immediately
-            subscription(this.get());
-            return this.renderSubscribers.add(subscription);
+        const animation = animator({
+            ...options,
+            duration,
+            keyframes,
+        });
+        function repeat() {
+            repeatCount++;
+            if (repeatType === "reverse") {
+                isForwardPlayback = repeatCount % 2 === 0;
+                elapsed = reverseElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback);
+            }
+            else {
+                elapsed = loopElapsed(elapsed, computedDuration, repeatDelay);
+                if (repeatType === "mirror")
+                    animation.flipTarget();
+            }
+            isComplete = false;
+            onRepeat && onRepeat();
         }
-        /**
-         * Attaches a passive effect to the `MotionValue`.
-         *
-         * @internal
-         */
-        attach(passiveEffect) {
-            this.passiveEffect = passiveEffect;
+        function complete() {
+            driverControls.stop();
+            onComplete && onComplete();
         }
-        /**
-         * 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);
+        function update(delta) {
+            if (!isForwardPlayback)
+                delta = -delta;
+            elapsed += delta;
+            if (!isComplete) {
+                const state = animation.next(Math.max(0, elapsed));
+                latest = state.value;
+                if (interpolateFromNumber)
+                    latest = interpolateFromNumber(latest);
+                isComplete = isForwardPlayback ? state.done : elapsed <= 0;
             }
-            else {
-                this.passiveEffect(v, this.updateAndNotify);
+            onUpdate && onUpdate(latest);
+            if (isComplete) {
+                if (repeatCount === 0) {
+                    computedDuration =
+                        computedDuration !== undefined ? computedDuration : elapsed;
+                }
+                if (repeatCount < repeatMax) {
+                    hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();
+                }
+                else {
+                    complete();
+                }
             }
         }
-        /**
-         * Returns the latest state of `MotionValue`
-         *
-         * @returns - The latest state of `MotionValue`
-         *
-         * @public
-         */
-        get() {
-            return this.current;
+        function play() {
+            onPlay && onPlay();
+            driverControls = driver(update);
+            driverControls.start();
         }
-        /**
-         * @public
-         */
-        getPrevious() {
-            return this.prev;
+        play();
+        return {
+            stop: () => {
+                onStop && onStop();
+                driverControls.stop();
+            },
+        };
+    }
+
+    function inertia({ keyframes, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
+        const origin = keyframes[0];
+        let currentAnimation;
+        function isOutOfBounds(v) {
+            return (min !== undefined && v < min) || (max !== undefined && v > max);
         }
-        /**
-         * Returns the latest velocity of `MotionValue`
-         *
-         * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-         *
-         * @public
-         */
-        getVelocity() {
-            // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful
-            return this.canTrackVelocity
-                ? // These casts could be avoided if parseFloat would be typed better
-                    velocityPerSecond$1(parseFloat(this.current) -
-                        parseFloat(this.prev), this.timeDelta)
-                : 0;
+        function findNearestBoundary(v) {
+            if (min === undefined)
+                return max;
+            if (max === undefined)
+                return min;
+            return Math.abs(min - v) < Math.abs(max - v) ? min : max;
         }
-        /**
-         * 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(animation) {
-            this.stop();
-            return new Promise((resolve) => {
-                this.hasAnimated = true;
-                this.stopAnimation = animation(resolve);
-            }).then(() => this.clearAnimation());
+        function startAnimation(options) {
+            currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();
+            currentAnimation = animate$1({
+                keyframes: [0, 1],
+                velocity: 0,
+                ...options,
+                driver,
+                onUpdate: (v) => {
+                    var _a;
+                    onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(v);
+                    (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, v);
+                },
+                onComplete,
+                onStop,
+            });
         }
-        /**
-         * Stop the currently active animation.
-         *
-         * @public
-         */
-        stop() {
-            if (this.stopAnimation)
-                this.stopAnimation();
-            this.clearAnimation();
+        function startSpring(options) {
+            startAnimation({
+                type: "spring",
+                stiffness: bounceStiffness,
+                damping: bounceDamping,
+                restDelta,
+                ...options,
+            });
         }
-        /**
-         * Returns `true` if this value is currently animating.
-         *
-         * @public
-         */
-        isAnimating() {
-            return !!this.stopAnimation;
+        if (isOutOfBounds(origin)) {
+            // Start the animation with spring if outside the defined boundaries
+            startSpring({
+                velocity,
+                keyframes: [origin, findNearestBoundary(origin)],
+            });
         }
-        clearAnimation() {
-            this.stopAnimation = null;
+        else {
+            /**
+             * Or if the value is out of bounds, simulate the inertia movement
+             * with the decay animation.
+             *
+             * Pre-calculate the target so we can detect if it's out-of-bounds.
+             * If it is, we want to check per frame when to switch to a spring
+             * animation
+             */
+            let target = power * velocity + origin;
+            if (typeof modifyTarget !== "undefined")
+                target = modifyTarget(target);
+            const boundary = findNearestBoundary(target);
+            const heading = boundary === min ? -1 : 1;
+            let prev;
+            let current;
+            const checkBoundary = (v) => {
+                prev = current;
+                current = v;
+                velocity = velocityPerSecond$1(v - prev, frameData.delta);
+                if ((heading === 1 && v > boundary) ||
+                    (heading === -1 && v < boundary)) {
+                    startSpring({ keyframes: [v, boundary], velocity });
+                }
+            };
+            startAnimation({
+                type: "decay",
+                keyframes: [origin, 0],
+                velocity,
+                timeConstant,
+                power,
+                restDelta,
+                modifyTarget,
+                onUpdate: isOutOfBounds(target) ? checkBoundary : undefined,
+            });
         }
-        /**
-         * 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.updateSubscribers.clear();
-            this.renderSubscribers.clear();
-            this.stop();
+        return {
+            stop: () => currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop(),
+        };
+    }
+
+    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 linearTween = () => ({
+        type: "keyframes",
+        ease: "linear",
+        duration: 0.3,
+    });
+    const keyframesTransition = {
+        type: "keyframes",
+        duration: 0.8,
+    };
+    const defaultTransitions = {
+        x: underDampedSpring,
+        y: underDampedSpring,
+        z: underDampedSpring,
+        rotate: underDampedSpring,
+        rotateX: underDampedSpring,
+        rotateY: underDampedSpring,
+        rotateZ: underDampedSpring,
+        scaleX: criticallyDampedSpring,
+        scaleY: criticallyDampedSpring,
+        scale: criticallyDampedSpring,
+        opacity: linearTween,
+        backgroundColor: linearTween,
+        color: linearTween,
+        default: criticallyDampedSpring,
+    };
+    const getDefaultTransition = (valueKey, { keyframes }) => {
+        if (keyframes.length > 2) {
+            return keyframesTransition;
+        }
+        else {
+            const factory = defaultTransitions[valueKey] || defaultTransitions.default;
+            return factory(keyframes[1]);
         }
-    }
-    function motionValue(init) {
-        return new MotionValue(init);
-    }
-
-    /**
-     * Tests a provided value against a ValueType
-     */
-    const testValueType = (v) => (type) => type.test(v);
-
-    /**
-     * ValueType for "auto"
-     */
-    const auto = {
-        test: (v) => v === "auto",
-        parse: (v) => v,
     };
 
     /**
-     * A list of value types commonly used for dimensions
-     */
-    const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
-    /**
-     * Tests a dimensional value against the list of dimension ValueTypes
-     */
-    const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
-
-    /**
-     * A list of all ValueTypes
-     */
-    const valueTypes = [...dimensionValueTypes, color, complex];
-    /**
-     * Tests a value against the list of ValueTypes
+     * Check if a value is animatable. Examples:
+     *
+     * ✅: 100, "100px", "#fff"
+     * ❌: "block", "url(2.jpg)"
+     * @param value
+     *
+     * @internal
      */
-    const findValueType = (v) => valueTypes.find(testValueType(v));
+    const isAnimatable = (key, value) => {
+        // If the list of keys tat might be non-animatable grows, replace with Set
+        if (key === "zIndex")
+            return false;
+        // If it's a number or a keyframes array, we can animate it. We might at some point
+        // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
+        // but for now lets leave it like this for performance reasons
+        if (typeof value === "number" || Array.isArray(value))
+            return true;
+        if (typeof value === "string" && // It's animatable if we have a string
+            complex.test(value) && // And it contains numbers and/or colors
+            !value.startsWith("url(") // Unless it starts with "url("
+        ) {
+            return true;
+        }
+        return false;
+    };
 
     /**
-     * Creates an object containing the latest state of every MotionValue on a VisualElement
+     * Decide whether a transition is defined on a given Transition.
+     * This filters out orchestration options and returns true
+     * if any options are left.
      */
-    function getCurrent(visualElement) {
-        const current = {};
-        visualElement.values.forEach((value, key) => (current[key] = value.get()));
-        return current;
+    function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
+        return !!Object.keys(transition).length;
     }
-    /**
-     * Creates an object containing the latest velocity of every MotionValue on a VisualElement
-     */
-    function getVelocity$1(visualElement) {
-        const velocity = {};
-        visualElement.values.forEach((value, key) => (velocity[key] = value.getVelocity()));
-        return velocity;
+    function isZero(value) {
+        return (value === 0 ||
+            (typeof value === "string" &&
+                parseFloat(value) === 0 &&
+                value.indexOf(" ") === -1));
     }
-    function resolveVariant(visualElement, definition, custom) {
-        const props = visualElement.getProps();
-        return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, getCurrent(visualElement), getVelocity$1(visualElement));
+    function getZeroUnit(potentialUnitType) {
+        return typeof potentialUnitType === "number"
+            ? 0
+            : getAnimatableNone("", potentialUnitType);
+    }
+    function getValueTransition(transition, key) {
+        return transition[key] || transition["default"] || transition;
     }
 
-    /**
-     * 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 getKeyframes(value, valueName, target, transition) {
+        const isTargetAnimatable = isAnimatable(valueName, target);
+        let origin = transition.from !== undefined ? transition.from : value.get();
+        if (origin === "none" && isTargetAnimatable && typeof target === "string") {
+            /**
+             * If we're trying to animate from "none", try and get an animatable version
+             * of the target. This could be improved to work both ways.
+             */
+            origin = getAnimatableNone(valueName, target);
         }
-    }
-    function setTarget(visualElement, definition) {
-        const resolved = resolveVariant(visualElement, definition);
-        let { transitionEnd = {}, transition = {}, ...target } = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {};
-        target = { ...target, ...transitionEnd };
-        for (const key in target) {
-            const value = resolveFinalValueInKeyframes(target[key]);
-            setMotionValue(visualElement, key, value);
+        else if (isZero(origin) && typeof target === "string") {
+            origin = getZeroUnit(target);
         }
-    }
-    function setVariants(visualElement, variantLabels) {
-        const reversedLabels = [...variantLabels].reverse();
-        reversedLabels.forEach((key) => {
-            var _a;
-            const variant = visualElement.getVariant(key);
-            variant && setTarget(visualElement, variant);
-            (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
-                setVariants(child, variantLabels);
-            });
-        });
-    }
-    function setValues(visualElement, definition) {
-        if (Array.isArray(definition)) {
-            return setVariants(visualElement, definition);
+        else if (!Array.isArray(target) &&
+            isZero(target) &&
+            typeof origin === "string") {
+            target = getZeroUnit(origin);
         }
-        else if (typeof definition === "string") {
-            return setVariants(visualElement, [definition]);
+        /**
+         * If the target has been defined as a series of keyframes
+         */
+        if (Array.isArray(target)) {
+            /**
+             * Ensure an initial wildcard keyframe is hydrated by the origin.
+             * TODO: Support extra wildcard keyframes i.e [1, null, 0]
+             */
+            if (target[0] === null) {
+                target[0] = origin;
+            }
+            return target;
         }
         else {
-            setTarget(visualElement, definition);
+            return [origin, target];
         }
     }
-    function checkTargetForNewValues(visualElement, target, origin) {
-        var _a, _b;
-        const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));
-        const numNewValues = newValueKeys.length;
-        if (!numNewValues)
-            return;
-        for (let i = 0; i < numNewValues; i++) {
-            const key = newValueKeys[i];
-            const targetValue = target[key];
-            let value = null;
+
+    const featureTests = {
+        waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
+    };
+    const results = {};
+    const supports = {};
+    /**
+     * Generate features tests that cache their results.
+     */
+    for (const key in featureTests) {
+        supports[key] = () => {
+            if (results[key] === undefined)
+                results[key] = featureTests[key]();
+            return results[key];
+        };
+    }
+
+    /**
+     * A list of values that can be hardware-accelerated.
+     */
+    const acceleratedValues = new Set([]);
+    const createMotionValueAnimation = (valueName, value, target, transition = {}) => {
+        return (onComplete) => {
+            const valueTransition = getValueTransition(transition, valueName) || {};
             /**
-             * If the target is a series of keyframes, we can use the first value
-             * in the array. If this first value is null, we'll still need to read from the DOM.
+             * 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
+             * delay actually does inherit from the root transition if not value-specific.
              */
-            if (Array.isArray(targetValue)) {
-                value = targetValue[0];
-            }
+            const delay = valueTransition.delay || transition.delay || 0;
             /**
-             * If the target isn't keyframes, or the first keyframe was null, we need to
-             * first check if an origin value was explicitly defined in the transition as "from",
-             * if not read the value from the DOM. As an absolute fallback, take the defined target value.
+             * Elapsed isn't a public transition option but can be passed through from
+             * optimized appear effects in milliseconds.
              */
-            if (value === null) {
-                value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key];
+            let { elapsed = 0 } = transition;
+            elapsed = elapsed - secondsToMilliseconds(delay);
+            const keyframes = getKeyframes(value, valueName, target, valueTransition);
+            /**
+             * Check if we're able to animate between the start and end keyframes,
+             * and throw a warning if we're attempting to animate between one that's
+             * animatable and another that isn't.
+             */
+            const originKeyframe = keyframes[0];
+            const targetKeyframe = keyframes[keyframes.length - 1];
+            const isOriginAnimatable = isAnimatable(valueName, originKeyframe);
+            const isTargetAnimatable = isAnimatable(valueName, targetKeyframe);
+            warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${valueName} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+            let options = {
+                keyframes,
+                velocity: value.getVelocity(),
+                ...valueTransition,
+                elapsed,
+                onUpdate: (v) => {
+                    value.set(v);
+                    valueTransition.onUpdate && valueTransition.onUpdate(v);
+                },
+                onComplete: () => {
+                    onComplete();
+                    valueTransition.onComplete && valueTransition.onComplete();
+                },
+            };
+            if (!isOriginAnimatable ||
+                !isTargetAnimatable ||
+                instantAnimationState.current ||
+                valueTransition.type === false) {
+                /**
+                 * If we can't animate this value, or the global instant animation flag is set,
+                 * or this is simply defined as an instant transition, return an instant transition.
+                 */
+                return createInstantAnimation(options);
+            }
+            else if (valueTransition.type === "inertia") {
+                /**
+                 * If this is an inertia animation, we currently don't support pre-generating
+                 * keyframes for this as such it must always run on the main thread.
+                 */
+                const animation = inertia(options);
+                return () => animation.stop();
             }
             /**
-             * If value is still undefined or null, ignore it. Preferably this would throw,
-             * but this was causing issues in Framer.
+             * If there's no transition defined for this value, we can generate
+             * unqiue transition settings for this value.
              */
-            if (value === undefined || value === null)
-                continue;
-            if (typeof value === "string" &&
-                (isNumericalString(value) || isZeroValueString(value))) {
-                // If this is a number read as a string, ie "0" or "200", convert it to a number
-                value = parseFloat(value);
+            if (!isTransitionDefined(valueTransition)) {
+                options = {
+                    ...options,
+                    ...getDefaultTransition(valueName, options),
+                };
             }
-            else if (!findValueType(value) && complex.test(targetValue)) {
-                value = getAnimatableNone(key, targetValue);
+            /**
+             * Both WAAPI and our internal animation functions use durations
+             * as defined by milliseconds, while our external API defines them
+             * as seconds.
+             */
+            if (options.duration) {
+                options.duration = secondsToMilliseconds(options.duration);
+            }
+            if (options.repeatDelay) {
+                options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
+            }
+            const canAccelerateAnimation = acceleratedValues.has(valueName) &&
+                supports.waapi() &&
+                value.owner &&
+                !value.owner.getProps().onUpdate &&
+                !options.repeat;
+            if (canAccelerateAnimation) {
+                /**
+                 * If this animation is capable of being run via WAAPI, then do so.
+                 *
+                 * TODO: Currently no values are hardware accelerated so this clause
+                 * will never trigger. Animation to be added in subsequent PR.
+                 */
+                return createAcceleratedAnimation();
             }
-            visualElement.addValue(key, motionValue(value));
-            if (origin[key] === undefined) {
-                origin[key] = value;
+            else {
+                /**
+                 * Otherwise, fall back to the main thread.
+                 */
+                const animation = animate$1(options);
+                return () => animation.stop();
             }
-            if (value !== null)
-                visualElement.setBaseTarget(key, value);
-        }
-    }
-    function getOriginFromTransition(key, transition) {
-        if (!transition)
-            return;
-        const valueTransition = transition[key] || transition["default"] || transition;
-        return valueTransition.from;
-    }
-    function getOrigin(target, transition, visualElement) {
-        var _a;
-        const origin = {};
-        for (const key in target) {
-            const transitionOrigin = getOriginFromTransition(key, transition);
-            origin[key] =
-                transitionOrigin !== undefined
-                    ? transitionOrigin
-                    : (_a = visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.get();
-        }
-        return origin;
-    }
-
-    function isWillChangeMotionValue(value) {
-        return Boolean(isMotionValue(value) && value.add);
-    }
+        };
+    };
 
     function animateVisualElement(visualElement, definition, options = {}) {
         visualElement.notify("AnimationStart", definition);
@@ -4004,7 +4074,7 @@
                     shouldBlockAnimation(animationTypeState, key))) {
                 continue;
             }
-            let valueTransition = { delay, ...transition };
+            let valueTransition = { delay, elapsed: 0, ...transition };
             /**
              * Make animation instant if this is a transform prop and we should reduce motion.
              */
@@ -4015,7 +4085,17 @@
                     delay: 0,
                 };
             }
-            let animation = startAnimation(key, value, valueTarget, valueTransition);
+            /**
+             * If this is the first time a value is being animated, check
+             * to see if we're handling off from an existing animation.
+             */
+            if (!value.hasAnimated) {
+                const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
+                if (appearId) {
+                    valueTransition.elapsed = handoffOptimizedAppearAnimation(appearId, key);
+                }
+            }
+            let animation = value.start(createMotionValueAnimation(key, value, valueTarget, valueTransition));
             if (isWillChangeMotionValue(willChange)) {
                 willChange.add(key);
                 animation = animation.then(() => willChange.remove(key));
@@ -5171,7 +5251,7 @@
         }
         startAxisValueAnimation(axis, transition) {
             const axisValue = this.getAxisMotionValue(axis);
-            return startAnimation(axis, axisValue, 0, transition);
+            return axisValue.start(createMotionValueAnimation(axis, axisValue, 0, transition));
         }
         stopAnimation() {
             eachAxis((axis) => this.getAxisMotionValue(axis).stop());
@@ -5766,7 +5846,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.7.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.7.3 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.8.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.8.1 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -6613,7 +6693,7 @@
      */
     function animate(from, to, transition = {}) {
         const value = isMotionValue(from) ? from : motionValue(from);
-        startAnimation("", value, to, transition);
+        value.start(createMotionValueAnimation("", value, to, transition));
         return {
             stop: () => value.stop(),
             isAnimating: () => value.isAnimating(),
@@ -9072,8 +9152,7 @@
                     activeSpringAnimation.current.stop();
                 }
                 activeSpringAnimation.current = animate$1({
-                    from: value.get(),
-                    to: v,
+                    keyframes: [value.get(), v],
                     velocity: value.getVelocity(),
                     type: "spring",
                     ...config,
@@ -10194,6 +10273,30 @@
         return reset;
     }
 
+    const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+
+    function animateStyle(element, valueName, keyframes, { delay, duration, ease }) {
+        if (!supports.waapi())
+            return undefined;
+        const animation = element.animate({ [valueName]: keyframes }, {
+            delay,
+            duration,
+            easing: Array.isArray(ease) ? cubicBezierAsString(ease) : ease,
+            fill: "both",
+        });
+        return animation;
+    }
+
+    function startOptimizedAppearAnimation(element, name, keyframes, options) {
+        window.MotionAppearAnimations || (window.MotionAppearAnimations = new Map());
+        const id = element.dataset[optimizedAppearDataId];
+        const animation = animateStyle(element, name, keyframes, options);
+        if (id && animation) {
+            window.MotionAppearAnimations.set(appearStoreId(id, name), animation);
+        }
+        return animation;
+    }
+
     const createObject = () => ({});
     class StateVisualElement extends VisualElement {
         build() { }
@@ -10343,8 +10446,11 @@
     exports.mix = mix$1;
     exports.motion = motion;
     exports.motionValue = motionValue;
+    exports.optimizedAppearDataAttribute = optimizedAppearDataAttribute;
     exports.pipe = pipe;
     exports.resolveMotionValue = resolveMotionValue;
+    exports.spring = spring;
+    exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
     exports.transform = transform;
     exports.unwrapMotionComponent = unwrapMotionComponent;
     exports.useAnimation = useAnimation;