framer-motion 7.7.3 → 7.8.1

package/dist/cjs/index.js

@@ -1869,2050 +1869,2120 @@ function shallowCompare(next, prev) {
 }
 
 /**
- * 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 noop = (any) => any;
-
-/*
-  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);
-
-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
-        heyListen.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
-        heyListen.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
-        return easingLookup[definition];
-    }
-    return definition;
-};
-const isEasingArray = (ease) => {
-    return Array.isArray(ease) && typeof ease[0] !== "number";
-};
+const isNumericalString = (v) => /^\-?\d*\.?\d+$/.test(v);
 
 /**
- * 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
+ * Check if the value is a zero value string like "0px" or "0%"
  */
-const isColorString = (type, testProp) => (v) => {
-    return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
-        (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
-};
-const splitColor = (aName, bName, cName) => (v) => {
-    if (!isString(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(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)) +
-        ")",
-};
-
-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 {
-        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: 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 isZeroValueString = (v) => /^0[^.\s]+$/.test(v);
 
-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 frameData = {
+    delta: 0,
+    timestamp: 0,
 };
 
-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(v)
-            ? v
-            : v.hasOwnProperty("red")
-                ? rgba.transform(v)
-                : hsla.transform(v);
-    },
-};
+/*
+  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 colorToken = "${c}";
-const numberToken = "${n}";
-function test(v) {
-    var _a, _b;
-    return (isNaN(v) &&
-        isString(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));
+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 maxElapsed = 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);
+    frameData.timestamp = timestamp;
+    isProcessing = true;
+    stepsOrder.forEach(processStep);
+    isProcessing = false;
+    if (runNextFrame) {
+        useDefaultElapsed = false;
+        onNextFrame(processFrame);
     }
-    return { values, numColors, numNumbers, tokenised: v };
+};
+const startLoop = () => {
+    runNextFrame = true;
+    useDefaultElapsed = true;
+    if (!isProcessing)
+        onNextFrame(processFrame);
+};
+
+function addUniqueItem(arr, item) {
+    if (arr.indexOf(item) === -1)
+        arr.push(item);
 }
-function parse(v) {
-    return analyseComplexValue(v).values;
+function removeItem(arr, item) {
+    const index = arr.indexOf(item);
+    if (index > -1)
+        arr.splice(index, 1);
 }
-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]));
+// 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);
         }
-        return output;
-    };
+        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);
+            }
+        }
+    }
+    getSize() {
+        return this.subscriptions.length;
+    }
+    clear() {
+        this.subscriptions.length = 0;
+    }
 }
-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(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;
     }
-    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.
+     * @public
      */
-    let toRun = [];
-    let toRunNextFrame = [];
+    getPrevious() {
+        return this.prev;
+    }
     /**
+     * Returns the latest velocity of `MotionValue`
+     *
+     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
      *
+     * @public
      */
-    let numToRun = 0;
+    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(parseFloat(this.current) -
+                    parseFloat(this.prev), this.timeDelta)
+            : 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.
+     * 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 isProcessing = false;
-    let flushNextFrame = false;
+    start(animation) {
+        this.stop();
+        return new Promise((resolve) => {
+            this.hasAnimated = true;
+            this.stopAnimation = animation(resolve);
+        }).then(() => this.clearAnimation());
+    }
     /**
-     * A set of processes which were marked keepAlive when scheduled.
+     * Stop the currently active animation.
+     *
+     * @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;
+    stop() {
+        if (this.stopAnimation)
+            this.stopAnimation();
+        this.clearAnimation();
+    }
+    /**
+     * Returns `true` if this value is currently animating.
+     *
+     * @public
+     */
+    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(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
+        (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
 };
-
-const maxElapsed = 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(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);
-    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 = (from, to, progress) => -progress * from + progress * to + from;
+const clampRgbUnit = (v) => clamp(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);
-    heyListen.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(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(v)
+            ? v
+            : v.hasOwnProperty("red")
+                ? rgba.transform(v)
+                : hsla.transform(v);
+    },
 };
 
-function getMixer$1(origin, target) {
-    if (typeof origin === "number") {
-        return (v) => mix(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(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 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 {
-        heyListen.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}`;
-    }
+}
+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;
+    },
 };
 
-/*
-  Progress within given range
+/**
+ * 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];
 
-  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.
+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);
+}
 
-  @param [number]: Lower limit
-  @param [number]: Upper limit
-  @param [number]: Value to find progress within given range
-  @return [number]: Progress of value within range as expressed 0-1
-*/
-const progress = (from, to, value) => {
-    const toFromDifference = to - from;
-    return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+/**
+ * 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,
 };
 
-const mixNumber = (from, to) => (p) => mix(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(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
-    const inputLength = input.length;
-    heyListen.invariant(inputLength === output.length, "Both input and output ranges must be the same length");
-    heyListen.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(input[i], input[i + 1], v);
-        return mixers[i](progressInRange);
-    };
-    return isClamp
-        ? (v) => interpolator(clamp(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(values) {
-    const numValues = values.length;
-    return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0);
-}
-function convertOffsetToTimes(offset, duration) {
-    return offset.map((o) => o * duration);
-}
-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(values), duration);
-    function createInterpolator() {
-        return interpolate(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();
-        },
-    };
-}
+/**
+ * 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));
 
-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;
-    heyListen.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(minDamping, maxDamping, dampingRatio);
-    duration = clamp(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,
-        };
+/**
+ * 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;
+}
+/**
+ * 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 resolveVariant(visualElement, definition, custom) {
+    const props = visualElement.getProps();
+    return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, getCurrent(visualElement), getVelocity$1(visualElement));
+}
+
+/**
+ * Set VisualElement's MotionValue, creating a new MotionValue for it if
+ * it doesn't exist.
+ */
+function setMotionValue(visualElement, key, value) {
+    if (visualElement.hasValue(key)) {
+        visualElement.getValue(key).set(value);
     }
     else {
-        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);
+
+/**
+ * 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 = (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);
+    heyListen.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(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([0, 100], [from, to], {
-            clamp: false,
-        });
-        from = 0;
-        to = 100;
+
+function getMixer$1(origin, target) {
+    if (typeof origin === "number") {
+        return (v) => mix(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 {
+        heyListen.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 = (from, to, value) => {
+    const toFromDifference = to - from;
+    return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+};
+
+const mixNumber = (from, to) => (p) => mix(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(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
+    const inputLength = input.length;
+    heyListen.invariant(inputLength === output.length, "Both input and output ranges must be the same length");
+    heyListen.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(input[i], input[i + 1], v);
+        return mixers[i](progressInRange);
     };
+    return isClamp
+        ? (v) => interpolator(clamp(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(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
+        heyListen.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(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
+        heyListen.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(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(keyframeValues), duration);
+    function createInterpolator() {
+        return interpolate(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;
+    heyListen.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(minDamping, maxDamping, dampingRatio);
+    duration = clamp(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);
-    heyListen.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(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([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(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(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);
+        heyListen.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);
@@ -3991,7 +4061,7 @@ function animateTarget(visualElement, definition, { delay = 0, transitionOverrid
                 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.
          */
@@ -4002,7 +4072,17 @@ function animateTarget(visualElement, definition, { delay = 0, transitionOverrid
                 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));
@@ -5158,7 +5238,7 @@ class VisualElementDragControls {
     }
     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());
@@ -5753,7 +5833,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                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)) {
@@ -6600,7 +6680,7 @@ const layoutFeatures = {
  */
 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(),
@@ -9059,8 +9139,7 @@ function useSpring(source, config = {}) {
                 activeSpringAnimation.current.stop();
             }
             activeSpringAnimation.current = animate$1({
-                from: value.get(),
-                to: v,
+                keyframes: [value.get(), v],
                 velocity: value.getVelocity(),
                 type: "spring",
                 ...config,
@@ -9573,6 +9652,30 @@ function useResetProjection() {
     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() { }
@@ -9722,8 +9825,11 @@ exports.makeUseVisualState = makeUseVisualState;
 exports.mix = mix;
 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;