framer-motion 6.4.3 → 7.0.0

package/dist/framer-motion.dev.js

@@ -27,7 +27,7 @@
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -887,43 +887,43 @@
             : value;
     };
 
-    const clamp$1 = (min, max) => (v) => Math.max(Math.min(v, max), min);
-    const sanitize = (v) => (v % 1 ? Number(v.toFixed(5)) : v);
-    const floatRegex = /(-)?([\d]*\.?[\d])+/g;
-    const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
-    const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
-    function isString(v) {
+    const clamp$3 = (min, max) => (v) => Math.max(Math.min(v, max), min);
+    const sanitize$1 = (v) => (v % 1 ? Number(v.toFixed(5)) : v);
+    const floatRegex$1 = /(-)?([\d]*\.?[\d])+/g;
+    const colorRegex$1 = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
+    const singleColorRegex$1 = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
+    function isString$2(v) {
         return typeof v === 'string';
     }
 
-    const number = {
+    const number$1 = {
         test: (v) => typeof v === 'number',
         parse: parseFloat,
         transform: (v) => v,
     };
-    const alpha = Object.assign(Object.assign({}, number), { transform: clamp$1(0, 1) });
-    const scale = Object.assign(Object.assign({}, number), { default: 1 });
+    const alpha$1 = Object.assign(Object.assign({}, number$1), { transform: clamp$3(0, 1) });
+    const scale = Object.assign(Object.assign({}, number$1), { default: 1 });
 
-    const createUnitType = (unit) => ({
-        test: (v) => isString(v) && v.endsWith(unit) && v.split(' ').length === 1,
+    const createUnitType$1 = (unit) => ({
+        test: (v) => isString$2(v) && v.endsWith(unit) && v.split(' ').length === 1,
         parse: parseFloat,
         transform: (v) => `${v}${unit}`,
     });
-    const degrees = createUnitType('deg');
-    const percent = createUnitType('%');
-    const px = createUnitType('px');
-    const vh = createUnitType('vh');
-    const vw = createUnitType('vw');
-    const progressPercentage = Object.assign(Object.assign({}, percent), { parse: (v) => percent.parse(v) / 100, transform: (v) => percent.transform(v * 100) });
-
-    const isColorString = (type, testProp) => (v) => {
-        return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
+    const degrees = createUnitType$1('deg');
+    const percent$1 = createUnitType$1('%');
+    const px = createUnitType$1('px');
+    const vh = createUnitType$1('vh');
+    const vw = createUnitType$1('vw');
+    const progressPercentage = Object.assign(Object.assign({}, percent$1), { parse: (v) => percent$1.parse(v) / 100, transform: (v) => percent$1.transform(v * 100) });
+
+    const isColorString$1 = (type, testProp) => (v) => {
+        return Boolean((isString$2(v) && singleColorRegex$1.test(v) && v.startsWith(type)) ||
             (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
     };
-    const splitColor = (aName, bName, cName) => (v) => {
-        if (!isString(v))
+    const splitColor$1 = (aName, bName, cName) => (v) => {
+        if (!isString$2(v))
             return v;
-        const [a, b, c, alpha] = v.match(floatRegex);
+        const [a, b, c, alpha] = v.match(floatRegex$1);
         return {
             [aName]: parseFloat(a),
             [bName]: parseFloat(b),
@@ -932,39 +932,39 @@
         };
     };
 
-    const hsla = {
-        test: isColorString('hsl', 'hue'),
-        parse: splitColor('hue', 'saturation', 'lightness'),
-        transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
+    const hsla$1 = {
+        test: isColorString$1('hsl', 'hue'),
+        parse: splitColor$1('hue', 'saturation', 'lightness'),
+        transform: ({ hue, saturation, lightness, alpha: alpha$1$1 = 1 }) => {
             return ('hsla(' +
                 Math.round(hue) +
                 ', ' +
-                percent.transform(sanitize(saturation)) +
+                percent$1.transform(sanitize$1(saturation)) +
                 ', ' +
-                percent.transform(sanitize(lightness)) +
+                percent$1.transform(sanitize$1(lightness)) +
                 ', ' +
-                sanitize(alpha.transform(alpha$1)) +
+                sanitize$1(alpha$1.transform(alpha$1$1)) +
                 ')');
         },
     };
 
-    const clampRgbUnit = clamp$1(0, 255);
-    const rgbUnit = Object.assign(Object.assign({}, 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) +
+    const clampRgbUnit$1 = clamp$3(0, 255);
+    const rgbUnit$1 = Object.assign(Object.assign({}, number$1), { transform: (v) => Math.round(clampRgbUnit$1(v)) });
+    const rgba$1 = {
+        test: isColorString$1('rgb', 'red'),
+        parse: splitColor$1('red', 'green', 'blue'),
+        transform: ({ red, green, blue, alpha: alpha$1$1 = 1 }) => 'rgba(' +
+            rgbUnit$1.transform(red) +
             ', ' +
-            rgbUnit.transform(green) +
+            rgbUnit$1.transform(green) +
             ', ' +
-            rgbUnit.transform(blue) +
+            rgbUnit$1.transform(blue) +
             ', ' +
-            sanitize(alpha.transform(alpha$1)) +
+            sanitize$1(alpha$1.transform(alpha$1$1)) +
             ')',
     };
 
-    function parseHex(v) {
+    function parseHex$1(v) {
         let r = '';
         let g = '';
         let b = '';
@@ -992,88 +992,88 @@
             alpha: a ? parseInt(a, 16) / 255 : 1,
         };
     }
-    const hex = {
-        test: isColorString('#'),
-        parse: parseHex,
-        transform: rgba.transform,
+    const hex$1 = {
+        test: isColorString$1('#'),
+        parse: parseHex$1,
+        transform: rgba$1.transform,
     };
 
-    const color = {
-        test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
+    const color$1 = {
+        test: (v) => rgba$1.test(v) || hex$1.test(v) || hsla$1.test(v),
         parse: (v) => {
-            if (rgba.test(v)) {
-                return rgba.parse(v);
+            if (rgba$1.test(v)) {
+                return rgba$1.parse(v);
             }
-            else if (hsla.test(v)) {
-                return hsla.parse(v);
+            else if (hsla$1.test(v)) {
+                return hsla$1.parse(v);
             }
             else {
-                return hex.parse(v);
+                return hex$1.parse(v);
             }
         },
         transform: (v) => {
-            return isString(v)
+            return isString$2(v)
                 ? v
                 : v.hasOwnProperty('red')
-                    ? rgba.transform(v)
-                    : hsla.transform(v);
+                    ? rgba$1.transform(v)
+                    : hsla$1.transform(v);
         },
     };
 
-    const colorToken = '${c}';
-    const numberToken = '${n}';
-    function test(v) {
+    const colorToken$1 = '${c}';
+    const numberToken$1 = '${n}';
+    function test$1(v) {
         var _a, _b, _c, _d;
         return (isNaN(v) &&
-            isString(v) &&
-            ((_b = (_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0);
+            isString$2(v) &&
+            ((_b = (_a = v.match(floatRegex$1)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex$1)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0);
     }
-    function analyse$1(v) {
+    function analyse$2(v) {
         if (typeof v === 'number')
             v = `${v}`;
         const values = [];
         let numColors = 0;
-        const colors = v.match(colorRegex);
+        const colors = v.match(colorRegex$1);
         if (colors) {
             numColors = colors.length;
-            v = v.replace(colorRegex, colorToken);
-            values.push(...colors.map(color.parse));
+            v = v.replace(colorRegex$1, colorToken$1);
+            values.push(...colors.map(color$1.parse));
         }
-        const numbers = v.match(floatRegex);
+        const numbers = v.match(floatRegex$1);
         if (numbers) {
-            v = v.replace(floatRegex, numberToken);
-            values.push(...numbers.map(number.parse));
+            v = v.replace(floatRegex$1, numberToken$1);
+            values.push(...numbers.map(number$1.parse));
         }
         return { values, numColors, tokenised: v };
     }
-    function parse(v) {
-        return analyse$1(v).values;
+    function parse$1(v) {
+        return analyse$2(v).values;
     }
-    function createTransformer(v) {
-        const { values, numColors, tokenised } = analyse$1(v);
+    function createTransformer$1(v) {
+        const { values, numColors, tokenised } = analyse$2(v);
         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]));
+                output = output.replace(i < numColors ? colorToken$1 : numberToken$1, i < numColors ? color$1.transform(v[i]) : sanitize$1(v[i]));
             }
             return output;
         };
     }
-    const convertNumbersToZero = (v) => typeof v === 'number' ? 0 : v;
-    function getAnimatableNone$1(v) {
-        const parsed = parse(v);
-        const transformer = createTransformer(v);
-        return transformer(parsed.map(convertNumbersToZero));
+    const convertNumbersToZero$1 = (v) => typeof v === 'number' ? 0 : v;
+    function getAnimatableNone$2(v) {
+        const parsed = parse$1(v);
+        const transformer = createTransformer$1(v);
+        return transformer(parsed.map(convertNumbersToZero$1));
     }
-    const complex = { test, parse, createTransformer, getAnimatableNone: getAnimatableNone$1 };
+    const complex$1 = { test: test$1, parse: parse$1, createTransformer: createTransformer$1, getAnimatableNone: getAnimatableNone$2 };
 
     const maxDefaults = new Set(['brightness', 'contrast', 'saturate', 'opacity']);
     function applyDefaultFilter(v) {
         let [name, value] = v.slice(0, -1).split('(');
         if (name === 'drop-shadow')
             return v;
-        const [number] = value.match(floatRegex) || [];
+        const [number] = value.match(floatRegex$1) || [];
         if (!number)
             return v;
         const unit = value.replace(number, '');
@@ -1083,12 +1083,12 @@
         return name + '(' + defaultValue + unit + ')';
     }
     const functionRegex = /([a-z-]*)\(.*?\)/g;
-    const filter = Object.assign(Object.assign({}, complex), { getAnimatableNone: (v) => {
+    const filter = Object.assign(Object.assign({}, complex$1), { getAnimatableNone: (v) => {
             const functions = v.match(functionRegex);
             return functions ? functions.map(applyDefaultFilter).join(' ') : v;
         } });
 
-    var int = __assign(__assign({}, number), { transform: Math.round });
+    var int = __assign(__assign({}, number$1), { transform: Math.round });
 
     var numberValueTypes = {
         // Border props
@@ -1145,15 +1145,15 @@
         z: px,
         perspective: px,
         transformPerspective: px,
-        opacity: alpha,
+        opacity: alpha$1,
         originX: progressPercentage,
         originY: progressPercentage,
         originZ: px,
         // Misc
         zIndex: int,
         // SVG
-        fillOpacity: alpha,
-        strokeOpacity: alpha,
+        fillOpacity: alpha$1,
+        strokeOpacity: alpha$1,
         numOctaves: int,
     };
 
@@ -2008,7 +2008,7 @@
         return React.useEffect(function () { return function () { return callback(); }; }, []);
     }
 
-    const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
+    const clamp$2 = (min, max, v) => Math.min(Math.max(v, min), max);
 
     const safeMin = 0.001;
     const minDuration = 0.01;
@@ -2020,8 +2020,8 @@
         let derivative;
         warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
         let dampingRatio = 1 - bounce;
-        dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
-        duration = clamp(minDuration, maxDuration, duration / 1000);
+        dampingRatio = clamp$2(minDamping, maxDamping, dampingRatio);
+        duration = clamp$2(minDuration, maxDuration, duration / 1000);
         if (dampingRatio < 1) {
             envelope = (undampedFreq) => {
                 const exponentialDecay = undampedFreq * dampingRatio;
@@ -2200,12 +2200,189 @@
     spring.needsInterpolation = (a, b) => typeof a === "string" || typeof b === "string";
     const zero = (_t) => 0;
 
-    const progress = (from, to, value) => {
+    const progress$1 = (from, to, value) => {
         const toFromDifference = to - from;
         return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
     };
 
-    const mix = (from, to, progress) => -progress * from + progress * to + from;
+    const mix$1 = (from, to, progress) => -progress * from + progress * to + from;
+
+    const clamp$1 = (min, max) => (v) => Math.max(Math.min(v, max), min);
+    const sanitize = (v) => (v % 1 ? Number(v.toFixed(5)) : v);
+    const floatRegex = /(-)?([\d]*\.?[\d])+/g;
+    const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
+    const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
+    function isString$1(v) {
+        return typeof v === 'string';
+    }
+
+    const number = {
+        test: (v) => typeof v === 'number',
+        parse: parseFloat,
+        transform: (v) => v,
+    };
+    const alpha = Object.assign(Object.assign({}, number), { transform: clamp$1(0, 1) });
+    Object.assign(Object.assign({}, number), { default: 1 });
+
+    const createUnitType = (unit) => ({
+        test: (v) => isString$1(v) && v.endsWith(unit) && v.split(' ').length === 1,
+        parse: parseFloat,
+        transform: (v) => `${v}${unit}`,
+    });
+    const percent = createUnitType('%');
+    Object.assign(Object.assign({}, percent), { parse: (v) => percent.parse(v) / 100, transform: (v) => percent.transform(v * 100) });
+
+    const isColorString = (type, testProp) => (v) => {
+        return Boolean((isString$1(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
+            (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
+    };
+    const splitColor = (aName, bName, cName) => (v) => {
+        if (!isString$1(v))
+            return v;
+        const [a, b, c, alpha] = v.match(floatRegex);
+        return {
+            [aName]: parseFloat(a),
+            [bName]: parseFloat(b),
+            [cName]: parseFloat(c),
+            alpha: alpha !== undefined ? parseFloat(alpha) : 1,
+        };
+    };
+
+    const 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 clampRgbUnit = clamp$1(0, 255);
+    const rgbUnit = Object.assign(Object.assign({}, 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 (v.length > 5) {
+            r = v.substr(1, 2);
+            g = v.substr(3, 2);
+            b = v.substr(5, 2);
+            a = v.substr(7, 2);
+        }
+        else {
+            r = v.substr(1, 1);
+            g = v.substr(2, 1);
+            b = v.substr(3, 1);
+            a = v.substr(4, 1);
+            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 color = {
+        test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
+        parse: (v) => {
+            if (rgba.test(v)) {
+                return rgba.parse(v);
+            }
+            else if (hsla.test(v)) {
+                return hsla.parse(v);
+            }
+            else {
+                return hex.parse(v);
+            }
+        },
+        transform: (v) => {
+            return isString$1(v)
+                ? v
+                : v.hasOwnProperty('red')
+                    ? rgba.transform(v)
+                    : hsla.transform(v);
+        },
+    };
+
+    const colorToken = '${c}';
+    const numberToken = '${n}';
+    function test(v) {
+        var _a, _b, _c, _d;
+        return (isNaN(v) &&
+            isString$1(v) &&
+            ((_b = (_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0);
+    }
+    function analyse$1(v) {
+        if (typeof v === 'number')
+            v = `${v}`;
+        const values = [];
+        let numColors = 0;
+        const colors = v.match(colorRegex);
+        if (colors) {
+            numColors = colors.length;
+            v = v.replace(colorRegex, colorToken);
+            values.push(...colors.map(color.parse));
+        }
+        const numbers = v.match(floatRegex);
+        if (numbers) {
+            v = v.replace(floatRegex, numberToken);
+            values.push(...numbers.map(number.parse));
+        }
+        return { values, numColors, tokenised: v };
+    }
+    function parse(v) {
+        return analyse$1(v).values;
+    }
+    function createTransformer(v) {
+        const { values, numColors, tokenised } = analyse$1(v);
+        const numValues = values.length;
+        return (v) => {
+            let output = tokenised;
+            for (let i = 0; i < numValues; i++) {
+                output = output.replace(i < numColors ? colorToken : numberToken, i < numColors ? color.transform(v[i]) : sanitize(v[i]));
+            }
+            return output;
+        };
+    }
+    const convertNumbersToZero = (v) => typeof v === 'number' ? 0 : v;
+    function getAnimatableNone$1(v) {
+        const parsed = parse(v);
+        const transformer = createTransformer(v);
+        return transformer(parsed.map(convertNumbersToZero));
+    }
+    const complex = { test, parse, createTransformer, getAnimatableNone: getAnimatableNone$1 };
 
     function hueToRgb(p, q, t) {
         if (t < 0)
@@ -2277,7 +2454,7 @@
                     blended[key] = mixLinearColor(fromColor[key], toColor[key], v);
                 }
             }
-            blended.alpha = mix(fromColor.alpha, toColor.alpha, v);
+            blended.alpha = mix$1(fromColor.alpha, toColor.alpha, v);
             return fromColorType.transform(blended);
         };
     };
@@ -2289,7 +2466,7 @@
 
     function getMixer$1(origin, target) {
         if (isNum(origin)) {
-            return (v) => mix(origin, target, v);
+            return (v) => mix$1(origin, target, v);
         }
         else if (color.test(origin)) {
             return mixColor(origin, target);
@@ -2361,7 +2538,7 @@
         }
     };
 
-    const mixNumber = (from, to) => (p) => mix(from, to, p);
+    const mixNumber = (from, to) => (p) => mix$1(from, to, p);
     function detectMixerFactory(v) {
         if (typeof v === 'number') {
             return mixNumber;
@@ -2396,7 +2573,7 @@
         return mixers;
     }
     function fastInterpolate([from, to], [mixer]) {
-        return (v) => mixer(progress(from, to, v));
+        return (v) => mixer(progress$1(from, to, v));
     }
     function slowInterpolate(input, mixers) {
         const inputLength = input.length;
@@ -2420,11 +2597,11 @@
                 }
                 mixerIndex = i - 1;
             }
-            const progressInRange = progress(input[mixerIndex], input[mixerIndex + 1], v);
+            const progressInRange = progress$1(input[mixerIndex], input[mixerIndex + 1], v);
             return mixers[mixerIndex](progressInRange);
         };
     }
-    function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
+    function interpolate$1(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
         const inputLength = input.length;
         invariant(inputLength === output.length, 'Both input and output ranges must be the same length');
         invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, 'Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.');
@@ -2439,7 +2616,7 @@
             ? fastInterpolate(input, mixers)
             : slowInterpolate(input, mixers);
         return isClamp
-            ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v))
+            ? (v) => interpolator(clamp$2(input[0], input[inputLength - 1], v))
             : interpolator;
     }
 
@@ -2492,7 +2669,7 @@
     function defaultEasing(values, easing) {
         return values.map(() => easing || easeInOut).splice(0, values.length - 1);
     }
-    function defaultOffset(values) {
+    function defaultOffset$2(values) {
         const numValues = values.length;
         return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0);
     }
@@ -2504,9 +2681,9 @@
         const values = Array.isArray(to) ? to : [from, to];
         const times = convertOffsetToTimes(offset && offset.length === values.length
             ? offset
-            : defaultOffset(values), duration);
+            : defaultOffset$2(values), duration);
         function createInterpolator() {
-            return interpolate(times, values, {
+            return interpolate$1(times, values, {
                 ease: Array.isArray(ease) ? ease : defaultEasing(values, ease),
             });
         }
@@ -2567,12 +2744,12 @@
     }
 
     const defaultTimestep = (1 / 60) * 1000;
-    const getCurrentTime$1 = typeof performance !== "undefined"
+    const getCurrentTime = typeof performance !== "undefined"
         ? () => performance.now()
         : () => Date.now();
     const onNextFrame = typeof window !== "undefined"
         ? (callback) => window.requestAnimationFrame(callback)
-        : (callback) => setTimeout(() => callback(getCurrentTime$1()), defaultTimestep);
+        : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
 
     function createRenderStep(runNextFrame) {
         let toRun = [];
@@ -2629,7 +2806,7 @@
         return step;
     }
 
-    const maxElapsed = 40;
+    const maxElapsed$1 = 40;
     let useDefaultElapsed = true;
     let runNextFrame = false;
     let isProcessing = false;
@@ -2670,7 +2847,7 @@
         runNextFrame = false;
         frame.delta = useDefaultElapsed
             ? defaultTimestep
-            : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);
+            : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed$1), 1);
         frame.timestamp = timestamp;
         isProcessing = true;
         stepsOrder.forEach(processStep);
@@ -2720,7 +2897,7 @@
         let interpolateFromNumber;
         const animator = detectAnimationFromOptions(options);
         if ((_c = (_b = animator).needsInterpolation) === null || _c === void 0 ? void 0 : _c.call(_b, from, to)) {
-            interpolateFromNumber = interpolate([0, 100], [from, to], {
+            interpolateFromNumber = interpolate$1([0, 100], [from, to], {
                 clamp: false,
             });
             from = 0;
@@ -2782,7 +2959,7 @@
         };
     }
 
-    function velocityPerSecond(velocity, frameDuration) {
+    function velocityPerSecond$1(velocity, frameDuration) {
         return frameDuration ? velocity * (1000 / frameDuration) : 0;
     }
 
@@ -2824,7 +3001,7 @@
             const checkBoundary = (v) => {
                 prev = current;
                 current = v;
-                velocity = velocityPerSecond(v - prev, getFrameData().delta);
+                velocity = velocityPerSecond$1(v - prev, getFrameData().delta);
                 if ((heading === 1 && v > boundary) ||
                     (heading === -1 && v < boundary)) {
                     startSpring({ from: v, to: boundary, velocity });
@@ -2863,7 +3040,7 @@
         }
     }
 
-    const wrap = (min, max, v) => {
+    const wrap$1 = (min, max, v) => {
         const rangeSize = max - min;
         return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
     };
@@ -3311,7 +3488,7 @@
         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
+            complex$1.test(value) && // And it contains numbers and/or colors
             !value.startsWith("url(") // Unless it starts with "url("
         ) {
             return true;
@@ -3374,9 +3551,9 @@
      */
     var defaultValueTypes = __assign(__assign({}, numberValueTypes), { 
         // Color props
-        color: color, backgroundColor: color, outlineColor: color, fill: color, stroke: color, 
+        color: color$1, backgroundColor: color$1, outlineColor: color$1, fill: color$1, stroke: color$1, 
         // Border props
-        borderColor: color, borderTopColor: color, borderRightColor: color, borderBottomColor: color, borderLeftColor: color, filter: filter, WebkitFilter: filter });
+        borderColor: color$1, borderTopColor: color$1, borderRightColor: color$1, borderBottomColor: color$1, borderLeftColor: color$1, filter: filter, WebkitFilter: filter });
     /**
      * Gets the default ValueType for the provided value key
      */
@@ -3386,7 +3563,7 @@
         var _a;
         var defaultValueType = getDefaultValueType(key);
         if (defaultValueType !== filter)
-            defaultValueType = complex;
+            defaultValueType = complex$1;
         // 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);
     }
@@ -3682,7 +3859,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 = "6.4.3";
+            this.version = "7.0.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -3900,7 +4077,7 @@
             // 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) -
+                    velocityPerSecond$1(parseFloat(this.current) -
                         parseFloat(this.prev), this.timeDelta)
                 : 0;
         };
@@ -3981,7 +4158,7 @@
     /**
      * A list of value types commonly used for dimensions
      */
-    var dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
+    var dimensionValueTypes = [number$1, px, percent$1, degrees, vw, vh, auto];
     /**
      * Tests a dimensional value against the list of dimension ValueTypes
      */
@@ -3992,7 +4169,7 @@
     /**
      * A list of all ValueTypes
      */
-    var valueTypes = __spreadArray(__spreadArray([], __read(dimensionValueTypes), false), [color, complex], false);
+    var valueTypes = __spreadArray(__spreadArray([], __read(dimensionValueTypes), false), [color$1, complex$1], false);
     /**
      * Tests a value against the list of ValueTypes
      */
@@ -4078,7 +4255,7 @@
                 // If this is a number read as a string, ie "0" or "200", convert it to a number
                 value = parseFloat(value);
             }
-            else if (!findValueType(value) && complex.test(targetValue)) {
+            else if (!findValueType(value) && complex$1.test(targetValue)) {
                 value = getAnimatableNone(key, targetValue);
             }
             visualElement.addValue(key, motionValue(value));
@@ -4608,8 +4785,8 @@
      */
     var PanSession = /** @class */ (function () {
         function PanSession(event, handlers, _a) {
-            var _this = this;
             var _b = _a === void 0 ? {} : _a, transformPagePoint = _b.transformPagePoint;
+            var _this = this;
             /**
              * @internal
              */
@@ -4758,12 +4935,12 @@
     function calcAxisDelta(delta, source, target, origin) {
         if (origin === void 0) { origin = 0.5; }
         delta.origin = origin;
-        delta.originPoint = mix(source.min, source.max, delta.origin);
+        delta.originPoint = mix$1(source.min, source.max, delta.origin);
         delta.scale = calcLength(target) / calcLength(source);
         if (isNear(delta.scale, 1, 0.0001) || isNaN(delta.scale))
             delta.scale = 1;
         delta.translate =
-            mix(target.min, target.max, delta.origin) - delta.originPoint;
+            mix$1(target.min, target.max, delta.origin) - delta.originPoint;
         if (isNear(delta.translate) || isNaN(delta.translate))
             delta.translate = 0;
     }
@@ -4797,11 +4974,11 @@
         var min = _a.min, max = _a.max;
         if (min !== undefined && point < min) {
             // If we have a min point defined, and this is outside of that, constrain
-            point = elastic ? mix(min, point, elastic.min) : Math.max(point, min);
+            point = elastic ? mix$1(min, point, elastic.min) : Math.max(point, min);
         }
         else if (max !== undefined && point > max) {
             // If we have a max point defined, and this is outside of that, constrain
-            point = elastic ? mix(max, point, elastic.max) : Math.min(point, max);
+            point = elastic ? mix$1(max, point, elastic.max) : Math.min(point, max);
         }
         return point;
     }
@@ -4862,12 +5039,12 @@
         var sourceLength = calcLength(source);
         var targetLength = calcLength(target);
         if (targetLength > sourceLength) {
-            origin = progress(target.min, target.max - sourceLength, source.min);
+            origin = progress$1(target.min, target.max - sourceLength, source.min);
         }
         else if (sourceLength > targetLength) {
-            origin = progress(source.min, source.max - targetLength, target.min);
+            origin = progress$1(source.min, source.max - targetLength, target.min);
         }
-        return clamp(0, 1, origin);
+        return clamp$2(0, 1, origin);
     }
     /**
      * Rebase the calculated viewport constraints relative to the layout.min point.
@@ -5073,7 +5250,7 @@
     function transformAxis(axis, transforms, _a) {
         var _b = __read(_a, 3), key = _b[0], scaleKey = _b[1], originKey = _b[2];
         var axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5;
-        var originPoint = mix(axis.min, axis.max, axisOrigin);
+        var originPoint = mix$1(axis.min, axis.max, axisOrigin);
         // Apply the axis delta to the final axis
         applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale);
     }
@@ -5172,7 +5349,7 @@
                     /**
                      * If the MotionValue is a percentage value convert to px
                      */
-                    if (percent.test(current)) {
+                    if (percent$1.test(current)) {
                         var measuredAxis = (_b = (_a = _this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.actual[axis];
                         if (measuredAxis) {
                             var length_1 = calcLength(measuredAxis);
@@ -5386,7 +5563,7 @@
                 var axisValue = _this.getAxisMotionValue(axis);
                 if (projection && projection.layout) {
                     var _a = projection.layout.actual[axis], min = _a.min, max = _a.max;
-                    axisValue.set(point[axis] - mix(min, max, 0.5));
+                    axisValue.set(point[axis] - mix$1(min, max, 0.5));
                 }
             });
         };
@@ -5441,7 +5618,7 @@
                  */
                 var axisValue = _this.getAxisMotionValue(axis);
                 var _a = _this.constraints[axis], min = _a.min, max = _a.max;
-                axisValue.set(mix(min, max, boxProgress[axis]));
+                axisValue.set(mix$1(min, max, boxProgress[axis]));
             });
         };
         VisualElementDragControls.prototype.addListeners = function () {
@@ -5480,7 +5657,7 @@
              * If the element's layout changes, calculate the delta and apply that to
              * the drag gesture's origin point.
              */
-            projection.addEventListener("didUpdate", (function (_a) {
+            var stopLayoutUpdateListener = projection.addEventListener("didUpdate", (function (_a) {
                 var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged;
                 if (_this.isDragging && hasLayoutChanged) {
                     eachAxis(function (axis) {
@@ -5497,6 +5674,7 @@
                 stopResizeListener();
                 stopPointerListener();
                 stopMeasureLayoutListener();
+                stopLayoutUpdateListener === null || stopLayoutUpdateListener === void 0 ? void 0 : stopLayoutUpdateListener();
             };
         };
         VisualElementDragControls.prototype.getProps = function () {
@@ -5651,7 +5829,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "6.4.3", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.4.3 may not work as expected."));
+                    warnOnce(nextValue.version === "7.0.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.0 may not work as expected."));
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -6183,7 +6361,7 @@
         value.set(to);
     };
     var isNumOrPxType = function (v) {
-        return v === number || v === px;
+        return v === number$1 || v === px;
     };
     var BoundingBoxDimension;
     (function (BoundingBoxDimension) {
@@ -6490,9 +6668,9 @@
          * can be animated by Motion.
          */
         makeTargetAnimatable: function (element, _a, _b, isMounted) {
+            var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
             var transformValues = _b.transformValues;
             if (isMounted === void 0) { isMounted = true; }
-            var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
             var origin = getOrigin(target, transition || {}, element);
             /**
              * If Framer has provided a function to convert `Color` etc value types, convert them
@@ -6599,11 +6777,11 @@
                     return varToken;
                 });
             }
-            var shadow = complex.parse(latest);
+            var shadow = complex$1.parse(latest);
             // TODO: Doesn't support multiple shadows
             if (shadow.length > 5)
                 return original;
-            var template = complex.createTransformer(latest);
+            var template = complex$1.createTransformer(latest);
             var offset = typeof shadow[0] !== "number" ? 1 : 0;
             // Calculate the overall context scale
             var xScale = projectionDelta.x.scale * treeScale.x;
@@ -6616,7 +6794,7 @@
              * We could potentially improve the outcome of this by incorporating the ratio between
              * the two scales.
              */
-            var averageScale = mix(xScale, yScale, 0.5);
+            var averageScale = mix$1(xScale, yScale, 0.5);
             // Blur
             if (typeof shadow[2 + offset] === "number")
                 shadow[2 + offset] /= averageScale;
@@ -6807,14 +6985,14 @@
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
         var _a, _b, _c, _d;
         if (shouldCrossfadeOpacity) {
-            target.opacity = mix(0, 
+            target.opacity = mix$1(0, 
             // (follow?.opacity as number) ?? 0,
             // TODO Reinstate this if only child
             (_a = lead.opacity) !== null && _a !== void 0 ? _a : 1, easeCrossfadeIn(progress));
-            target.opacityExit = mix((_b = follow.opacity) !== null && _b !== void 0 ? _b : 1, 0, easeCrossfadeOut(progress));
+            target.opacityExit = mix$1((_b = follow.opacity) !== null && _b !== void 0 ? _b : 1, 0, easeCrossfadeOut(progress));
         }
         else if (isOnlyMember) {
-            target.opacity = mix((_c = follow.opacity) !== null && _c !== void 0 ? _c : 1, (_d = lead.opacity) !== null && _d !== void 0 ? _d : 1, progress);
+            target.opacity = mix$1((_c = follow.opacity) !== null && _c !== void 0 ? _c : 1, (_d = lead.opacity) !== null && _d !== void 0 ? _d : 1, progress);
         }
         /**
          * Mix border radius
@@ -6831,8 +7009,8 @@
                 leadRadius === 0 ||
                 isPx(followRadius) === isPx(leadRadius);
             if (canMix) {
-                target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
-                if (percent.test(leadRadius) || percent.test(followRadius)) {
+                target[borderLabel] = Math.max(mix$1(asNumber(followRadius), asNumber(leadRadius), progress), 0);
+                if (percent$1.test(leadRadius) || percent$1.test(followRadius)) {
                     target[borderLabel] += "%";
                 }
             }
@@ -6844,7 +7022,7 @@
          * Mix rotation
          */
         if (follow.rotate || lead.rotate) {
-            target.rotate = mix(follow.rotate || 0, lead.rotate || 0, progress);
+            target.rotate = mix$1(follow.rotate || 0, lead.rotate || 0, progress);
         }
     }
     function getRadius(values, radiusName) {
@@ -6883,7 +7061,7 @@
                 return 0;
             if (p > max)
                 return 1;
-            return easing(progress(min, max, p));
+            return easing(progress$1(min, max, p));
         };
     }
 
@@ -6926,14 +7104,14 @@
         if (origin === void 0) { origin = 0.5; }
         if (originAxis === void 0) { originAxis = axis; }
         if (sourceAxis === void 0) { sourceAxis = axis; }
-        if (percent.test(translate)) {
+        if (percent$1.test(translate)) {
             translate = parseFloat(translate);
-            var relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100);
+            var relativeProgress = mix$1(sourceAxis.min, sourceAxis.max, translate / 100);
             translate = relativeProgress - sourceAxis.min;
         }
         if (typeof translate !== "number")
             return;
-        var originPoint = mix(originAxis.min, originAxis.max, origin);
+        var originPoint = mix$1(originAxis.min, originAxis.max, origin);
         if (axis === originAxis)
             originPoint -= translate;
         axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale);
@@ -7152,9 +7330,9 @@
         var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, checkIsScrollRoot = _a.checkIsScrollRoot, resetTransform = _a.resetTransform;
         return /** @class */ (function () {
             function ProjectionNode(id, latestValues, parent) {
-                var _this = this;
                 if (latestValues === void 0) { latestValues = {}; }
                 if (parent === void 0) { parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent(); }
+                var _this = this;
                 /**
                  * A Set containing all this component's children. This is used to iterate
                  * through the children.
@@ -8280,14 +8458,14 @@
         stack.removeLeadSnapshot();
     }
     function mixAxisDelta(output, delta, p) {
-        output.translate = mix(delta.translate, 0, p);
-        output.scale = mix(delta.scale, 1, p);
+        output.translate = mix$1(delta.translate, 0, p);
+        output.scale = mix$1(delta.scale, 1, p);
         output.origin = delta.origin;
         output.originPoint = delta.originPoint;
     }
     function mixAxis(output, from, to, p) {
-        output.min = mix(from.min, to.min, p);
-        output.max = mix(from.max, to.max, p);
+        output.min = mix$1(from.min, to.min, p);
+        output.max = mix$1(from.max, to.max, p);
     }
     function mixBox(output, from, to, p) {
         mixAxis(output.x, from.x, to.x, p);
@@ -8800,7 +8978,7 @@
             return order;
         var item = order[index];
         var nextLayout = nextItem.layout;
-        var nextItemCenter = mix(nextLayout.min, nextLayout.max, 0.5);
+        var nextItemCenter = mix$1(nextLayout.min, nextLayout.max, 0.5);
         if ((nextOffset === 1 && item.layout.max + offset > nextItemCenter) ||
             (nextOffset === -1 && item.layout.min + offset < nextItemCenter)) {
             return moveItem(order, index, index + nextOffset);
@@ -8899,18 +9077,18 @@
         var inputRange = args[1 + argOffset];
         var outputRange = args[2 + argOffset];
         var options = args[3 + argOffset];
-        var interpolator = interpolate(inputRange, outputRange, __assign({ mixer: getMixer(outputRange[0]) }, options));
+        var interpolator = interpolate$1(inputRange, outputRange, __assign({ mixer: getMixer(outputRange[0]) }, options));
         return useImmediate ? interpolator(inputValue) : interpolator;
     }
 
     function useOnChange(value, callback) {
-        React.useEffect(function () {
+        useIsomorphicLayoutEffect(function () {
             if (isMotionValue(value))
                 return value.onChange(callback);
         }, [callback]);
     }
     function useMultiOnChange(values, handler) {
-        React.useEffect(function () {
+        useIsomorphicLayoutEffect(function () {
             var subscriptions = values.map(function (value) { return value.onChange(handler); });
             return function () { return subscriptions.forEach(function (unsubscribe) { return unsubscribe(); }); };
         });
@@ -9120,143 +9298,636 @@
         return velocity;
     }
 
-    function createScrollMotionValues() {
-        return {
-            scrollX: motionValue(0),
-            scrollY: motionValue(0),
-            scrollXProgress: motionValue(0),
-            scrollYProgress: motionValue(0),
-        };
-    }
-    function setProgress(offset, maxOffset, value) {
-        value.set(!offset || !maxOffset ? 0 : offset / maxOffset);
-    }
-    function createScrollUpdater(values, getOffsets) {
-        var update = function () {
-            var _a = getOffsets(), xOffset = _a.xOffset, yOffset = _a.yOffset, xMaxOffset = _a.xMaxOffset, yMaxOffset = _a.yMaxOffset;
-            // Set absolute positions
-            values.scrollX.set(xOffset);
-            values.scrollY.set(yOffset);
-            // Set 0-1 progress
-            setProgress(xOffset, xMaxOffset, values.scrollXProgress);
-            setProgress(yOffset, yMaxOffset, values.scrollYProgress);
-        };
-        update();
-        return update;
-    }
+    const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
 
-    var getElementScrollOffsets = function (element) { return function () {
-        return {
-            xOffset: element.scrollLeft,
-            yOffset: element.scrollTop,
-            xMaxOffset: element.scrollWidth - element.offsetWidth,
-            yMaxOffset: element.scrollHeight - element.offsetHeight,
-        };
-    }; };
-    /**
-     * Returns MotionValues that update when the provided element scrolls:
-     *
-     * - `scrollX` — Horizontal scroll distance in pixels.
-     * - `scrollY` — Vertical scroll distance in pixels.
-     * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
-     * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
-     *
-     * This element must be set to `overflow: scroll` on either or both axes to report scroll offset.
-     *
-     * ```jsx
-     * export const MyComponent = () => {
-     *   const ref = useRef()
-     *   const { scrollYProgress } = useElementScroll(ref)
-     *
-     *   return (
-     *     <div ref={ref}>
-     *       <motion.div style={{ scaleX: scrollYProgress }} />
-     *     </div>
-     *   )
-     * }
-     * ```
-     *
-     * @public
-     */
-    function useElementScroll(ref) {
-        var values = useConstant(createScrollMotionValues);
-        useIsomorphicLayoutEffect(function () {
-            var element = ref.current;
-            invariant(!!element, "ref provided to useScroll must be passed into a HTML element.");
-            if (!element)
-                return;
-            var updateScrollValues = createScrollUpdater(values, getElementScrollOffsets(element));
-            var scrollListener = addDomEvent(element, "scroll", updateScrollValues);
-            var resizeListener = addDomEvent(element, "resize", updateScrollValues);
-            return function () {
-                scrollListener && scrollListener();
-                resizeListener && resizeListener();
+    const isNumber = (value) => typeof value === "number";
+
+    const isEasingList = (easing) => Array.isArray(easing) && !isNumber(easing[0]);
+
+    const wrap = (min, max, v) => {
+        const rangeSize = max - min;
+        return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
+    };
+
+    function getEasingForSegment(easing, i) {
+        return isEasingList(easing)
+            ? easing[wrap(0, easing.length, i)]
+            : easing;
+    }
+
+    const mix = (min, max, progress) => -progress * min + progress * max + min;
+
+    const noopReturn = (v) => v;
+
+    const progress = (min, max, value) => max - min === 0 ? 1 : (value - min) / (max - min);
+
+    function fillOffset(offset, remaining) {
+        const min = offset[offset.length - 1];
+        for (let i = 1; i <= remaining; i++) {
+            const offsetProgress = progress(0, remaining, i);
+            offset.push(mix(min, 1, offsetProgress));
+        }
+    }
+    function defaultOffset$1(length) {
+        const offset = [0];
+        fillOffset(offset, length - 1);
+        return offset;
+    }
+
+    function interpolate(output, input = defaultOffset$1(output.length), easing = noopReturn) {
+        const length = output.length;
+        /**
+         * If the input length is lower than the output we
+         * fill the input to match. This currently assumes the input
+         * is an animation progress value so is a good candidate for
+         * moving outside the function.
+         */
+        const remainder = length - input.length;
+        remainder > 0 && fillOffset(input, remainder);
+        return (t) => {
+            let i = 0;
+            for (; i < length - 2; i++) {
+                if (t < input[i + 1])
+                    break;
+            }
+            let progressInRange = clamp(0, 1, progress(input[i], input[i + 1], t));
+            const segmentEasing = getEasingForSegment(easing, i);
+            progressInRange = segmentEasing(progressInRange);
+            return mix(output[i], output[i + 1], progressInRange);
+        };
+    }
+
+    const isFunction = (value) => typeof value === "function";
+
+    const isString = (value) => typeof value === "string";
+
+    /*
+      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;
+    }
+
+    function resolveElements(elements, selectorCache) {
+        var _a;
+        if (typeof elements === "string") {
+            if (selectorCache) {
+                (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = document.querySelectorAll(elements));
+                elements = selectorCache[elements];
+            }
+            else {
+                elements = document.querySelectorAll(elements);
+            }
+        }
+        else if (elements instanceof Element) {
+            elements = [elements];
+        }
+        /**
+         * Return an empty array
+         */
+        return Array.from(elements || []);
+    }
+
+    const thresholds = {
+        any: 0,
+        all: 1,
+    };
+    function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "any" } = {}) {
+        /**
+         * If this browser doesn't support IntersectionObserver, return a dummy stop function.
+         * Default triggering of onStart is tricky - it could be used for starting/stopping
+         * videos, lazy loading content etc. We could provide an option to enable a fallback, or
+         * provide a fallback callback option.
+         */
+        if (typeof IntersectionObserver === "undefined") {
+            return () => { };
+        }
+        const elements = resolveElements(elementOrSelector);
+        const activeIntersections = new WeakMap();
+        const onIntersectionChange = (entries) => {
+            entries.forEach((entry) => {
+                const onEnd = activeIntersections.get(entry.target);
+                /**
+                 * If there's no change to the intersection, we don't need to
+                 * do anything here.
+                 */
+                if (entry.isIntersecting === Boolean(onEnd))
+                    return;
+                if (entry.isIntersecting) {
+                    const newOnEnd = onStart(entry);
+                    if (isFunction(newOnEnd)) {
+                        activeIntersections.set(entry.target, newOnEnd);
+                    }
+                    else {
+                        observer.unobserve(entry.target);
+                    }
+                }
+                else if (onEnd) {
+                    onEnd(entry);
+                    activeIntersections.delete(entry.target);
+                }
+            });
+        };
+        const observer = new IntersectionObserver(onIntersectionChange, {
+            root,
+            rootMargin,
+            threshold: typeof amount === "number" ? amount : thresholds[amount],
+        });
+        elements.forEach((element) => observer.observe(element));
+        return () => observer.disconnect();
+    }
+
+    const resizeHandlers = new WeakMap();
+    let observer;
+    function getElementSize(target, borderBoxSize) {
+        if (borderBoxSize) {
+            const { inlineSize, blockSize } = borderBoxSize[0];
+            return { width: inlineSize, height: blockSize };
+        }
+        else if (target instanceof SVGElement && "getBBox" in target) {
+            return target.getBBox();
+        }
+        else {
+            return {
+                width: target.offsetWidth,
+                height: target.offsetHeight,
             };
-        }, []);
-        return values;
+        }
+    }
+    function notifyTarget({ target, contentRect, borderBoxSize, }) {
+        var _a;
+        (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
+            handler({
+                target,
+                contentSize: contentRect,
+                get size() {
+                    return getElementSize(target, borderBoxSize);
+                },
+            });
+        });
+    }
+    function notifyAll(entries) {
+        entries.forEach(notifyTarget);
+    }
+    function createResizeObserver() {
+        if (typeof ResizeObserver === "undefined")
+            return;
+        observer = new ResizeObserver(notifyAll);
+    }
+    function resizeElement(target, handler) {
+        if (!observer)
+            createResizeObserver();
+        const elements = resolveElements(target);
+        elements.forEach((element) => {
+            let elementHandlers = resizeHandlers.get(element);
+            if (!elementHandlers) {
+                elementHandlers = new Set();
+                resizeHandlers.set(element, elementHandlers);
+            }
+            elementHandlers.add(handler);
+            observer === null || observer === void 0 ? void 0 : observer.observe(element);
+        });
+        return () => {
+            elements.forEach((element) => {
+                const elementHandlers = resizeHandlers.get(element);
+                elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);
+                if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {
+                    observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
+                }
+            });
+        };
     }
 
-    var viewportScrollValues;
-    function getViewportScrollOffsets() {
-        return {
-            xOffset: window.pageXOffset,
-            yOffset: window.pageYOffset,
-            xMaxOffset: document.body.clientWidth - window.innerWidth,
-            yMaxOffset: document.body.clientHeight - window.innerHeight,
+    const windowCallbacks = new Set();
+    let windowResizeHandler;
+    function createWindowResizeHandler() {
+        windowResizeHandler = () => {
+            const size = {
+                width: window.innerWidth,
+                height: window.innerHeight,
+            };
+            const info = {
+                target: window,
+                size,
+                contentSize: size,
+            };
+            windowCallbacks.forEach((callback) => callback(info));
+        };
+        window.addEventListener("resize", windowResizeHandler);
+    }
+    function resizeWindow(callback) {
+        windowCallbacks.add(callback);
+        if (!windowResizeHandler)
+            createWindowResizeHandler();
+        return () => {
+            windowCallbacks.delete(callback);
+            if (!windowCallbacks.size && windowResizeHandler) {
+                windowResizeHandler = undefined;
+            }
         };
     }
-    var hasListeners = false;
-    function addEventListeners() {
-        hasListeners = true;
-        var updateScrollValues = createScrollUpdater(viewportScrollValues, getViewportScrollOffsets);
-        addDomEvent(window, "scroll", updateScrollValues);
-        addDomEvent(window, "resize", updateScrollValues);
+
+    function resize(a, b) {
+        return isFunction(a) ? resizeWindow(a) : resizeElement(a, b);
     }
+
     /**
-     * Returns MotionValues that update when the viewport scrolls:
-     *
-     * - `scrollX` — Horizontal scroll distance in pixels.
-     * - `scrollY` — Vertical scroll distance in pixels.
-     * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
-     * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
-     *
-     * **Warning:** Setting `body` or `html` to `height: 100%` or similar will break the `Progress`
-     * values as this breaks the browser's capability to accurately measure the page length.
-     *
-     * ```jsx
-     * export const MyComponent = () => {
-     *   const { scrollYProgress } = useViewportScroll()
-     *   return <motion.div style={{ scaleX: scrollYProgress }} />
-     * }
-     * ```
-     *
-     * @public
+     * A time in milliseconds, beyond which we consider the scroll velocity to be 0.
      */
-    function useViewportScroll() {
+    const maxElapsed = 50;
+    const createAxisInfo = () => ({
+        current: 0,
+        offset: [],
+        progress: 0,
+        scrollLength: 0,
+        targetOffset: 0,
+        targetLength: 0,
+        containerLength: 0,
+        velocity: 0,
+    });
+    const createScrollInfo = () => ({
+        time: 0,
+        x: createAxisInfo(),
+        y: createAxisInfo(),
+    });
+    const keys = {
+        x: {
+            length: "Width",
+            position: "Left",
+        },
+        y: {
+            length: "Height",
+            position: "Top",
+        },
+    };
+    function updateAxisInfo(element, axisName, info, time) {
+        const axis = info[axisName];
+        const { length, position } = keys[axisName];
+        const prev = axis.current;
+        const prevTime = info.time;
+        axis.current = element["scroll" + position];
+        axis.scrollLength = element["scroll" + length] - element["client" + length];
+        axis.offset.length = 0;
+        axis.offset[0] = 0;
+        axis.offset[1] = axis.scrollLength;
+        axis.progress = progress(0, axis.scrollLength, axis.current);
+        const elapsed = time - prevTime;
+        axis.velocity =
+            elapsed > maxElapsed ? 0 : velocityPerSecond(axis.current - prev, elapsed);
+    }
+    function updateScrollInfo(element, info, time) {
+        updateAxisInfo(element, "x", info, time);
+        updateAxisInfo(element, "y", info, time);
+        info.time = time;
+    }
+
+    function calcInset(element, container) {
+        let inset = { x: 0, y: 0 };
+        let current = element;
+        while (current && current !== container) {
+            if (current instanceof HTMLElement) {
+                inset.x += current.offsetLeft;
+                inset.y += current.offsetTop;
+                current = current.offsetParent;
+            }
+            else if (current instanceof SVGGraphicsElement && "getBBox" in current) {
+                const { top, left } = current.getBBox();
+                inset.x += left;
+                inset.y += top;
+                /**
+                 * Assign the next parent element as the <svg /> tag.
+                 */
+                while (current && current.tagName !== "svg") {
+                    current = current.parentNode;
+                }
+            }
+        }
+        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,
+        end: 1,
+    };
+    function resolveEdge(edge, length, inset = 0) {
+        let delta = 0;
+        /**
+         * If we have this edge defined as a preset, replace the definition
+         * with the numerical value.
+         */
+        if (namedEdges[edge] !== undefined) {
+            edge = namedEdges[edge];
+        }
+        /**
+         * Handle unit values
+         */
+        if (isString(edge)) {
+            const asNumber = parseFloat(edge);
+            if (edge.endsWith("px")) {
+                delta = asNumber;
+            }
+            else if (edge.endsWith("%")) {
+                edge = asNumber / 100;
+            }
+            else if (edge.endsWith("vw")) {
+                delta = (asNumber / 100) * document.documentElement.clientWidth;
+            }
+            else if (edge.endsWith("vh")) {
+                delta = (asNumber / 100) * document.documentElement.clientHeight;
+            }
+            else {
+                edge = asNumber;
+            }
+        }
+        /**
+         * If the edge is defined as a number, handle as a progress value.
+         */
+        if (isNumber(edge)) {
+            delta = length * edge;
+        }
+        return inset + delta;
+    }
+
+    const defaultOffset = [0, 0];
+    function resolveOffset(offset, containerLength, targetLength, targetInset) {
+        let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset;
+        let targetPoint = 0;
+        let containerPoint = 0;
+        if (isNumber(offset)) {
+            /**
+             * If we're provided offset: [0, 0.5, 1] then each number x should become
+             * [x, x], so we default to the behaviour of mapping 0 => 0 of both target
+             * and container etc.
+             */
+            offsetDefinition = [offset, offset];
+        }
+        else if (isString(offset)) {
+            offset = offset.trim();
+            if (offset.includes(" ")) {
+                offsetDefinition = offset.split(" ");
+            }
+            else {
+                /**
+                 * If we're provided a definition like "100px" then we want to apply
+                 * that only to the top of the target point, leaving the container at 0.
+                 * Whereas a named offset like "end" should be applied to both.
+                 */
+                offsetDefinition = [offset, namedEdges[offset] ? offset : `0`];
+            }
+        }
+        targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset);
+        containerPoint = resolveEdge(offsetDefinition[1], containerLength);
+        return targetPoint - containerPoint;
+    }
+
+    const point = { x: 0, y: 0 };
+    function resolveOffsets(container, info, options) {
+        let { offset: offsetDefinition = ScrollOffset.All } = options;
+        const { target = container, axis = "y" } = options;
+        const lengthLabel = axis === "y" ? "height" : "width";
+        const inset = target !== container ? calcInset(target, container) : point;
+        /**
+         * Measure the target and container. If they're the same thing then we
+         * use the container's scrollWidth/Height as the target, from there
+         * all other calculations can remain the same.
+         */
+        const targetSize = target === container
+            ? { width: container.scrollWidth, height: container.scrollHeight }
+            : { width: target.clientWidth, height: target.clientHeight };
+        const containerSize = {
+            width: container.clientWidth,
+            height: container.clientHeight,
+        };
+        /**
+         * Reset the length of the resolved offset array rather than creating a new one.
+         * TODO: More reusable data structures for targetSize/containerSize would also be good.
+         */
+        info[axis].offset.length = 0;
+        /**
+         * Populate the offset array by resolving the user's offset definition into
+         * a list of pixel scroll offets.
+         */
+        let hasChanged = !info[axis].interpolate;
+        const numOffsets = offsetDefinition.length;
+        for (let i = 0; i < numOffsets; i++) {
+            const offset = resolveOffset(offsetDefinition[i], containerSize[lengthLabel], targetSize[lengthLabel], inset[axis]);
+            if (!hasChanged && offset !== info[axis].interpolatorOffsets[i]) {
+                hasChanged = true;
+            }
+            info[axis].offset[i] = offset;
+        }
+        /**
+         * If the pixel scroll offsets have changed, create a new interpolator function
+         * to map scroll value into a progress.
+         */
+        if (hasChanged) {
+            info[axis].interpolate = interpolate(defaultOffset$1(numOffsets), info[axis].offset);
+            info[axis].interpolatorOffsets = [...info[axis].offset];
+        }
+        info[axis].progress = info[axis].interpolate(info[axis].current);
+    }
+
+    function measure(container, target = container, info) {
+        /**
+         * Find inset of target within scrollable container
+         */
+        info.x.targetOffset = 0;
+        info.y.targetOffset = 0;
+        if (target !== container) {
+            let node = target;
+            while (node && node != container) {
+                info.x.targetOffset += node.offsetLeft;
+                info.y.targetOffset += node.offsetTop;
+                node = node.offsetParent;
+            }
+        }
+        info.x.targetLength =
+            target === container ? target.scrollWidth : target.clientWidth;
+        info.y.targetLength =
+            target === container ? target.scrollHeight : target.clientHeight;
+        info.x.containerLength = container.clientWidth;
+        info.y.containerLength = container.clientHeight;
+    }
+    function createOnScrollHandler(element, onScroll, info, options = {}) {
+        const axis = options.axis || "y";
+        return {
+            measure: () => measure(element, options.target, info),
+            update: (time) => {
+                updateScrollInfo(element, info, time);
+                if (options.offset || options.target) {
+                    resolveOffsets(element, info, options);
+                }
+            },
+            notify: isFunction(onScroll)
+                ? () => onScroll(info)
+                : scrubAnimation(onScroll, info[axis]),
+        };
+    }
+    function scrubAnimation(controls, axisInfo) {
+        controls.pause();
+        controls.forEachNative((animation, { easing }) => {
+            var _a, _b;
+            if (animation.updateDuration) {
+                if (!easing)
+                    animation.easing = noopReturn;
+                animation.updateDuration(1);
+            }
+            else {
+                const timingOptions = { duration: 1000 };
+                if (!easing)
+                    timingOptions.easing = "linear";
+                (_b = (_a = animation.effect) === null || _a === void 0 ? void 0 : _a.updateTiming) === null || _b === void 0 ? void 0 : _b.call(_a, timingOptions);
+            }
+        });
+        return () => {
+            controls.currentTime = axisInfo.progress;
+        };
+    }
+
+    const scrollListeners = new WeakMap();
+    const resizeListeners = new WeakMap();
+    const onScrollHandlers = new WeakMap();
+    const getEventTarget = (element) => element === document.documentElement ? window : element;
+    function scroll(onScroll, _a = {}) {
+        var { container = document.documentElement } = _a, options = __rest(_a, ["container"]);
+        let containerHandlers = onScrollHandlers.get(container);
+        /**
+         * Get the onScroll handlers for this container.
+         * If one isn't found, create a new one.
+         */
+        if (!containerHandlers) {
+            containerHandlers = new Set();
+            onScrollHandlers.set(container, containerHandlers);
+        }
         /**
-         * Lazy-initialise the viewport scroll values
+         * Create a new onScroll handler for the provided callback.
          */
-        if (!viewportScrollValues) {
-            viewportScrollValues = createScrollMotionValues();
+        const info = createScrollInfo();
+        const containerHandler = createOnScrollHandler(container, onScroll, info, options);
+        containerHandlers.add(containerHandler);
+        /**
+         * Check if there's a scroll event listener for this container.
+         * If not, create one.
+         */
+        if (!scrollListeners.has(container)) {
+            const listener = () => {
+                const time = performance.now();
+                for (const handler of containerHandlers)
+                    handler.measure();
+                for (const handler of containerHandlers)
+                    handler.update(time);
+                for (const handler of containerHandlers)
+                    handler.notify();
+            };
+            scrollListeners.set(container, listener);
+            const target = getEventTarget(container);
+            window.addEventListener("resize", listener, { passive: true });
+            if (container !== document.documentElement) {
+                resizeListeners.set(container, resize(container, listener));
+            }
+            target.addEventListener("scroll", listener, { passive: true });
         }
+        const listener = scrollListeners.get(container);
+        const onLoadProcesss = requestAnimationFrame(listener);
+        return () => {
+            var _a;
+            if (typeof onScroll !== "function")
+                onScroll.stop();
+            cancelAnimationFrame(onLoadProcesss);
+            /**
+             * Check if we even have any handlers for this container.
+             */
+            const containerHandlers = onScrollHandlers.get(container);
+            if (!containerHandlers)
+                return;
+            containerHandlers.delete(containerHandler);
+            if (containerHandlers.size)
+                return;
+            /**
+             * If no more handlers, remove the scroll listener too.
+             */
+            const listener = scrollListeners.get(container);
+            scrollListeners.delete(container);
+            if (listener) {
+                getEventTarget(container).removeEventListener("scroll", listener);
+                (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
+                window.removeEventListener("resize", listener);
+            }
+        };
+    }
+
+    var createScrollMotionValues = function () { return ({
+        scrollX: motionValue(0),
+        scrollY: motionValue(0),
+        scrollXProgress: motionValue(0),
+        scrollYProgress: motionValue(0),
+    }); };
+    function useScroll(_a) {
+        if (_a === void 0) { _a = {}; }
+        var container = _a.container, target = _a.target, options = __rest(_a, ["container", "target"]);
+        var values = useConstant(createScrollMotionValues);
         useIsomorphicLayoutEffect(function () {
-            !hasListeners && addEventListeners();
+            return scroll(function (_a) {
+                var x = _a.x, y = _a.y;
+                values.scrollX.set(x.current);
+                values.scrollXProgress.set(x.progress);
+                values.scrollY.set(y.current);
+                values.scrollYProgress.set(y.progress);
+            }, __assign(__assign({}, options), { container: (container === null || container === void 0 ? void 0 : container.current) || undefined, target: (target === null || target === void 0 ? void 0 : target.current) || undefined }));
         }, []);
-        return viewportScrollValues;
+        return values;
+    }
+
+    /**
+     * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
+     */
+    function useElementScroll(ref) {
+        warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
+        return useScroll({ container: ref });
+    }
+
+    /**
+     * @deprecated useViewportScroll is deprecated. Convert to useScroll()
+     */
+    function useViewportScroll() {
+        warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
+        return useScroll();
     }
 
-    var getCurrentTime = typeof performance !== "undefined"
-        ? function () { return performance.now(); }
-        : function () { return Date.now(); };
     function useAnimationFrame(callback) {
-        var initialTimestamp = useConstant(getCurrentTime);
+        var initialTimestamp = React.useRef(0);
         var isStatic = React.useContext(MotionConfigContext).isStatic;
         React.useEffect(function () {
             if (isStatic)
                 return;
             var provideTimeSinceStart = function (_a) {
                 var timestamp = _a.timestamp;
-                callback(timestamp - initialTimestamp);
+                if (!initialTimestamp.current)
+                    initialTimestamp.current = timestamp;
+                callback(timestamp - initialTimestamp.current);
             };
             sync.update(provideTimeSinceStart, true);
             return function () { return cancelSync.update(provideTimeSinceStart); };
@@ -9414,97 +10085,13 @@
         var runCycle = React.useCallback(function (next) {
             index.current =
                 typeof next !== "number"
-                    ? wrap(0, items.length, index.current + 1)
+                    ? wrap$1(0, items.length, index.current + 1)
                     : next;
             setItem(items[index.current]);
         }, __spreadArray([items.length], __read(items), false));
         return [item, runCycle];
     }
 
-    const noop = () => { };
-
-    function resolveElements(elements, selectorCache) {
-        var _a;
-        if (typeof elements === "string") {
-            if (selectorCache) {
-                (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = document.querySelectorAll(elements));
-                elements = selectorCache[elements];
-            }
-            else {
-                elements = document.querySelectorAll(elements);
-            }
-        }
-        else if (elements instanceof Element) {
-            elements = [elements];
-        }
-        /**
-         * Return an empty array
-         */
-        return Array.from(elements || []);
-    }
-
-    let supportsDocumentRoot;
-    function getDefaultRoot() {
-        if (supportsDocumentRoot === undefined) {
-            try {
-                new IntersectionObserver(noop, { root: document });
-                supportsDocumentRoot = true;
-            }
-            catch (e) {
-                supportsDocumentRoot = false;
-            }
-        }
-        return supportsDocumentRoot ? document : undefined;
-    }
-    const thresholds = {
-        any: 0,
-        all: 1,
-    };
-    function inView(elements, onStart, { root, margin: rootMargin, amount = "any" } = {}) {
-        /**
-         * If this browser doesn't support IntersectionObserver, return a dummy stop function.
-         * Default triggering of onStart is tricky - it could be used for starting/stopping
-         * videos, lazy loading content etc. We could provide an option to enable a fallback, or
-         * provide a fallback callback option.
-         */
-        if (typeof IntersectionObserver === "undefined") {
-            return () => { };
-        }
-        const resolvedElements = resolveElements(elements);
-        const activeIntersections = new WeakMap();
-        const onIntersectionChange = (entries) => {
-            entries.forEach((entry) => {
-                const onEnd = activeIntersections.get(entry.target);
-                /**
-                 * If there's no change to the intersection, we don't need to
-                 * do anything here.
-                 */
-                if (entry.isIntersecting === Boolean(onEnd))
-                    return;
-                if (entry.isIntersecting) {
-                    const newOnEnd = onStart(entry);
-                    if (typeof newOnEnd === "function") {
-                        activeIntersections.set(entry.target, newOnEnd);
-                    }
-                    else {
-                        observer.unobserve(entry.target);
-                    }
-                }
-                else if (onEnd) {
-                    onEnd(entry);
-                    activeIntersections.delete(entry.target);
-                }
-            });
-        };
-        const observer = new IntersectionObserver(onIntersectionChange, {
-            root: root || getDefaultRoot(),
-            rootMargin,
-            threshold: typeof amount === "number" ? amount : thresholds[amount],
-        });
-        resolvedElements.forEach((element) => observer.observe(element));
-        return () => observer.disconnect();
-    }
-
     function useInView(ref, _a) {
         var _b = _a === void 0 ? {} : _a, root = _b.root, margin = _b.margin, amount = _b.amount, _c = _b.once, once = _c === void 0 ? false : _c;
         var _d = __read(React.useState(false), 2), isInView = _d[0], setInView = _d[1];
@@ -9811,6 +10398,7 @@
     exports.useReducedMotion = useReducedMotion;
     exports.useReducedMotionConfig = useReducedMotionConfig;
     exports.useResetProjection = useResetProjection;
+    exports.useScroll = useScroll;
     exports.useSpring = useSpring;
     exports.useTime = useTime;
     exports.useTransform = useTransform;