framer-motion 9.1.0 → 9.1.2

package/dist/framer-motion.dev.js

@@ -150,19 +150,20 @@
         return typeof v === "object" && typeof v.start === "function";
     }
 
-    const variantProps$1 = [
-        "initial",
-        "animate",
-        "exit",
-        "whileHover",
-        "whileDrag",
-        "whileTap",
-        "whileFocus",
-        "whileInView",
+    const variantPriorityOrder$1 = [
+        "animate" /* AnimationType.Animate */,
+        "whileInView" /* AnimationType.InView */,
+        "whileFocus" /* AnimationType.Focus */,
+        "whileHover" /* AnimationType.Hover */,
+        "whileTap" /* AnimationType.Tap */,
+        "whileDrag" /* AnimationType.Drag */,
+        "exit" /* AnimationType.Exit */,
     ];
+    const variantProps = ["initial", ...variantPriorityOrder$1];
+
     function isControllingVariants(props) {
         return (isAnimationControls(props.animate) ||
-            variantProps$1.some((name) => isVariantLabel(props[name])));
+            variantProps.some((name) => isVariantLabel(props[name])));
     }
     function isVariantNode(props) {
         return Boolean(isControllingVariants(props) || props.variants);
@@ -538,12 +539,9 @@
         return transformString;
     }
 
-    /**
-     * Returns true if the provided key is a CSS variable
-     */
-    function isCSSVariable$1(key) {
-        return key.startsWith("--");
-    }
+    const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
+    const isCSSVariableName = checkStringStartsWith("--");
+    const isCSSVariableToken = checkStringStartsWith("var(--");
 
     /**
      * Provided a value and a ValueType, returns the value as that value type.
@@ -554,7 +552,7 @@
             : value;
     };
 
-    const clamp$1 = (min, max, v) => Math.min(Math.max(v, min), max);
+    const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
 
     const number = {
         test: (v) => typeof v === "number",
@@ -563,7 +561,7 @@
     };
     const alpha = {
         ...number,
-        transform: (v) => clamp$1(0, 1, v),
+        transform: (v) => clamp(0, 1, v),
     };
     const scale = {
         ...number,
@@ -580,12 +578,12 @@
     const floatRegex = /(-)?([\d]*\.?[\d])+/g;
     const colorRegex = /(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;
     const singleColorRegex = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i;
-    function isString$1(v) {
+    function isString(v) {
         return typeof v === "string";
     }
 
     const createUnitType = (unit) => ({
-        test: (v) => isString$1(v) && v.endsWith(unit) && v.split(" ").length === 1,
+        test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
         parse: parseFloat,
         transform: (v) => `${v}${unit}`,
     });
@@ -690,7 +688,7 @@
             /**
              * If this is a CSS variable we don't do any further processing.
              */
-            if (isCSSVariable$1(key)) {
+            if (isCSSVariableName(key)) {
                 vars[key] = value;
                 continue;
             }
@@ -1329,17 +1327,6 @@
         return addDomEvent(target, eventName, addPointerInfo(handler), options);
     }
 
-    exports.AnimationType = void 0;
-    (function (AnimationType) {
-        AnimationType["Animate"] = "animate";
-        AnimationType["Hover"] = "whileHover";
-        AnimationType["Tap"] = "whileTap";
-        AnimationType["Drag"] = "whileDrag";
-        AnimationType["Focus"] = "whileFocus";
-        AnimationType["InView"] = "whileInView";
-        AnimationType["Exit"] = "exit";
-    })(exports.AnimationType || (exports.AnimationType = {}));
-
     /**
      * Pipe
      * Compose other transformers to run linearily
@@ -1418,7 +1405,7 @@
                 return;
             const props = node.getProps();
             if (node.animationState && props.whileHover) {
-                node.animationState.setActive(exports.AnimationType.Hover, isActive);
+                node.animationState.setActive("whileHover" /* AnimationType.Hover */, isActive);
             }
             if (props[callbackName]) {
                 props[callbackName](event, info);
@@ -1456,13 +1443,13 @@
             }
             if (!isFocusVisible || !this.node.animationState)
                 return;
-            this.node.animationState.setActive(exports.AnimationType.Focus, true);
+            this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, true);
             this.isActive = true;
         }
         onBlur() {
             if (!this.isActive || !this.node.animationState)
                 return;
-            this.node.animationState.setActive(exports.AnimationType.Focus, false);
+            this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, false);
             this.isActive = false;
         }
         mount() {
@@ -1558,7 +1545,7 @@
              * Ensure we trigger animations before firing event callback
              */
             if (whileTap && this.node.animationState) {
-                this.node.animationState.setActive(exports.AnimationType.Tap, true);
+                this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, true);
             }
             onTapStart && onTapStart(event, info);
         }
@@ -1567,7 +1554,7 @@
             this.isPressing = false;
             const props = this.node.getProps();
             if (props.whileTap && this.node.animationState) {
-                this.node.animationState.setActive(exports.AnimationType.Tap, false);
+                this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, false);
             }
             return !isDragActive();
         }
