motion 11.16.4 → 11.16.6

package/dist/motion.dev.js

@@ -1094,6 +1094,16 @@
      */
     const transformProps = new Set(transformPropOrder);
 
+    const positionalKeys = new Set([
+        "width",
+        "height",
+        "top",
+        "left",
+        "right",
+        "bottom",
+        ...transformPropOrder,
+    ]);
+
     const isKeyframesTarget = (v) => {
         return Array.isArray(v);
     };
@@ -1359,7 +1369,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "11.16.4";
+            this.version = "11.16.6";
             /**
              * 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
@@ -1810,62 +1820,6 @@
         }
     }
 
-    /**
-     * 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+)?|\.\d+)$/u.test(v);
-
-    const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
-    const isCSSVariableName = 
-    /*@__PURE__*/ checkStringStartsWith("--");
-    const startsAsVariableToken = 
-    /*@__PURE__*/ checkStringStartsWith("var(--");
-    const isCSSVariableToken = (value) => {
-        const startsWithToken = startsAsVariableToken(value);
-        if (!startsWithToken)
-            return false;
-        // Ensure any comments are stripped from the value as this can harm performance of the regex.
-        return singleCssVariableRegex.test(value.split("/*")[0].trim());
-    };
-    const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
-
-    /**
-     * Parse Framer's special CSS variable format into a CSS token and a fallback.
-     *
-     * ```
-     * `var(--foo, #fff)` => [`--foo`, '#fff']
-     * ```
-     *
-     * @param current
-     */
-    const splitCSSVariableRegex = 
-    // eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
-    /^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;
-    function parseCSSVariable(current) {
-        const match = splitCSSVariableRegex.exec(current);
-        if (!match)
-            return [,];
-        const [, token1, token2, fallback] = match;
-        return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback];
-    }
-    const maxDepth = 4;
-    function getVariableValue(current, element, depth = 1) {
-        exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
-        const [token, fallback] = parseCSSVariable(current);
-        // No CSS variable detected
-        if (!token)
-            return;
-        // Attempt to read this CSS variable off the element
-        const resolved = window.getComputedStyle(element).getPropertyValue(token);
-        if (resolved) {
-            const trimmed = resolved.trim();
-            return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
-        }
-        return isCSSVariableToken(fallback)
-            ? getVariableValue(fallback, element, depth + 1)
-            : fallback;
-    }
-
     const number = {
         test: (v) => typeof v === "number",
         parse: parseFloat,
@@ -1880,6 +1834,97 @@
         default: 1,
     };
 
+    // If this number is a decimal, make it just five decimal places
+    // to avoid exponents
+    const sanitize = (v) => Math.round(v * 100000) / 100000;
+
+    const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
+
+    function isNullish(v) {
+        return v == null;
+    }
+
+    const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
+
+    /**
+     * 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((typeof v === "string" &&
+            singleColorRegex.test(v) &&
+            v.startsWith(type)) ||
+            (testProp &&
+                !isNullish(v) &&
+                Object.prototype.hasOwnProperty.call(v, testProp)));
+    };
+    const splitColor = (aName, bName, cName) => (v) => {
+        if (typeof v !== "string")
+            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: /*@__PURE__*/ isColorString("rgb", "red"),
+        parse: /*@__PURE__*/ 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: /*@__PURE__*/ isColorString("#"),
+        parse: parseHex,
+        transform: rgba.transform,
+    };
+
     const createUnitType = (unit) => ({
         test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
         parse: parseFloat,
@@ -1896,87 +1941,347 @@
         transform: (v) => percent.transform(v * 100),
     };
 
-    const positionalKeys = new Set([
-        "width",
-        "height",
-        "top",
-        "left",
-        "right",
-        "bottom",
-        "x",
-        "y",
-        "translateX",
-        "translateY",
-    ]);
-    const isNumOrPxType = (v) => v === number || v === px;
-    const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
-    const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
-        if (transform === "none" || !transform)
-            return 0;
-        const matrix3d = transform.match(/^matrix3d\((.+)\)$/u);
-        if (matrix3d) {
-            return getPosFromMatrix(matrix3d[1], pos3);
-        }
-        else {
-            const matrix = transform.match(/^matrix\((.+)\)$/u);
-            if (matrix) {
-                return getPosFromMatrix(matrix[1], pos2);
+    const hsla = {
+        test: /*@__PURE__*/ isColorString("hsl", "hue"),
+        parse: /*@__PURE__*/ splitColor("hue", "saturation", "lightness"),
+        transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
+            return ("hsla(" +
+                Math.round(hue) +
+                ", " +
+                percent.transform(sanitize(saturation)) +
+                ", " +
+                percent.transform(sanitize(lightness)) +
+                ", " +
+                sanitize(alpha.transform(alpha$1)) +
+                ")");
+        },
+    };
+
+    const color = {
+        test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
+        parse: (v) => {
+            if (rgba.test(v)) {
+                return rgba.parse(v);
             }
-            else {
-                return 0;
+            else if (hsla.test(v)) {
+                return hsla.parse(v);
             }
-        }
-    };
-    const transformKeys = new Set(["x", "y", "z"]);
-    const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
-    function removeNonTranslationalTransform(visualElement) {
-        const removedTransforms = [];
-        nonTranslationalTransformKeys.forEach((key) => {
-            const value = visualElement.getValue(key);
-            if (value !== undefined) {
-                removedTransforms.push([key, value.get()]);
-                value.set(key.startsWith("scale") ? 1 : 0);
+            else {
+                return hex.parse(v);
             }
-        });
-        return removedTransforms;
-    }
-    const positionalValues = {
-        // Dimensions
-        width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
-        height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
-        top: (_bbox, { top }) => parseFloat(top),
-        left: (_bbox, { left }) => parseFloat(left),
-        bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
-        right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
-        // Transform
-        x: getTranslateFromMatrix(4, 13),
-        y: getTranslateFromMatrix(5, 14),
+        },
+        transform: (v) => {
+            return typeof v === "string"
+                ? v
+                : v.hasOwnProperty("red")
+                    ? rgba.transform(v)
+                    : hsla.transform(v);
+        },
     };
-    // Alias translate longform names
-    positionalValues.translateX = positionalValues.x;
-    positionalValues.translateY = positionalValues.y;
 
-    /**
-     * Tests a provided value against a ValueType
-     */
-    const testValueType = (v) => (type) => type.test(v);
+    const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
 
-    /**
-     * ValueType for "auto"
-     */
-    const auto = {
-        test: (v) => v === "auto",
-        parse: (v) => v,
-    };
+    function test(v) {
+        var _a, _b;
+        return (isNaN(v) &&
+            typeof v === "string" &&
+            (((_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);
+    }
+    const NUMBER_TOKEN = "number";
+    const COLOR_TOKEN = "color";
+    const VAR_TOKEN = "var";
+    const VAR_FUNCTION_TOKEN = "var(";
+    const SPLIT_TOKEN = "${}";
+    // this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex`
+    const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
+    function analyseComplexValue(value) {
+        const originalValue = value.toString();
+        const values = [];
+        const indexes = {
+            color: [],
+            number: [],
+            var: [],
+        };
+        const types = [];
+        let i = 0;
+        const tokenised = originalValue.replace(complexRegex, (parsedValue) => {
+            if (color.test(parsedValue)) {
+                indexes.color.push(i);
+                types.push(COLOR_TOKEN);
+                values.push(color.parse(parsedValue));
+            }
+            else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) {
+                indexes.var.push(i);
+                types.push(VAR_TOKEN);
+                values.push(parsedValue);
+            }
+            else {
+                indexes.number.push(i);
+                types.push(NUMBER_TOKEN);
+                values.push(parseFloat(parsedValue));
+            }
+            ++i;
+            return SPLIT_TOKEN;
+        });
+        const split = tokenised.split(SPLIT_TOKEN);
+        return { values, split, indexes, types };
+    }
+    function parseComplexValue(v) {
+        return analyseComplexValue(v).values;
+    }
+    function createTransformer(source) {
+        const { split, types } = analyseComplexValue(source);
+        const numSections = split.length;
+        return (v) => {
+            let output = "";
+            for (let i = 0; i < numSections; i++) {
+                output += split[i];
+                if (v[i] !== undefined) {
+                    const type = types[i];
+                    if (type === NUMBER_TOKEN) {
+                        output += sanitize(v[i]);
+                    }
+                    else if (type === COLOR_TOKEN) {
+                        output += color.transform(v[i]);
+                    }
+                    else {
+                        output += v[i];
+                    }
+                }
+            }
+            return output;
+        };
+    }
+    const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
+    function getAnimatableNone$1(v) {
+        const parsed = parseComplexValue(v);
+        const transformer = createTransformer(v);
+        return transformer(parsed.map(convertNumbersToZero));
+    }
+    const complex = {
+        test,
+        parse: parseComplexValue,
+        createTransformer,
+        getAnimatableNone: getAnimatableNone$1,
+    };
 
     /**
-     * A list of value types commonly used for dimensions
+     * Properties that should default to 1 or 100%
      */
-    const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
+    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 = /\b([a-z-]*)\(.*?\)/gu;
+    const filter = {
+        ...complex,
+        getAnimatableNone: (v) => {
+            const functions = v.match(functionRegex);
+            return functions ? functions.map(applyDefaultFilter).join(" ") : v;
+        },
+    };
+
+    const browserNumberValueTypes = {
+        // Border props
+        borderWidth: px,
+        borderTopWidth: px,
+        borderRightWidth: px,
+        borderBottomWidth: px,
+        borderLeftWidth: px,
+        borderRadius: px,
+        radius: px,
+        borderTopLeftRadius: px,
+        borderTopRightRadius: px,
+        borderBottomRightRadius: px,
+        borderBottomLeftRadius: px,
+        // Positioning props
+        width: px,
+        maxWidth: px,
+        height: px,
+        maxHeight: px,
+        top: px,
+        right: px,
+        bottom: px,
+        left: px,
+        // Spacing props
+        padding: px,
+        paddingTop: px,
+        paddingRight: px,
+        paddingBottom: px,
+        paddingLeft: px,
+        margin: px,
+        marginTop: px,
+        marginRight: px,
+        marginBottom: px,
+        marginLeft: px,
+        // Misc
+        backgroundPositionX: px,
+        backgroundPositionY: px,
+    };
+
+    const transformValueTypes = {
+        rotate: degrees,
+        rotateX: degrees,
+        rotateY: degrees,
+        rotateZ: degrees,
+        scale,
+        scaleX: scale,
+        scaleY: scale,
+        scaleZ: scale,
+        skew: degrees,
+        skewX: degrees,
+        skewY: degrees,
+        distance: px,
+        translateX: px,
+        translateY: px,
+        translateZ: px,
+        x: px,
+        y: px,
+        z: px,
+        perspective: px,
+        transformPerspective: px,
+        opacity: alpha,
+        originX: progressPercentage,
+        originY: progressPercentage,
+        originZ: px,
+    };
+
+    const int = {
+        ...number,
+        transform: Math.round,
+    };
+
+    const numberValueTypes = {
+        ...browserNumberValueTypes,
+        ...transformValueTypes,
+        zIndex: int,
+        size: px,
+        // SVG
+        fillOpacity: alpha,
+        strokeOpacity: alpha,
+        numOctaves: int,
+    };
+
     /**
-     * Tests a dimensional value against the list of dimension ValueTypes
+     * A map of default value types for common values
      */
-    const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
+    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) {
+        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 defaultValueType.getAnimatableNone
+            ? defaultValueType.getAnimatableNone(value)
+            : undefined;
+    }
+
+    /**
+     * If we encounter keyframes like "none" or "0" and we also have keyframes like
+     * "#fff" or "200px 200px" we want to find a keyframe to serve as a template for
+     * the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into
+     * zero equivalents, i.e. "#fff0" or "0px 0px".
+     */
+    const invalidTemplates = new Set(["auto", "none", "0"]);
+    function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
+        let i = 0;
+        let animatableTemplate = undefined;
+        while (i < unresolvedKeyframes.length && !animatableTemplate) {
+            const keyframe = unresolvedKeyframes[i];
+            if (typeof keyframe === "string" &&
+                !invalidTemplates.has(keyframe) &&
+                analyseComplexValue(keyframe).values.length) {
+                animatableTemplate = unresolvedKeyframes[i];
+            }
+            i++;
+        }
+        if (animatableTemplate && name) {
+            for (const noneIndex of noneKeyframeIndexes) {
+                unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
+            }
+        }
+    }
+
+    const isNumOrPxType = (v) => v === number || v === px;
+    const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
+    const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
+        if (transform === "none" || !transform)
+            return 0;
+        const matrix3d = transform.match(/^matrix3d\((.+)\)$/u);
+        if (matrix3d) {
+            return getPosFromMatrix(matrix3d[1], pos3);
+        }
+        else {
+            const matrix = transform.match(/^matrix\((.+)\)$/u);
+            if (matrix) {
+                return getPosFromMatrix(matrix[1], pos2);
+            }
+            else {
+                return 0;
+            }
+        }
+    };
+    const transformKeys = new Set(["x", "y", "z"]);
+    const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
+    function removeNonTranslationalTransform(visualElement) {
+        const removedTransforms = [];
+        nonTranslationalTransformKeys.forEach((key) => {
+            const value = visualElement.getValue(key);
+            if (value !== undefined) {
+                removedTransforms.push([key, value.get()]);
+                value.set(key.startsWith("scale") ? 1 : 0);
+            }
+        });
+        return removedTransforms;
+    }
+    const positionalValues = {
+        // Dimensions
+        width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
+        height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
+        top: (_bbox, { top }) => parseFloat(top),
+        left: (_bbox, { left }) => parseFloat(left),
+        bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
+        right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
+        // Transform
+        x: getTranslateFromMatrix(4, 13),
+        y: getTranslateFromMatrix(5, 14),
+    };
+    // Alias translate longform names
+    positionalValues.translateX = positionalValues.x;
+    positionalValues.translateY = positionalValues.y;
 
     const toResolve = new Set();
     let isScheduled = false;
@@ -2071,457 +2376,150 @@
             if (this.isAsync) {
                 toResolve.add(this);
                 if (!isScheduled) {
-                    isScheduled = true;
-                    frame.read(readAllKeyframes);
-                    frame.resolveKeyframes(measureAllKeyframes);
-                }
-            }
-            else {
-                this.readKeyframes();
-                this.complete();
-            }
-        }
-        readKeyframes() {
-            const { unresolvedKeyframes, name, element, motionValue } = this;
-            /**
-             * If a keyframe is null, we hydrate it either by reading it from
-             * the instance, or propagating from previous keyframes.
-             */
-            for (let i = 0; i < unresolvedKeyframes.length; i++) {
-                if (unresolvedKeyframes[i] === null) {
-                    /**
-                     * If the first keyframe is null, we need to find its value by sampling the element
-                     */
-                    if (i === 0) {
-                        const currentValue = motionValue === null || motionValue === void 0 ? void 0 : motionValue.get();
-                        const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
-                        if (currentValue !== undefined) {
-                            unresolvedKeyframes[0] = currentValue;
-                        }
-                        else if (element && name) {
-                            const valueAsRead = element.readValue(name, finalKeyframe);
-                            if (valueAsRead !== undefined && valueAsRead !== null) {
-                                unresolvedKeyframes[0] = valueAsRead;
-                            }
-                        }
-                        if (unresolvedKeyframes[0] === undefined) {
-                            unresolvedKeyframes[0] = finalKeyframe;
-                        }
-                        if (motionValue && currentValue === undefined) {
-                            motionValue.set(unresolvedKeyframes[0]);
-                        }
-                    }
-                    else {
-                        unresolvedKeyframes[i] = unresolvedKeyframes[i - 1];
-                    }
-                }
-            }
-        }
-        setFinalKeyframe() { }
-        measureInitialState() { }
-        renderEndStyles() { }
-        measureEndState() { }
-        complete() {
-            this.isComplete = true;
-            this.onComplete(this.unresolvedKeyframes, this.finalKeyframe);
-            toResolve.delete(this);
-        }
-        cancel() {
-            if (!this.isComplete) {
-                this.isScheduled = false;
-                toResolve.delete(this);
-            }
-        }
-        resume() {
-            if (!this.isComplete)
-                this.scheduleResolve();
-        }
-    }
-
-    // If this number is a decimal, make it just five decimal places
-    // to avoid exponents
-    const sanitize = (v) => Math.round(v * 100000) / 100000;
-
-    const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
-
-    function isNullish(v) {
-        return v == null;
-    }
-
-    const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
-
-    /**
-     * 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((typeof v === "string" &&
-            singleColorRegex.test(v) &&
-            v.startsWith(type)) ||
-            (testProp &&
-                !isNullish(v) &&
-                Object.prototype.hasOwnProperty.call(v, testProp)));
-    };
-    const splitColor = (aName, bName, cName) => (v) => {
-        if (typeof v !== "string")
-            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: /*@__PURE__*/ isColorString("rgb", "red"),
-        parse: /*@__PURE__*/ 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: /*@__PURE__*/ isColorString("#"),
-        parse: parseHex,
-        transform: rgba.transform,
-    };
-
-    const hsla = {
-        test: /*@__PURE__*/ isColorString("hsl", "hue"),
-        parse: /*@__PURE__*/ splitColor("hue", "saturation", "lightness"),
-        transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
-            return ("hsla(" +
-                Math.round(hue) +
-                ", " +
-                percent.transform(sanitize(saturation)) +
-                ", " +
-                percent.transform(sanitize(lightness)) +
-                ", " +
-                sanitize(alpha.transform(alpha$1)) +
-                ")");
-        },
-    };
-
-    const color = {
-        test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
-        parse: (v) => {
-            if (rgba.test(v)) {
-                return rgba.parse(v);
-            }
-            else if (hsla.test(v)) {
-                return hsla.parse(v);
-            }
-            else {
-                return hex.parse(v);
-            }
-        },
-        transform: (v) => {
-            return typeof v === "string"
-                ? v
-                : v.hasOwnProperty("red")
-                    ? rgba.transform(v)
-                    : hsla.transform(v);
-        },
-    };
-
-    const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
-
-    function test(v) {
-        var _a, _b;
-        return (isNaN(v) &&
-            typeof v === "string" &&
-            (((_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);
-    }
-    const NUMBER_TOKEN = "number";
-    const COLOR_TOKEN = "color";
-    const VAR_TOKEN = "var";
-    const VAR_FUNCTION_TOKEN = "var(";
-    const SPLIT_TOKEN = "${}";
-    // this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex`
-    const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
-    function analyseComplexValue(value) {
-        const originalValue = value.toString();
-        const values = [];
-        const indexes = {
-            color: [],
-            number: [],
-            var: [],
-        };
-        const types = [];
-        let i = 0;
-        const tokenised = originalValue.replace(complexRegex, (parsedValue) => {
-            if (color.test(parsedValue)) {
-                indexes.color.push(i);
-                types.push(COLOR_TOKEN);
-                values.push(color.parse(parsedValue));
-            }
-            else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) {
-                indexes.var.push(i);
-                types.push(VAR_TOKEN);
-                values.push(parsedValue);
+                    isScheduled = true;
+                    frame.read(readAllKeyframes);
+                    frame.resolveKeyframes(measureAllKeyframes);
+                }
             }
             else {
-                indexes.number.push(i);
-                types.push(NUMBER_TOKEN);
-                values.push(parseFloat(parsedValue));
+                this.readKeyframes();
+                this.complete();
             }
-            ++i;
-            return SPLIT_TOKEN;
-        });
-        const split = tokenised.split(SPLIT_TOKEN);
-        return { values, split, indexes, types };
-    }
-    function parseComplexValue(v) {
-        return analyseComplexValue(v).values;
-    }
-    function createTransformer(source) {
-        const { split, types } = analyseComplexValue(source);
-        const numSections = split.length;
-        return (v) => {
-            let output = "";
-            for (let i = 0; i < numSections; i++) {
-                output += split[i];
-                if (v[i] !== undefined) {
-                    const type = types[i];
-                    if (type === NUMBER_TOKEN) {
-                        output += sanitize(v[i]);
-                    }
-                    else if (type === COLOR_TOKEN) {
-                        output += color.transform(v[i]);
+        }
+        readKeyframes() {
+            const { unresolvedKeyframes, name, element, motionValue } = this;
+            /**
+             * If a keyframe is null, we hydrate it either by reading it from
+             * the instance, or propagating from previous keyframes.
+             */
+            for (let i = 0; i < unresolvedKeyframes.length; i++) {
+                if (unresolvedKeyframes[i] === null) {
+                    /**
+                     * If the first keyframe is null, we need to find its value by sampling the element
+                     */
+                    if (i === 0) {
+                        const currentValue = motionValue === null || motionValue === void 0 ? void 0 : motionValue.get();
+                        const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
+                        if (currentValue !== undefined) {
+                            unresolvedKeyframes[0] = currentValue;
+                        }
+                        else if (element && name) {
+                            const valueAsRead = element.readValue(name, finalKeyframe);
+                            if (valueAsRead !== undefined && valueAsRead !== null) {
+                                unresolvedKeyframes[0] = valueAsRead;
+                            }
+                        }
+                        if (unresolvedKeyframes[0] === undefined) {
+                            unresolvedKeyframes[0] = finalKeyframe;
+                        }
+                        if (motionValue && currentValue === undefined) {
+                            motionValue.set(unresolvedKeyframes[0]);
+                        }
                     }
                     else {
-                        output += v[i];
+                        unresolvedKeyframes[i] = unresolvedKeyframes[i - 1];
                     }
                 }
             }
-            return output;
-        };
-    }
-    const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
-    function getAnimatableNone$1(v) {
-        const parsed = parseComplexValue(v);
-        const transformer = createTransformer(v);
-        return transformer(parsed.map(convertNumbersToZero));
+        }
+        setFinalKeyframe() { }
+        measureInitialState() { }
+        renderEndStyles() { }
+        measureEndState() { }
+        complete() {
+            this.isComplete = true;
+            this.onComplete(this.unresolvedKeyframes, this.finalKeyframe);
+            toResolve.delete(this);
+        }
+        cancel() {
+            if (!this.isComplete) {
+                this.isScheduled = false;
+                toResolve.delete(this);
+            }
+        }
+        resume() {
+            if (!this.isComplete)
+                this.scheduleResolve();
+        }
     }
-    const complex = {
-        test,
-        parse: parseComplexValue,
-        createTransformer,
-        getAnimatableNone: getAnimatableNone$1,
-    };
 
     /**
-     * Properties that should default to 1 or 100%
+     * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
      */
-    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 = /\b([a-z-]*)\(.*?\)/gu;
-    const filter = {
-        ...complex,
-        getAnimatableNone: (v) => {
-            const functions = v.match(functionRegex);
-            return functions ? functions.map(applyDefaultFilter).join(" ") : v;
-        },
-    };
-
-    const browserNumberValueTypes = {
-        // Border props
-        borderWidth: px,
-        borderTopWidth: px,
-        borderRightWidth: px,
-        borderBottomWidth: px,
-        borderLeftWidth: px,
-        borderRadius: px,
-        radius: px,
-        borderTopLeftRadius: px,
-        borderTopRightRadius: px,
-        borderBottomRightRadius: px,
-        borderBottomLeftRadius: px,
-        // Positioning props
-        width: px,
-        maxWidth: px,
-        height: px,
-        maxHeight: px,
-        top: px,
-        right: px,
-        bottom: px,
-        left: px,
-        // Spacing props
-        padding: px,
-        paddingTop: px,
-        paddingRight: px,
-        paddingBottom: px,
-        paddingLeft: px,
-        margin: px,
-        marginTop: px,
-        marginRight: px,
-        marginBottom: px,
-        marginLeft: px,
-        // Misc
-        backgroundPositionX: px,
-        backgroundPositionY: px,
-    };
-
-    const transformValueTypes = {
-        rotate: degrees,
-        rotateX: degrees,
-        rotateY: degrees,
-        rotateZ: degrees,
-        scale,
-        scaleX: scale,
-        scaleY: scale,
-        scaleZ: scale,
-        skew: degrees,
-        skewX: degrees,
-        skewY: degrees,
-        distance: px,
-        translateX: px,
-        translateY: px,
-        translateZ: px,
-        x: px,
-        y: px,
-        z: px,
-        perspective: px,
-        transformPerspective: px,
-        opacity: alpha,
-        originX: progressPercentage,
-        originY: progressPercentage,
-        originZ: px,
-    };
-
-    const int = {
-        ...number,
-        transform: Math.round,
-    };
+    const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
 
-    const numberValueTypes = {
-        ...browserNumberValueTypes,
-        ...transformValueTypes,
-        zIndex: int,
-        size: px,
-        // SVG
-        fillOpacity: alpha,
-        strokeOpacity: alpha,
-        numOctaves: int,
+    const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
+    const isCSSVariableName = 
+    /*@__PURE__*/ checkStringStartsWith("--");
+    const startsAsVariableToken = 
+    /*@__PURE__*/ checkStringStartsWith("var(--");
+    const isCSSVariableToken = (value) => {
+        const startsWithToken = startsAsVariableToken(value);
+        if (!startsWithToken)
+            return false;
+        // Ensure any comments are stripped from the value as this can harm performance of the regex.
+        return singleCssVariableRegex.test(value.split("/*")[0].trim());
     };
+    const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
 
     /**
-     * A map of default value types for common values
+     * Parse Framer's special CSS variable format into a CSS token and a fallback.
+     *
+     * ```
+     * `var(--foo, #fff)` => [`--foo`, '#fff']
+     * ```
+     *
+     * @param current
      */
-    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,
-    };
+    const splitCSSVariableRegex = 
+    // eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
+    /^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;
+    function parseCSSVariable(current) {
+        const match = splitCSSVariableRegex.exec(current);
+        if (!match)
+            return [,];
+        const [, token1, token2, fallback] = match;
+        return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback];
+    }
+    const maxDepth = 4;
+    function getVariableValue(current, element, depth = 1) {
+        exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
+        const [token, fallback] = parseCSSVariable(current);
+        // No CSS variable detected
+        if (!token)
+            return;
+        // Attempt to read this CSS variable off the element
+        const resolved = window.getComputedStyle(element).getPropertyValue(token);
+        if (resolved) {
+            const trimmed = resolved.trim();
+            return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
+        }
+        return isCSSVariableToken(fallback)
+            ? getVariableValue(fallback, element, depth + 1)
+            : fallback;
+    }
+
     /**
-     * Gets the default ValueType for the provided value key
+     * Tests a provided value against a ValueType
      */
-    const getDefaultValueType = (key) => defaultValueTypes[key];
+    const testValueType = (v) => (type) => type.test(v);
 
-    function getAnimatableNone(key, value) {
-        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 defaultValueType.getAnimatableNone
-            ? defaultValueType.getAnimatableNone(value)
-            : undefined;
-    }
+    /**
+     * ValueType for "auto"
+     */
+    const auto = {
+        test: (v) => v === "auto",
+        parse: (v) => v,
+    };
 
     /**
-     * If we encounter keyframes like "none" or "0" and we also have keyframes like
-     * "#fff" or "200px 200px" we want to find a keyframe to serve as a template for
-     * the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into
-     * zero equivalents, i.e. "#fff0" or "0px 0px".
+     * A list of value types commonly used for dimensions
      */
-    const invalidTemplates = new Set(["auto", "none", "0"]);
-    function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
-        let i = 0;
-        let animatableTemplate = undefined;
-        while (i < unresolvedKeyframes.length && !animatableTemplate) {
-            const keyframe = unresolvedKeyframes[i];
-            if (typeof keyframe === "string" &&
-                !invalidTemplates.has(keyframe) &&
-                analyseComplexValue(keyframe).values.length) {
-                animatableTemplate = unresolvedKeyframes[i];
-            }
-            i++;
-        }
-        if (animatableTemplate && name) {
-            for (const noneIndex of noneKeyframeIndexes) {
-                unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
-            }
-        }
-    }
+    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));
 
     class DOMKeyframesResolver extends KeyframeResolver {
         constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {
@@ -3187,8 +3185,9 @@
          */
         if (inputLength === 1)
             return () => output[0];
-        if (inputLength === 2 && input[0] === input[1])
+        if (inputLength === 2 && output[0] === output[1])
             return () => output[1];
+        const isZeroDeltaRange = input[0] === input[1];
         // If input runs highest -> lowest, reverse both arrays
         if (input[0] > input[inputLength - 1]) {
             input = [...input].reverse();
@@ -3197,6 +3196,8 @@
         const mixers = createMixers(output, ease, mixer);
         const numMixers = mixers.length;
         const interpolator = (v) => {
+            if (isZeroDeltaRange && v < input[0])
+                return output[0];
             let i = 0;
             if (numMixers > 1) {
                 for (; i < input.length - 2; i++) {
@@ -4166,7 +4167,7 @@
                 }
             }
             addValueToWillChange(visualElement, key);
-            value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
+            value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && positionalKeys.has(key)
                 ? { type: false }
                 : valueTransition, visualElement, isHandoff));
             const animation = value.animation;
@@ -4188,43 +4189,37 @@
         return element instanceof SVGElement && element.tagName !== "svg";
     }
 
-    const scaleCorrectors = {};
-
-    function isForcedMotionValue(key, { layout, layoutId }) {
-        return (transformProps.has(key) ||
-            key.startsWith("origin") ||
-            ((layout || layoutId !== undefined) &&
-                (!!scaleCorrectors[key] || key === "opacity")));
-    }
-
-    function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-        var _a;
-        const { style } = props;
-        const newValues = {};
-        for (const key in style) {
-            if (isMotionValue(style[key]) ||
-                (prevProps.style &&
-                    isMotionValue(prevProps.style[key])) ||
-                isForcedMotionValue(key, props) ||
-                ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) {
-                newValues[key] = style[key];
-            }
-        }
-        return newValues;
-    }
+    const createAxis = () => ({ min: 0, max: 0 });
+    const createBox = () => ({
+        x: createAxis(),
+        y: createAxis(),
+    });
 