@@ -1662,7 +1649,7 @@
                 const { onViewportEnter } = this.node.getProps();
                 onViewportEnter && onViewportEnter(null);
                 if (this.node.animationState) {
-                    this.node.animationState.setActive(exports.AnimationType.InView, true);
+                    this.node.animationState.setActive("whileInView" /* AnimationType.InView */, true);
                 }
             });
         }
@@ -1699,7 +1686,7 @@
                     this.hasEnteredView = true;
                 }
                 if (this.node.animationState) {
-                    this.node.animationState.setActive(exports.AnimationType.InView, isIntersecting);
+                    this.node.animationState.setActive("whileInView" /* AnimationType.InView */, isIntersecting);
                 }
                 /**
                  * Use the latest committed props rather than the ones in scope
@@ -1987,7 +1974,7 @@
       @param [number]: Unit per frame
       @param [number]: Frame duration in ms
     */
-    function velocityPerSecond$1(velocity, frameDuration) {
+    function velocityPerSecond(velocity, frameDuration) {
         return frameDuration ? velocity * (1000 / frameDuration) : 0;
     }
 
@@ -2013,7 +2000,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 = "9.1.0";
+            this.version = "9.1.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -2236,7 +2223,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$1(parseFloat(this.current) -
+                    velocityPerSecond(parseFloat(this.current) -
                         parseFloat(this.prev), this.timeDelta)
                 : 0;
         }
@@ -2318,11 +2305,11 @@
      * but false if a number or multiple colors
      */
     const isColorString = (type, testProp) => (v) => {
-        return Boolean((isString$1(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
+        return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
             (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
     };
     const splitColor = (aName, bName, cName) => (v) => {
-        if (!isString$1(v))
+        if (!isString(v))
             return v;
         const [a, b, c, alpha] = v.match(floatRegex);
         return {
@@ -2333,7 +2320,7 @@
         };
     };
 
-    const clampRgbUnit = (v) => clamp$1(0, 255, v);
+    const clampRgbUnit = (v) => clamp(0, 255, v);
     const rgbUnit = {
         ...number,
         transform: (v) => Math.round(clampRgbUnit(v)),
@@ -2418,7 +2405,7 @@
             }
         },
         transform: (v) => {
-            return isString$1(v)
+            return isString(v)
                 ? v
                 : v.hasOwnProperty("red")
                     ? rgba.transform(v)
@@ -2431,7 +2418,7 @@
     function test(v) {
         var _a, _b;
         return (isNaN(v) &&
-            isString$1(v) &&
+            isString(v) &&
             (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
                 (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
                 0);
@@ -2716,19 +2703,19 @@
     const optimizedAppearDataId = "framerAppearId";
     const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
 
-    var warning = function () { };
-    var invariant = function () { };
-    {
-        warning = function (check, message) {
-            if (!check && typeof console !== 'undefined') {
-                console.warn(message);
-            }
-        };
-        invariant = function (check, message) {
-            if (!check) {
-                throw new Error(message);
-            }
-        };
+    exports.warning = noop;
+    exports.invariant = noop;
+    {
+        exports.warning = (check, message) => {
+            if (!check && typeof console !== "undefined") {
+                console.warn(message);
+            }
+        };
+        exports.invariant = (check, message) => {
+            if (!check) {
+                throw new Error(message);
+            }
+        };
     }
 
     /**
@@ -2776,7 +2763,7 @@
       @param [number]: The progress between lower and upper limits expressed 0-1
       @return [number]: Value as calculated from progress within range (not limited within range)
     */
-    const mix$1 = (from, to, progress) => -progress * from + progress * to + from;
+    const mix = (from, to, progress) => -progress * from + progress * to + from;
 
     // Adapted from https://gist.github.com/mjackson/5311256
     function hueToRgb(p, q, t) {
@@ -2830,7 +2817,7 @@
     const getColorType = (v) => colorTypes.find((type) => type.test(v));
     function asRGBA(color) {
         const type = getColorType(color);
-        invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
+        exports.invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
         let model = type.parse(color);
         if (type === hsla) {
             // TODO Remove this cast - needed since Framer Motion's stricter typing
@@ -2846,14 +2833,14 @@
             blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
             blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
             blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
-            blended.alpha = mix$1(fromRGBA.alpha, toRGBA.alpha, v);
+            blended.alpha = mix(fromRGBA.alpha, toRGBA.alpha, v);
             return rgba.transform(blended);
         };
     };
 
     function getMixer$1(origin, target) {
         if (typeof origin === "number") {
-            return (v) => mix$1(origin, target, v);
+            return (v) => mix(origin, target, v);
         }
         else if (color.test(origin)) {
             return mixColor(origin, target);
@@ -2898,7 +2885,7 @@
             return pipe(mixArray(originStats.values, targetStats.values), template);
         }
         else {
-            warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
+            exports.warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
             return (p) => `${p > 0 ? target : origin}`;
         }
     };
@@ -2915,12 +2902,12 @@
       @param [number]: Value to find progress within given range
       @return [number]: Progress of value within range as expressed 0-1
     */
-    const progress$1 = (from, to, value) => {
+    const progress = (from, to, value) => {
         const toFromDifference = to - from;
         return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
     };
 
-    const mixNumber = (from, to) => (p) => mix$1(from, to, p);
+    const mixNumber = (from, to) => (p) => mix(from, to, p);
     function detectMixerFactory(v) {
         if (typeof v === "number") {
             return mixNumber;
@@ -2974,10 +2961,10 @@
      *
      * @public
      */
-    function interpolate$1(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
+    function interpolate(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.");
+        exports.invariant(inputLength === output.length, "Both input and output ranges must be the same length");
+        exports.invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, "Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.");
         // If input runs highest -> lowest, reverse both arrays
         if (input[0] > input[inputLength - 1]) {
             input = [...input].reverse();
@@ -2993,14 +2980,32 @@
                         break;
                 }
             }
-            const progressInRange = progress$1(input[i], input[i + 1], v);
+            const progressInRange = progress(input[i], input[i + 1], v);
             return mixers[i](progressInRange);
         };
         return isClamp
-            ? (v) => interpolator(clamp$1(input[0], input[inputLength - 1], v))
+            ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v))
             : interpolator;
     }
 
+    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(arr) {
+        const offset = [0];
+        fillOffset(offset, arr.length - 1);
+        return offset;
+    }
+
+    function convertOffsetToTimes(offset, duration) {
+        return offset.map((o) => o * duration);
+    }
+
     /*
       Bezier function generator
       This has been modified from Gaëtan Renaudeau's BezierEasing
@@ -3075,13 +3080,13 @@
     const easingDefinitionToFunction = (definition) => {
         if (Array.isArray(definition)) {
             // If cubic bezier definition, create bezier curve
-            invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
+            exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
             const [x1, y1, x2, y2] = definition;
             return cubicBezier(x1, y1, x2, y2);
         }
         else if (typeof definition === "string") {
             // Else lookup from table
-            invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
+            exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
             return easingLookup[definition];
         }
         return definition;
@@ -3093,13 +3098,6 @@
     function defaultEasing(values, easing) {
         return values.map(() => easing || easeInOut).splice(0, values.length - 1);
     }
-    function defaultOffset$2(values) {
-        const numValues = values.length;
-        return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0);
-    }
-    function convertOffsetToTimes(offset, duration) {
-        return offset.map((o) => o * duration);
-    }
     function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duration = 300, }) {
         keyframeValues = [...keyframeValues];
         /**
@@ -3125,9 +3123,9 @@
         // TODO Maybe we should warn here if there's a length mismatch
         times && times.length === keyframeValues.length
             ? times
-            : defaultOffset$2(keyframeValues), duration);
+            : defaultOffset$1(keyframeValues), duration);
         function createInterpolator() {
-            return interpolate$1(absoluteTimes, keyframeValues, {
+            return interpolate(absoluteTimes, keyframeValues, {
                 ease: Array.isArray(easingFunctions)
                     ? easingFunctions
                     : defaultEasing(keyframeValues, easingFunctions),
@@ -3155,13 +3153,13 @@
     function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
         let envelope;
         let derivative;
-        warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
+        exports.warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
         let dampingRatio = 1 - bounce;
         /**
          * Restrict dampingRatio and duration to within acceptable ranges.
          */
-        dampingRatio = clamp$1(minDamping, maxDamping, dampingRatio);
-        duration = clamp$1(minDuration, maxDuration, duration / 1000);
+        dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
+        duration = clamp(minDuration, maxDuration, duration / 1000);
         if (dampingRatio < 1) {
             /**
              * Underdamped spring
@@ -3343,7 +3341,7 @@
                          */
                         if (dampingRatio < 1) {
                             const prevT = Math.max(0, t - velocitySampleDuration);
-                            currentVelocity = velocityPerSecond$1(current - resolveSpring(prevT), t - prevT);
+                            currentVelocity = velocityPerSecond(current - resolveSpring(prevT), t - prevT);
                         }
                         else {
                             currentVelocity = 0;
@@ -3445,7 +3443,7 @@
          */
         const { needsInterpolation } = animator;
         if (needsInterpolation && needsInterpolation(origin, target)) {
-            interpolateFromNumber = interpolate$1([0, 100], [origin, target], {
+            interpolateFromNumber = interpolate([0, 100], [origin, target], {
                 clamp: false,
             });
             keyframes$1 = [0, 100];
@@ -3805,7 +3803,7 @@
             const checkBoundary = (v) => {
                 prev = current;
                 current = v;
-                velocity = velocityPerSecond$1(v - prev, frameData.delta);
+                velocity = velocityPerSecond(v - prev, frameData.delta);
                 if ((heading === 1 && v > boundary) ||
                     (heading === -1 && v < boundary)) {
                     startSpring({ keyframes: [v, boundary], velocity });
@@ -3975,7 +3973,7 @@
             const targetKeyframe = keyframes[keyframes.length - 1];
             const isOriginAnimatable = isAnimatable(valueName, originKeyframe);
             const isTargetAnimatable = isAnimatable(valueName, targetKeyframe);
-            warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${valueName} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+            exports.warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${valueName} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
             let options = {
                 keyframes,
                 velocity: value.getVelocity(),
@@ -4182,13 +4180,13 @@
     }
 
     const variantPriorityOrder = [
-        exports.AnimationType.Animate,
-        exports.AnimationType.InView,
-        exports.AnimationType.Focus,
-        exports.AnimationType.Hover,
-        exports.AnimationType.Tap,
-        exports.AnimationType.Drag,
-        exports.AnimationType.Exit,
+        "animate" /* AnimationType.Animate */,
+        "whileInView" /* AnimationType.InView */,
+        "whileFocus" /* AnimationType.Focus */,
+        "whileHover" /* AnimationType.Hover */,
+        "whileTap" /* AnimationType.Tap */,
+        "whileDrag" /* AnimationType.Drag */,
+        "exit" /* AnimationType.Exit */,
     ];
     const reversePriorityOrder = [...variantPriorityOrder].reverse();
     const numAnimationTypes = variantPriorityOrder.length;
@@ -4451,16 +4449,12 @@
          * Change whether a certain animation type is active.
          */
         function setActive(type, isActive, options) {
+            var _a;
             // If the active state hasn't changed, we can safely do nothing here
             if (state[type].isActive === isActive)
                 return Promise.resolve();
             // Propagate active change to children
-            if (visualElement.variantChildren) {
-                visualElement.variantChildren.forEach((child) => {
-                    child.animationState &&
-                        child.animationState.setActive(type, isActive);
-                });
-            }
+            (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });
             state[type].isActive = isActive;
             const animations = animateChanges(options, type);
             for (const key in state) {
@@ -4494,13 +4488,13 @@
     }
     function createState() {
         return {
-            [exports.AnimationType.Animate]: createTypeState(true),
-            [exports.AnimationType.InView]: createTypeState(),
-            [exports.AnimationType.Hover]: createTypeState(),
-            [exports.AnimationType.Tap]: createTypeState(),
-            [exports.AnimationType.Drag]: createTypeState(),
-            [exports.AnimationType.Focus]: createTypeState(),
-            [exports.AnimationType.Exit]: createTypeState(),
+            ["animate" /* AnimationType.Animate */]: createTypeState(true),
+            ["whileInView" /* AnimationType.InView */]: createTypeState(),
+            ["whileHover" /* AnimationType.Hover */]: createTypeState(),
+            ["whileTap" /* AnimationType.Tap */]: createTypeState(),
+            ["whileDrag" /* AnimationType.Drag */]: createTypeState(),
+            ["whileFocus" /* AnimationType.Focus */]: createTypeState(),
+            ["exit" /* AnimationType.Exit */]: createTypeState(),
         };
     }
 
@@ -4551,7 +4545,7 @@
             if (!this.node.animationState || isPresent === prevIsPresent) {
                 return;
             }
-            const exitAnimation = this.node.animationState.setActive(exports.AnimationType.Exit, !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
+            const exitAnimation = this.node.animationState.setActive("exit" /* AnimationType.Exit */, !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
             if (onExitComplete && !isPresent) {
                 exitAnimation.then(() => onExitComplete(this.id));
             }
@@ -4729,12 +4723,12 @@
     }
     function calcAxisDelta(delta, source, target, origin = 0.5) {
         delta.origin = origin;
-        delta.originPoint = mix$1(source.min, source.max, delta.origin);
+        delta.originPoint = mix(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$1(target.min, target.max, delta.origin) - delta.originPoint;
+            mix(target.min, target.max, delta.origin) - delta.originPoint;
         if (isNear(delta.translate) || isNaN(delta.translate))
             delta.translate = 0;
     }
@@ -4767,11 +4761,11 @@
     function applyConstraints(point, { min, max }, elastic) {
         if (min !== undefined && point < min) {
             // If we have a min point defined, and this is outside of that, constrain
-            point = elastic ? mix$1(min, point, elastic.min) : Math.max(point, min);
+            point = elastic ? mix(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$1(max, point, elastic.max) : Math.min(point, max);
+            point = elastic ? mix(max, point, elastic.max) : Math.min(point, max);
         }
         return point;
     }
@@ -4830,12 +4824,12 @@
         const sourceLength = calcLength(source);
         const targetLength = calcLength(target);
         if (targetLength > sourceLength) {
-            origin = progress$1(target.min, target.max - sourceLength, source.min);
+            origin = progress(target.min, target.max - sourceLength, source.min);
         }
         else if (sourceLength > targetLength) {
-            origin = progress$1(source.min, source.max - targetLength, target.min);
+            origin = progress(source.min, source.max - targetLength, target.min);
         }
-        return clamp$1(0, 1, origin);
+        return clamp(0, 1, origin);
     }
     /**
      * Rebase the calculated viewport constraints relative to the layout.min point.
@@ -5054,7 +5048,7 @@
      */
     function transformAxis(axis, transforms, [key, scaleKey, originKey]) {
         const axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5;
-        const originPoint = mix$1(axis.min, axis.max, axisOrigin);
+        const originPoint = mix(axis.min, axis.max, axisOrigin);
         // Apply the axis delta to the final axis
         applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale);
     }
@@ -5165,7 +5159,7 @@
                 // Fire onDragStart event
                 onDragStart && onDragStart(event, info);
                 const { animationState } = this.visualElement;
-                animationState && animationState.setActive(exports.AnimationType.Drag, true);
+                animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, true);
             };
             const onMove = (event, info) => {
                 // latestPointerEvent = event
@@ -5230,7 +5224,7 @@
                 this.openGlobalLock();
                 this.openGlobalLock = null;
             }
-            animationState && animationState.setActive(exports.AnimationType.Drag, false);
+            animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, false);
         }
         updateAxis(axis, _point, offset) {
             const { drag } = this.getProps();
@@ -5283,7 +5277,7 @@
             if (!constraints || !isRefObject(constraints))
                 return false;
             const constraintsElement = constraints.current;
-            invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
+            exports.invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
             const { projection } = this.visualElement;
             // TODO
             if (!projection || !projection.layout)
@@ -5371,7 +5365,7 @@
                 const axisValue = this.getAxisMotionValue(axis);
                 if (projection && projection.layout) {
                     const { min, max } = projection.layout.layoutBox[axis];
-                    axisValue.set(point[axis] - mix$1(min, max, 0.5));
+                    axisValue.set(point[axis] - mix(min, max, 0.5));
                 }
             });
         }
@@ -5426,7 +5420,7 @@
                  */
                 const axisValue = this.getAxisMotionValue(axis);
                 const { min, max } = this.constraints[axis];
-                axisValue.set(mix$1(min, max, boxProgress[axis]));
+                axisValue.set(mix(min, max, boxProgress[axis]));
             });
         }
         addListeners() {
@@ -5614,13 +5608,13 @@
     const isPx = (value) => typeof value === "number" || px.test(value);
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
         if (shouldCrossfadeOpacity) {
-            target.opacity = mix$1(0, 
+            target.opacity = mix(0, 
             // TODO Reinstate this if only child
             lead.opacity !== undefined ? lead.opacity : 1, easeCrossfadeIn(progress));
-            target.opacityExit = mix$1(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress));
+            target.opacityExit = mix(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress));
         }
         else if (isOnlyMember) {
-            target.opacity = mix$1(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress);
+            target.opacity = mix(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress);
         }
         /**
          * Mix border radius
@@ -5637,7 +5631,7 @@
                 leadRadius === 0 ||
                 isPx(followRadius) === isPx(leadRadius);
             if (canMix) {
-                target[borderLabel] = Math.max(mix$1(asNumber(followRadius), asNumber(leadRadius), progress), 0);
+                target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
                 if (percent.test(leadRadius) || percent.test(followRadius)) {
                     target[borderLabel] += "%";
                 }
@@ -5650,7 +5644,7 @@
          * Mix rotation
          */
         if (follow.rotate || lead.rotate) {
-            target.rotate = mix$1(follow.rotate || 0, lead.rotate || 0, progress);
+            target.rotate = mix(follow.rotate || 0, lead.rotate || 0, progress);
         }
     }
     function getRadius(values, radiusName) {
@@ -5690,7 +5684,7 @@
                 return 0;
             if (p > max)
                 return 1;
-            return easing(progress$1(min, max, p));
+            return easing(progress(min, max, p));
         };
     }
 
@@ -5730,12 +5724,12 @@
     function removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {
         if (percent.test(translate)) {
             translate = parseFloat(translate);
-            const relativeProgress = mix$1(sourceAxis.min, sourceAxis.max, translate / 100);
+            const relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100);
             translate = relativeProgress - sourceAxis.min;
         }
         if (typeof translate !== "number")
             return;
-        let originPoint = mix$1(originAxis.min, originAxis.max, origin);
+        let originPoint = mix(originAxis.min, originAxis.max, origin);
         if (axis === originAxis)
             originPoint -= translate;
         axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale);
@@ -7224,14 +7218,14 @@
         stack.removeLeadSnapshot();
     }
     function mixAxisDelta(output, delta, p) {
-        output.translate = mix$1(delta.translate, 0, p);
-        output.scale = mix$1(delta.scale, 1, p);
+        output.translate = mix(delta.translate, 0, p);
+        output.scale = mix(delta.scale, 1, p);
         output.origin = delta.origin;
         output.originPoint = delta.originPoint;
     }
     function mixAxis(output, from, to, p) {
-        output.min = mix$1(from.min, to.min, p);
-        output.max = mix$1(from.max, to.max, p);
+        output.min = mix(from.min, to.min, p);
+        output.max = mix(from.max, to.max, p);
     }
     function mixBox(output, from, to, p) {
         mixAxis(output.x, from.x, to.x, p);
@@ -7368,9 +7362,6 @@
         },
     };
 
-    function isCSSVariable(value) {
-        return typeof value === "string" && value.startsWith("var(--");
-    }
     /**
      * Parse Framer's special CSS variable format into a CSS token and a fallback.
      *
@@ -7390,7 +7381,7 @@
     }
     const maxDepth = 4;
     function getVariableValue(current, element, depth = 1) {
-        invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
+        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)
@@ -7400,7 +7391,7 @@
         if (resolved) {
             return resolved.trim();
         }
-        else if (isCSSVariable(fallback)) {
+        else if (isCSSVariableToken(fallback)) {
             // The fallback might itself be a CSS variable, in which case we attempt to resolve it too.
             return getVariableValue(fallback, element, depth + 1);
         }
@@ -7425,7 +7416,7 @@
         // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
         visualElement.values.forEach((value) => {
             const current = value.get();
-            if (!isCSSVariable(current))
+            if (!isCSSVariableToken(current))
                 return;
             const resolved = getVariableValue(current, element);
             if (resolved)
@@ -7435,7 +7426,7 @@
         // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`
         for (const key in target) {
             const current = target[key];
-            if (!isCSSVariable(current))
+            if (!isCSSVariableToken(current))
                 continue;
             const resolved = getVariableValue(current, element);
             if (!resolved)
@@ -7484,7 +7475,7 @@
              * We could potentially improve the outcome of this by incorporating the ratio between
              * the two scales.
              */
-            const averageScale = mix$1(xScale, yScale, 0.5);
+            const averageScale = mix(xScale, yScale, 0.5);
             // Blur
             if (typeof shadow[2 + offset] === "number")
                 shadow[2 + offset] /= averageScale;
@@ -7519,15 +7510,6 @@
         return Object.keys(target).some(isPositionalKey);
     };
     const isNumOrPxType = (v) => v === number || v === px;
-    var BoundingBoxDimension;
-    (function (BoundingBoxDimension) {
-        BoundingBoxDimension["width"] = "width";
-        BoundingBoxDimension["height"] = "height";
-        BoundingBoxDimension["left"] = "left";
-        BoundingBoxDimension["right"] = "right";
-        BoundingBoxDimension["top"] = "top";
-        BoundingBoxDimension["bottom"] = "bottom";
-    })(BoundingBoxDimension || (BoundingBoxDimension = {}));
     const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
     const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
         if (transform === "none" || !transform)
@@ -7632,11 +7614,11 @@
                 for (let i = fromIndex; i < numKeyframes; i++) {
                     if (!toType) {
                         toType = findDimensionValueType(to[i]);
-                        invariant(toType === fromType ||
+                        exports.invariant(toType === fromType ||
                             (isNumOrPxType(fromType) && isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value");
                     }
                     else {
-                        invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
+                        exports.invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
                     }
                 }
             }
@@ -7782,7 +7764,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "9.1.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "9.1.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.2 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -7831,6 +7813,7 @@
         "LayoutAnimationStart",
         "LayoutAnimationComplete",
     ];
+    const numVariantProps = variantProps.length;
     /**
      * A VisualElement is an imperative abstraction around UI elements such as
      * HTMLElement, SVGElement, Three.Object3D etc.
@@ -8024,8 +8007,8 @@
                 isStrict) {
                 const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
                 renderedProps.ignoreStrict
-                    ? warning(false, strictMessage)
-                    : invariant(false, strictMessage);
+                    ? exports.warning(false, strictMessage)
+                    : exports.invariant(false, strictMessage);
             }
             for (let i = 0; i < numFeatures; i++) {
                 const name = featureNames[i];
@@ -8300,8 +8283,6 @@
             }
         }
     }
-    const variantProps = ["initial", ...variantPriorityOrder];
-    const numVariantProps = variantProps.length;
 
     class DOMVisualElement extends VisualElement {
         sortInstanceNodePosition(a, b) {
@@ -8357,7 +8338,7 @@
             }
             else {
                 const computedStyle = getComputedStyle$1(instance);
-                const value = (isCSSVariable$1(key)
+                const value = (isCSSVariableName(key)
                     ? computedStyle.getPropertyValue(key)
                     : computedStyle[key]) || 0;
                 return typeof value === "string" ? value.trim() : value;
@@ -8992,9 +8973,9 @@
     };
 
     let id = 0;
-    const AnimateSharedLayout = ({ children, }) => {
+    const AnimateSharedLayout = ({ children }) => {
         React__namespace.useEffect(() => {
-            warning(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
+            exports.warning(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
         }, []);
         return (React__namespace.createElement(LayoutGroup, { id: useConstant(() => `asl-${id++}`) }, children));
     };
@@ -9110,7 +9091,7 @@
             return order;
         const item = order[index];
         const nextLayout = nextItem.layout;
-        const nextItemCenter = mix$1(nextLayout.min, nextLayout.max, 0.5);
+        const nextItemCenter = mix(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);
@@ -9122,7 +9103,7 @@
         const Component = useConstant(() => motion(as));
         const order = [];
         const isReordering = React.useRef(false);
-        invariant(Boolean(values), "Reorder.Group must be provided a values prop");
+        exports.invariant(Boolean(values), "Reorder.Group must be provided a values prop");
         const context = {
             axis,
             registerItem: (value, layout) => {
@@ -9204,7 +9185,7 @@
         const inputRange = args[1 + argOffset];
         const outputRange = args[2 + argOffset];
         const options = args[3 + argOffset];
-        const interpolator = interpolate$1(inputRange, outputRange, {
+        const interpolator = interpolate(inputRange, outputRange, {
             mixer: getMixer(outputRange[0]),
             ...options,
         });
@@ -9275,7 +9256,7 @@
         };
         const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
         const measuredLayout = React.useRef(null);
-        invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+        exports.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
         const { axis, registerItem, updateOrder } = context;
         React.useEffect(() => {
             registerItem(value, measuredLayout.current);
@@ -9296,6 +9277,17 @@
         Item,
     };
 
+    exports.AnimationType = void 0;
+    (function (AnimationType) {
+        AnimationType["Animate"] = "animate";
+        AnimationType["Hover"] = "whileHover";
+        AnimationType["Tap"] = "whileTap";
+        AnimationType["Drag"] = "whileDrag";
+        AnimationType["Focus"] = "whileFocus";
+        AnimationType["InView"] = "whileInView";
+        AnimationType["Exit"] = "exit";
+    })(exports.AnimationType || (exports.AnimationType = {}));
+
     /**
      * @public
      */
@@ -9431,79 +9423,6 @@
         return velocity;
     }
 
-    const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
-
-    const isNumber = (value) => typeof value === "number";
-
-    const isEasingList = (easing) => Array.isArray(easing) && !isNumber(easing[0]);
-
-    const wrap$1 = (min, max, v) => {
-        const rangeSize = max - min;
-        return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
-    };
-
-    function getEasingForSegment(easing, i) {
-        return isEasingList(easing)
-            ? easing[wrap$1(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") {
@@ -9524,82 +9443,6 @@
         return Array.from(elements || []);
     }
 
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-
-    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) {
@@ -9691,7 +9534,7 @@
     }
 
     function resize(a, b) {
-        return isFunction(a) ? resizeWindow(a) : resizeElement(a, b);
+        return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
     }
 
     /**
@@ -9736,7 +9579,9 @@
         axis.progress = progress(0, axis.scrollLength, axis.current);
         const elapsed = time - prevTime;
         axis.velocity =
-            elapsed > maxElapsed ? 0 : velocityPerSecond(axis.current - prev, elapsed);
+            elapsed > maxElapsed
+                ? 0
+                : velocityPerSecond(axis.current - prev, elapsed);
     }
     function updateScrollInfo(element, info, time) {
         updateAxisInfo(element, "x", info, time);
@@ -9804,7 +9649,7 @@
         /**
          * Handle unit values
          */
-        if (isString(edge)) {
+        if (typeof edge === "string") {
             const asNumber = parseFloat(edge);
             if (edge.endsWith("px")) {
                 delta = asNumber;
@@ -9825,7 +9670,7 @@
         /**
          * If the edge is defined as a number, handle as a progress value.
          */
-        if (isNumber(edge)) {
+        if (typeof edge === "number") {
             delta = length * edge;
         }
         return inset + delta;
@@ -9836,7 +9681,7 @@
         let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset;
         let targetPoint = 0;
         let containerPoint = 0;
-        if (isNumber(offset)) {
+        if (typeof offset === "number") {
             /**
              * 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
@@ -9844,7 +9689,7 @@
              */
             offsetDefinition = [offset, offset];
         }
-        else if (isString(offset)) {
+        else if (typeof offset === "string") {
             offset = offset.trim();
             if (offset.includes(" ")) {
                 offsetDefinition = offset.split(" ");
@@ -9904,7 +9749,7 @@
          * to map scroll value into a progress.
          */
         if (hasChanged) {
-            info[axis].interpolate = interpolate(defaultOffset$1(numOffsets), info[axis].offset);
+            info[axis].interpolate = interpolate(info[axis].offset, defaultOffset$1(offsetDefinition));
             info[axis].interpolatorOffsets = [...info[axis].offset];
         }
         info[axis].progress = info[axis].interpolate(info[axis].current);
@@ -9918,7 +9763,7 @@
         info.y.targetOffset = 0;
         if (target !== container) {
             let node = target;
-            while (node && node != container) {
+            while (node && node !== container) {
                 info.x.targetOffset += node.offsetLeft;
                 info.y.targetOffset += node.offsetTop;
                 node = node.offsetParent;
@@ -9932,7 +9777,6 @@
         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) => {
@@ -9941,29 +9785,7 @@
                     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;
+            notify: () => onScroll(info),
         };
     }
 
@@ -9971,8 +9793,7 @@
     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"]);
+    function scroll(onScroll, { container = document.documentElement, ...options } = {}) {
         let containerHandlers = onScrollHandlers.get(container);
         /**
          * Get the onScroll handlers for this container.
@@ -10014,33 +9835,31 @@
         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)
+            const currentHandlers = onScrollHandlers.get(container);
+            if (!currentHandlers)
                 return;
-            containerHandlers.delete(containerHandler);
-            if (containerHandlers.size)
+            currentHandlers.delete(containerHandler);
+            if (currentHandlers.size)
                 return;
             /**
              * If no more handlers, remove the scroll listener too.
              */
-            const listener = scrollListeners.get(container);
+            const scrollListener = scrollListeners.get(container);
             scrollListeners.delete(container);
-            if (listener) {
-                getEventTarget(container).removeEventListener("scroll", listener);
+            if (scrollListener) {
+                getEventTarget(container).removeEventListener("scroll", scrollListener);
                 (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
-                window.removeEventListener("resize", listener);
+                window.removeEventListener("resize", scrollListener);
             }
         };
     }
 
     function refWarning(name, ref) {
-        warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
+        exports.warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
     }
     const createScrollMotionValues = () => ({
         scrollX: motionValue(0),
@@ -10125,7 +9944,7 @@
                 memberName = "transform";
             }
             else if (!name.startsWith("origin") &&
-                !isCSSVariable$1(name) &&
+                !isCSSVariableName(name) &&
                 name !== "willChange") {
                 memberName = camelToDash(name);
             }
@@ -10237,7 +10056,7 @@
                 return () => void subscribers.delete(visualElement);
             },
             start(definition, transitionOverride) {
-                invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+                exports.invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
                 const animations = [];
                 subscribers.forEach((visualElement) => {
                     animations.push(animateVisualElement(visualElement, definition, {
@@ -10247,7 +10066,7 @@
                 return Promise.all(animations);
             },
             set(definition) {
-                invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+                exports.invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
                 return subscribers.forEach((visualElement) => {
                     setValues(visualElement, definition);
                 });
@@ -10352,6 +10171,55 @@
         return [item, runCycle];
     }
 
+    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 (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,
+            rootMargin,
+            threshold: typeof amount === "number" ? amount : thresholds[amount],
+        });
+        elements.forEach((element) => observer.observe(element));
+        return () => observer.disconnect();
+    }
+
     function useInView(ref, { root, margin, amount, once = false } = {}) {
         const [isInView, setInView] = React.useState(false);
         React.useEffect(() => {
@@ -10747,8 +10615,8 @@
         let parentScaleX = useMotionValue(1);
         let parentScaleY = useMotionValue(1);
         const visualElement = useVisualElementContext();
-        invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
-        warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
+        exports.invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
+        exports.warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
         hasWarned = true;
         if (scale) {
             parentScaleX = scale.scaleX || parentScaleX;
@@ -10797,7 +10665,7 @@
     exports.circIn = circIn;
     exports.circInOut = circInOut;
     exports.circOut = circOut;
-    exports.clamp = clamp$1;
+    exports.clamp = clamp;
     exports.color = color;
     exports.complex = complex;
     exports.createBox = createBox;
@@ -10815,7 +10683,7 @@
     exports.filterProps = filterProps;
     exports.frameData = frameData;
     exports.inertia = inertia;
-    exports.interpolate = interpolate$1;
+    exports.interpolate = interpolate;
     exports.isBrowser = isBrowser;
     exports.isDragActive = isDragActive;
     exports.isMotionComponent = isMotionComponent;
@@ -10823,12 +10691,12 @@
     exports.isValidMotionProp = isValidMotionProp;
     exports.m = m;
     exports.makeUseVisualState = makeUseVisualState;
-    exports.mix = mix$1;
+    exports.mix = mix;
     exports.motion = motion;
     exports.motionValue = motionValue;
     exports.optimizedAppearDataAttribute = optimizedAppearDataAttribute;
     exports.pipe = pipe;
-    exports.progress = progress$1;
+    exports.progress = progress;
     exports.px = px;
     exports.resolveMotionValue = resolveMotionValue;
     exports.spring = spring;