-    function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
-        const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
-        for (const key in props) {
-            if (isMotionValue(props[key]) ||
-                isMotionValue(prevProps[key])) {
-                const targetKey = transformPropOrder.indexOf(key) !== -1
-                    ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
-                    : key;
-                newValues[targetKey] = props[key];
-            }
-        }
-        return newValues;
+    const featureProps = {
+        animation: [
+            "animate",
+            "variants",
+            "whileHover",
+            "whileTap",
+            "exit",
+            "whileInView",
+            "whileFocus",
+            "whileDrag",
+        ],
+        exit: ["exit"],
+        drag: ["drag", "dragControls"],
+        focus: ["whileFocus"],
+        hover: ["whileHover", "onHoverStart", "onHoverEnd"],
+        tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
+        pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
+        inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
+        layout: ["layout", "layoutId"],
+    };
+    const featureDefinitions = {};
+    for (const key in featureProps) {
+        featureDefinitions[key] = {
+            isEnabled: (props) => featureProps[key].some((name) => !!props[name]),
+        };
     }
 
     const isBrowser = typeof window !== "undefined";
@@ -4248,6 +4243,15 @@
         }
     }
 
+    /**
+     * 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));
+
     function isAnimationControls(v) {
         return (v !== null &&
             typeof v === "object" &&
@@ -4295,7 +4299,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "11.16.4", `Attempting to mix Motion versions ${nextValue.version} with 11.16.4 may not work as expected.`);
+                    warnOnce(nextValue.version === "11.16.6", `Attempting to mix Motion versions ${nextValue.version} with 11.16.6 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -4334,48 +4338,6 @@
         return next;
     }
 
-    const featureProps = {
-        animation: [
-            "animate",
-            "variants",
-            "whileHover",
-            "whileTap",
-            "exit",
-            "whileInView",
-            "whileFocus",
-            "whileDrag",
-        ],
-        exit: ["exit"],
-        drag: ["drag", "dragControls"],
-        focus: ["whileFocus"],
-        hover: ["whileHover", "onHoverStart", "onHoverEnd"],
-        tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
-        pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
-        inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
-        layout: ["layout", "layoutId"],
-    };
-    const featureDefinitions = {};
-    for (const key in featureProps) {
-        featureDefinitions[key] = {
-            isEnabled: (props) => featureProps[key].some((name) => !!props[name]),
-        };
-    }
-
-    /**
-     * 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 createAxis = () => ({ min: 0, max: 0 });
-    const createBox = () => ({
-        x: createAxis(),
-        y: createAxis(),
-    });
-
     const propEventHandlers = [
         "AnimationStart",
         "AnimationComplete",
@@ -5112,6 +5074,8 @@
         "lengthAdjust",
     ]);
 
+    const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
+
     function renderHTML(element, { style, vars }, styleProp, projection) {
         Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
         // Loop over any CSS variables and assign those.
@@ -5127,7 +5091,44 @@
         }
     }
 
-    const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
+    const scaleCorrectors = {};
+
+    function isForcedMotionValue(key, { layout, layoutId }) {
+        return (transformProps.has(key) ||
+            key.startsWith("origin") ||
+            ((layout || layoutId !== undefined) &&
+                (!!scaleCorrectors[key] || key === "opacity")));
+    }
+
+    function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
+        var _a;
+        const { style } = props;
+        const newValues = {};
+        for (const key in style) {
+            if (isMotionValue(style[key]) ||
+                (prevProps.style &&
+                    isMotionValue(prevProps.style[key])) ||
+                isForcedMotionValue(key, props) ||
+                ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) {
+                newValues[key] = style[key];
+            }
+        }
+        return newValues;
+    }
+
+    function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
+        const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
+        for (const key in props) {
+            if (isMotionValue(props[key]) ||
+                isMotionValue(prevProps[key])) {
+                const targetKey = transformPropOrder.indexOf(key) !== -1
+                    ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
+                    : key;
+                newValues[targetKey] = props[key];
+            }
+        }
+        return newValues;
+    }
 
     class SVGVisualElement extends DOMVisualElement {
         constructor() {
@@ -5746,25 +5747,6 @@
         return inset;
     }
 
-    const ScrollOffset = {
-        Enter: [
-            [0, 1],
-            [1, 1],
-        ],
-        Exit: [
-            [0, 0],
-            [1, 0],
-        ],
-        Any: [
-            [1, 0],
-            [0, 1],
-        ],
-        All: [
-            [0, 0],
-            [1, 1],
-        ],
-    };
-
     const namedEdges = {
         start: 0,
         center: 0.5,
@@ -5841,6 +5823,25 @@
         return targetPoint - containerPoint;
     }
 
+    const ScrollOffset = {
+        Enter: [
+            [0, 1],
+            [1, 1],
+        ],
+        Exit: [
+            [0, 0],
+            [1, 0],
+        ],
+        Any: [
+            [1, 0],
+            [0, 1],
+        ],
+        All: [
+            [0, 0],
+            [1, 1],
+        ],
+    };
+
     const point = { x: 0, y: 0 };
     function getTargetSize(target) {
         return "getBBox" in target && target.tagName !== "svg"
@@ -5887,10 +5888,10 @@
          * to map scroll value into a progress.
          */
         if (hasChanged) {
-            info[axis].interpolate = interpolate(info[axis].offset, defaultOffset$1(offsetDefinition));
+            info[axis].interpolate = interpolate(info[axis].offset, defaultOffset$1(offsetDefinition), { clamp: false });
             info[axis].interpolatorOffsets = [...info[axis].offset];
         }
-        info[axis].progress = info[axis].interpolate(info[axis].current);
+        info[axis].progress = clamp(0, 1, info[axis].interpolate(info[axis].current));
     }
 
     function measure(container, target = container, info) {