motion 13.4.3 → 13.4.5

package/dist/motion.dev.js

@@ -1118,7 +1118,6 @@
         stiffness: 100,
         damping: 10,
         mass: 1.0,
-        velocity: 0.0,
         // Default duration/bounce-based options
         duration: 800, // in ms
         bounce: 0.3,
@@ -1153,7 +1152,12 @@
      * This is ported from the Framer implementation of duration-based spring resolution.
      */
     const safeMin = 0.001;
-    function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
+    /**
+     * Assumes zero initial velocity and the default mass: time-defined springs
+     * ignore inherited velocity and only resolve without valid physics. Returns
+     * NaN physics when the root search doesn't converge.
+     */
+    function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, }) {
         let envelope;
         let derivative;
         exports.warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
@@ -1170,15 +1174,13 @@
             envelope = (undampedFreq) => {
                 const exponentialDecay = undampedFreq * dampingRatio;
                 const delta = exponentialDecay * duration;
-                const a = exponentialDecay - velocity;
                 const b = calcAngularFreq(undampedFreq, dampingRatio);
                 const c = Math.exp(-delta);
-                return safeMin - (a / b) * c;
+                return safeMin - (exponentialDecay / b) * c;
             };
             derivative = (undampedFreq) => {
                 const exponentialDecay = undampedFreq * dampingRatio;
                 const delta = exponentialDecay * duration;
-                const d = delta * velocity + velocity;
                 const e = dampingRatio *
                     dampingRatio *
                     undampedFreq *
@@ -1187,7 +1189,7 @@
                 const f = Math.exp(-delta);
                 const g = calcAngularFreq(undampedFreq * undampedFreq, dampingRatio);
                 const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;
-                return (factor * ((d - e) * f)) / g;
+                return (factor * -e * f) / g;
             };
         }
         else {
@@ -1196,79 +1198,89 @@
              */
             envelope = (undampedFreq) => {
                 const a = Math.exp(-undampedFreq * duration);
-                const b = (undampedFreq - velocity) * duration + 1;
+                const b = undampedFreq * duration + 1;
                 return -safeMin + a * b;
             };
             derivative = (undampedFreq) => {
                 const a = Math.exp(-undampedFreq * duration);
-                const b = (velocity - undampedFreq) * (duration * duration);
+                const b = -undampedFreq * (duration * duration);
                 return a * b;
             };
         }
         const initialGuess = 5 / duration;
         const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
-        duration = secondsToMilliseconds(duration);
-        if (isNaN(undampedFreq)) {
-            return {
-                stiffness: springDefaults.stiffness,
-                damping: springDefaults.damping,
-                duration,
-            };
-        }
-        else {
-            const stiffness = undampedFreq * undampedFreq * mass;
-            return {
-                stiffness,
-                damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),
-                duration,
-            };
-        }
+        const stiffness = undampedFreq * undampedFreq;
+        return {
+            stiffness,
+            damping: dampingRatio * 2 * Math.sqrt(stiffness),
+            duration: secondsToMilliseconds(duration),
+        };
     }
-    const durationKeys = ["duration", "bounce"];
-    const physicsKeys = ["stiffness", "damping", "mass"];
-    function isSpringType(options, keys) {
-        return keys.some((key) => options[key] !== undefined);
+    /**
+     * Spring physics must be finite. stiffness and mass are also divisors so must
+     * be positive, whereas a damping of 0 is a valid, perpetually oscillating
+     * spring. Relational rather than Number.isFinite so numeric strings still
+     * coerce.
+     */
+    const isValidPhysics = (value, canBeZero) => (canBeZero ? value >= 0 : value > 0) && value < Infinity;
+    /**
+     * Returns value if it's usable spring physics, otherwise undefined so callers
+     * fall back to the default. An explicit `undefined`, e.g. from a forwarded
+     * optional prop, must fall back too. Invalid physics would otherwise resolve
+     * to NaN spring values that never report done.
+     */
+    function resolvePhysics(value, canBeZero) {
+        if (isValidPhysics(value, canBeZero))
+            return value;
+        {
+            exports.warning(value === undefined, "Spring stiffness and mass must be positive, damping 0 or greater", "spring-invalid-physics");
+        }
+        return undefined;
     }
     function getSpringOptions(options) {
-        let springOptions = {
-            velocity: springDefaults.velocity,
-            stiffness: springDefaults.stiffness,
-            damping: springDefaults.damping,
-            mass: springDefaults.mass,
-            isResolvedFromDuration: false,
+        /**
+         * Resolve physics before choosing between physics- and duration-based
+         * resolution, so an invalid stiffness doesn't also silently discard a
+         * valid duration/bounce.
+         */
+        const validStiffness = resolvePhysics(options.stiffness);
+        const validDamping = resolvePhysics(options.damping, true);
+        const validMass = resolvePhysics(options.mass);
+        const springOptions = {
             ...options,
+            stiffness: validStiffness ?? springDefaults.stiffness,
+            damping: validDamping ?? springDefaults.damping,
+            mass: validMass ?? springDefaults.mass,
+            isResolvedFromDuration: false,
+            // stiffness/damping/mass overrides duration/bounce
+            isTimeDefined: (validStiffness ?? validDamping ?? validMass) === undefined &&
+                (options.duration !== undefined || options.bounce !== undefined),
         };
-        // stiffness/damping/mass overrides duration/bounce
-        if (!isSpringType(options, physicsKeys) &&
-            isSpringType(options, durationKeys)) {
-            // Time-defined springs should ignore inherited velocity.
-            // Velocity from interrupted animations can cause findSpring()
-            // to compute wildly different spring parameters, leading to
-            // massive oscillation on small-range animations.
-            springOptions.velocity = 0;
+        if (springOptions.isTimeDefined) {
             if (options.visualDuration) {
-                const visualDuration = options.visualDuration;
-                const root = (2 * Math.PI) / (visualDuration * 1.2);
-                const stiffness = root * root;
-                const damping = 2 *
-                    clamp(0.05, 1, 1 - (options.bounce || 0)) *
-                    Math.sqrt(stiffness);
-                springOptions = {
-                    ...springOptions,
-                    mass: springDefaults.mass,
-                    stiffness,
-                    damping,
-                };
+                const root = (2 * Math.PI) / (options.visualDuration * 1.2);
+                springOptions.stiffness = root * root;
+                springOptions.damping =
+                    2 *
+                        clamp(0.05, 1, 1 - (options.bounce || 0)) *
+                        Math.sqrt(springOptions.stiffness);
             }
             else {
-                const derived = findSpring({ ...options, velocity: 0 });
-                springOptions = {
-                    ...springOptions,
-                    ...derived,
-                    mass: springDefaults.mass,
-                };
+                Object.assign(springOptions, findSpring(springOptions));
                 springOptions.isResolvedFromDuration = true;
             }
+            /**
+             * Time options can degenerate: a NaN bounce gives a NaN damping, an
+             * infinite visualDuration a 0 stiffness, and findSpring NaN for both
+             * when it doesn't converge. Replace the two together, so the
+             * relationship duration resolution establishes between them is never
+             * left half-overwritten.
+             */
+            if (!isValidPhysics(springOptions.stiffness) ||
+                !isValidPhysics(springOptions.damping, true)) {
+                springOptions.stiffness = springDefaults.stiffness;
+                springOptions.damping = springDefaults.damping;
+            }
         }
         return springOptions;
     }
@@ -1287,10 +1299,13 @@
          * to reduce GC during animation.
          */
         const state = { done: false, value: origin };
-        const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration, } = getSpringOptions({
-            ...options,
-            velocity: -millisecondsToSeconds(options.velocity || 0),
-        });
+        const { stiffness, damping, mass, duration, isResolvedFromDuration, isTimeDefined, } = getSpringOptions({ ...options });
+        /**
+         * Time-defined springs ignore inherited velocity. Velocity from
+         * interrupted animations causes massive oscillation on small-range
+         * animations.
+         */
+        const inheritVelocity = (velocity) => isTimeDefined ? 0 : -millisecondsToSeconds(velocity);
         const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
         const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));
         const decay = dampingRatio * undampedAngularFreq;
@@ -1304,7 +1319,7 @@
         const s = {
             target,
             delta: target - origin,
-            velocity: velocity || 0.0,
+            velocity: inheritVelocity(options.velocity || 0) || 0,
             restSpeed: 0,
             restDelta: 0,
         };
@@ -1312,7 +1327,7 @@
          * If we're working on a granular scale, use smaller defaults for determining
          * when the spring is finished.
          *
-         * These defaults have been selected emprically based on what strikes a good
+         * These defaults have been selected empirically based on what strikes a good
          * ratio between feeling good and finishing as soon as changes are imperceptible.
          */
         const setRestThresholds = () => {
@@ -1410,11 +1425,6 @@
             };
         }
         update();
-        /**
-         * Time-defined springs ignore inherited velocity, see getSpringOptions.
-         */
-        const ignoreVelocity = !isSpringType(options, physicsKeys) &&
-            isSpringType(options, durationKeys);
         const calculatedDuration = isResolvedFromDuration ? duration || null : null;
         const generator = {
             calculatedDuration,
@@ -1425,9 +1435,7 @@
             retarget: (keyframes, newVelocity) => {
                 s.target = keyframes[keyframes.length - 1];
                 s.delta = s.target - keyframes[0];
-                s.velocity = ignoreVelocity
-                    ? 0
-                    : -millisecondsToSeconds(newVelocity);
+                s.velocity = inheritVelocity(newVelocity);
                 // Default thresholds depend on the scale of the new delta
                 if (!(options.restSpeed && options.restDelta))
                     setRestThresholds();
@@ -3445,7 +3453,7 @@
 
     class GroupAnimation {
         constructor(animations) {
-            // Bound to accomadate common `return animation.stop` pattern
+            // Bound to accommodate common `return animation.stop` pattern
             this.stop = () => this.runAll("stop");
             this.animations = animations.filter(Boolean);
         }
@@ -5777,7 +5785,7 @@
                 translateAxis(box.y, -node.scroll.offset.y);
             }
             if (delta) {
-                // Incoporate each ancestor's scale into a cumulative treeScale for this component
+                // Incorporate each ancestor's scale into a cumulative treeScale for this component
                 treeScale.x *= delta.x.scale;
                 treeScale.y *= delta.y.scale;
                 // Apply each ancestor's calculated delta into this component's recorded layout box
@@ -5985,7 +5993,7 @@
     /**
      * Create a hover gesture. hover() is different to .addEventListener("pointerenter")
      * in that it has an easier syntax, filters out polyfilled touch events, interoperates
-     * with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
+     * with drag gestures, and automatically removes the "pointerleave" event listener when the hover ends.
      *
      * @public
      */
@@ -7721,7 +7729,7 @@
         /**
          * Iterate backwards over the builders array. We can ignore the
          * "wait" animations. If we have an interrupting animation in the
-         * queue then we need to batch all preceeding animations into it.
+         * queue then we need to batch all preceding animations into it.
          * Currently this only batches the update functions but will also
          * need to batch the targets.
          */
@@ -8601,7 +8609,7 @@
             /**
              * compareDocumentPosition returns a bitmask, by using the bitwise &
              * we're returning true if 2 in that bitmask is set to true. 2 is set
-             * to true if b preceeds a.
+             * to true if b precedes a.
              */
             return a.compareDocumentPosition(b) & 2 ? 1 : -1;
         }
@@ -9093,7 +9101,7 @@
                 }
                 /**
                  * Set all encountered keys so far as the protected keys for this type. This will
-                 * be any key that has been animated or otherwise handled by active, higher-priortiy types.
+                 * be any key that has been animated or otherwise handled by active, higher-priority types.
                  */
                 typeState.protectedKeys = { ...encounteredKeys };
                 // Check if we can skip analysing this prop early
@@ -9918,8 +9926,8 @@
                 this.hasCheckedOptimisedAppear = false;
                 /**
                  * An object representing the calculated contextual/accumulated/tree scale.
-                 * This will be used to scale calculcated projection transforms, as these are
-                 * calculated in screen-space but need to be scaled for elements to layoutly
+                 * This will be used to scale calculated projection transforms, as these are
+                 * calculated in screen-space but need to be scaled for elements to visually
                  * make it to their calculated destinations.
                  *
                  * TODO: Lazy-init
@@ -9930,7 +9938,6 @@
                  */
                 this.eventHandlers = new Map();
                 this.hasTreeAnimated = false;
-                this.layoutVersion = 0;
                 // Note: Currently only running on root node
                 this.updateScheduled = false;
                 this.scheduleUpdate = () => this.update();
@@ -9970,7 +9977,6 @@
                  * Frame calculations
                  */
                 this.resolvedRelativeTargetAt = 0.0;
-                this.linkedParentVersion = 0;
                 this.hasProjected = false;
                 this.isVisible = true;
                 this.animationProgress = 0;
@@ -10251,6 +10257,7 @@
                      * get measured even when memoized (willUpdate skipped).
                      */
                     this.nodes.forEach(ensureDraggedNodesSnapshotted);
+                    this.nodes.forEach(syncRelativeLayout);
                     /**
                      * Write
                      */
@@ -10348,7 +10355,6 @@
                 }
                 const prevLayout = this.layout;
                 this.layout = this.measure(false);
-                this.layoutVersion++;
                 if (!this.layoutCorrected)
                     this.layoutCorrected = createBox();
                 this.isLayoutDirty = false;
@@ -10568,11 +10574,6 @@
                     return;
                 this.resolvedRelativeTargetAt = frameData.timestamp;
                 const relativeParent = this.getClosestProjectingParent();
-                if (relativeParent &&
-                    this.linkedParentVersion !== relativeParent.layoutVersion &&
-                    !relativeParent.options.layoutRoot) {
-                    this.removeRelativeTarget();
-                }
                 /**
                  * If we don't have a targetDelta but do have a layout, we can attempt to resolve
                  * a relativeParent. This will allow a component to perform scale correction
@@ -10675,7 +10676,6 @@
             }
             createRelativeTarget(relativeParent, layout, parentLayout) {
                 this.relativeParent = relativeParent;
-                this.linkedParentVersion = relativeParent.layoutVersion;
                 this.forceRelativeParentToResolveTarget();
                 this.relativeTarget = createBox();
                 this.relativeTargetOrigin = createBox();
@@ -11385,6 +11385,26 @@
             node.isLayoutDirty = true;
         }
     }
+    /**
+     * If a node's relative parent is about to be re-measured but the node isn't
+     * (e.g. it's in another LayoutGroup), its relative target is out of date.
+     * If it's layout animating, re-measure it too, so its relative target keeps
+     * resolving against current layouts. Otherwise its layout is still valid
+     * relative to its parent, so drop the relative target, and any targetDelta
+     * left over from a finished animation while an ancestor still animates, to be
+     * rebuilt from its layout.
+     */
+    function syncRelativeLayout(node) {
+        if (node.relativeTarget && node.relativeParent?.isLayoutDirty) {
+            if (node.currentAnimation) {
+                node.isLayoutDirty = true;
+            }
+            else {
+                node.targetDelta = undefined;
+                node.removeRelativeTarget();
+            }
+        }
+    }
     function resetTransformStyle(node) {
         const { visualElement } = node.options;
         if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {
@@ -12561,7 +12581,10 @@
         x: createAxisInfo(),
         y: createAxisInfo(),
     });
-    const keys = {
+    /**
+     * Also iterated with for...in as the list of axes.
+     */
+    const axisKeys = {
         x: {
             length: "Width",
             position: "Left",
@@ -12573,11 +12596,13 @@
     };
     function updateAxisInfo(element, axisName, info, time) {
         const axis = info[axisName];
-        const { length, position } = keys[axisName];
+        const { length, position } = axisKeys[axisName];
         const prev = axis.current;
         const prevTime = info.time;
         axis.current = Math.abs(element[`scroll${position}`]);
-        axis.scrollLength = element[`scroll${length}`] - element[`client${length}`];
+        axis.containerLength = element[`client${length}`];
+        axis.targetLength = element[`scroll${length}`];
+        axis.scrollLength = axis.targetLength - axis.containerLength;
         axis.offset.length = 0;
         axis.offset[0] = 0;
         axis.offset[1] = axis.scrollLength;
@@ -12588,54 +12613,15 @@
                 ? 0
                 : velocityPerSecond(axis.current - prev, elapsed);
     }
+    /**
+     * Measures a scroll container. Runs once per container per frame; every
+     * handler on that container derives its info from the result.
+     */
     function updateScrollInfo(element, info, time) {
-        updateAxisInfo(element, "x", info, time);
-        updateAxisInfo(element, "y", info, time);
-        info.time = time;
-    }
-
-    function calcInset(element, container) {
-        const inset = { x: 0, y: 0 };
-        let current = element;
-        while (current && current !== container) {
-            if (isHTMLElement(current)) {
-                inset.x += current.offsetLeft;
-                inset.y += current.offsetTop;
-                current = current.offsetParent;
-            }
-            else if (current.tagName === "svg") {
-                /**
-                 * This isn't an ideal approach to measuring the offset of <svg /> tags.
-                 * It would be preferable, given they behave like HTMLElements in most ways
-                 * to use offsetLeft/Top. But these don't exist on <svg />. Likewise we
-                 * can't use .getBBox() like most SVG elements as these provide the offset
-                 * relative to the SVG itself, which for <svg /> is usually 0x0.
-                 */
-                const svgBoundingBox = current.getBoundingClientRect();
-                current = current.parentElement;
-                const parentBoundingBox = current.getBoundingClientRect();
-                inset.x += svgBoundingBox.left - parentBoundingBox.left;
-                inset.y += svgBoundingBox.top - parentBoundingBox.top;
-            }
-            else if (current instanceof SVGGraphicsElement) {
-                const { x, y } = current.getBBox();
-                inset.x += x;
-                inset.y += y;
-                let svg = null;
-                let parent = current.parentNode;
-                while (!svg) {
-                    if (parent.tagName === "svg") {
-                        svg = parent;
-                    }
-                    parent = current.parentNode;
-                }
-                current = svg;
-            }
-            else {
-                break;
-            }
+        for (const axis in axisKeys) {
+            updateAxisInfo(element, axis, info, time);
         }
-        return inset;
+        info.time = time;
     }
 
     const namedEdges = {
@@ -12733,86 +12719,104 @@
         ],
     };
 
-    const point = { x: 0, y: 0 };
-    function getTargetSize(target) {
-        return "getBBox" in target && target.tagName !== "svg"
-            ? target.getBBox()
-            : { width: target.clientWidth, height: target.clientHeight };
+    /**
+     * Resolved offsets map to evenly spaced progress values, so progress is
+     * derived from the segment index rather than building an interpolator.
+     */
+    function offsetsToProgress(offsets, v) {
+        const n = offsets.length - 1;
+        if (n < 1)
+            return 0;
+        const reverse = offsets[0] > offsets[n];
+        const at = (i) => offsets[reverse ? n - i : i];
+        /**
+         * Matches interpolate(), which checks for a zero-length first range
+         * before reversing descending offsets.
+         */
+        if (offsets[0] === offsets[1] && v < at(0))
+            return reverse ? 1 : 0;
+        let i = 0;
+        while (i < n - 1 && v >= at(i + 1))
+            i++;
+        const p = (i + progress(at(i), at(i + 1), v)) / n;
+        return reverse ? 1 - p : p;
     }
-    function resolveOffsets(container, info, options) {
-        const { 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 }
-            : getTargetSize(target);
-        const containerSize = {
-            width: container.clientWidth,
-            height: container.clientHeight,
-        };
+    function resolveOffsets(info, options) {
+        const { offset: offsetDefinition = ScrollOffset.All, axis = "y" } = options;
+        const axisInfo = info[axis];
         /**
          * 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;
+        axisInfo.offset.length = 0;
         /**
          * Populate the offset array by resolving the user's offset definition into
-         * a list of pixel scroll offets.
+         * a list of pixel scroll offsets.
          */
-        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;
+            axisInfo.offset[i] = resolveOffset(offsetDefinition[i], axisInfo.containerLength, axisInfo.targetLength, axisInfo.targetOffset);
         }
-        /**
-         * 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(info[axis].offset, defaultOffset$1(offsetDefinition), { clamp: false });
-            info[axis].interpolatorOffsets = [...info[axis].offset];
-        }
-        info[axis].progress = clamp(0, 1, info[axis].interpolate(info[axis].current));
+        axisInfo.progress = clamp(0, 1, offsetsToProgress(axisInfo.offset, axisInfo.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;
+    function calcInset(element, container) {
+        const inset = { x: 0, y: 0 };
+        let current = element;
+        while (current && current !== container) {
+            if (isHTMLElement(current)) {
+                inset.x += current.offsetLeft;
+                inset.y += current.offsetTop;
+                current = current.offsetParent;
+            }
+            else if (current.tagName === "svg") {
+                /**
+                 * This isn't an ideal approach to measuring the offset of <svg /> tags.
+                 * It would be preferable, given they behave like HTMLElements in most ways
+                 * to use offsetLeft/Top. But these don't exist on <svg />. Likewise we
+                 * can't use .getBBox() like most SVG elements as these provide the offset
+                 * relative to the SVG itself, which for <svg /> is usually 0x0.
+                 */
+                const svgBoundingBox = current.getBoundingClientRect();
+                current = current.parentElement;
+                const parentBoundingBox = current.getBoundingClientRect();
+                inset.x += svgBoundingBox.left - parentBoundingBox.left;
+                inset.y += svgBoundingBox.top - parentBoundingBox.top;
+            }
+            else if (current instanceof SVGGraphicsElement) {
+                const { x, y } = current.getBBox();
+                inset.x += x;
+                inset.y += y;
+                let svg = null;
+                let parent = current.parentNode;
+                while (!svg) {
+                    if (parent.tagName === "svg") {
+                        svg = parent;
+                    }
+                    parent = current.parentNode;
+                }
+                current = svg;
+            }
+            else {
+                break;
             }
         }
-        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;
+        return inset;
+    }
+
+    function getTargetSize(target) {
+        return "getBBox" in target && target.tagName !== "svg"
+            ? target.getBBox()
+            : { width: target.clientWidth, height: target.clientHeight };
+    }
+    function createOnScrollHandler(container, onScroll, info, options = {}) {
+        const { target } = options;
         /**
          * In development mode ensure scroll containers aren't position: static as this makes
          * it difficult to measure their relative positions. The document scrolling element
          * is exempt: offsetParent measurements naturally resolve relative to the document.
          */
         {
-            if (container &&
-                target &&
+            if (target &&
                 target !== container &&
                 container !== document.documentElement &&
                 container !== document.scrollingElement &&
@@ -12820,24 +12824,39 @@
                 warnOnce(getComputedStyle(container).position !== "static", "Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly.");
             }
         }
-    }
-    function createOnScrollHandler(element, onScroll, info, options = {}) {
+        /**
+         * Handlers without a target or offset are notified with the container's
+         * shared info object, so they measure nothing themselves.
+         */
+        const needsOwnInfo = target || options.offset;
         return {
-            measure: (time) => {
-                measure(element, options.target, info);
-                updateScrollInfo(element, info, time);
-                if (options.offset || options.target) {
-                    resolveOffsets(element, info, options);
-                }
+            measure: (containerInfo) => {
+                if (!needsOwnInfo)
+                    return;
+                info.time = containerInfo.time;
+                for (const key in axisKeys) {
+                    const axis = key;
+                    const { offset } = info[axis];
+                    Object.assign(info[axis], containerInfo[axis]);
+                    info[axis].offset = offset;
+                }
+                if (target && target !== container) {
+                    const inset = calcInset(target, container);
+                    const size = getTargetSize(target);
+                    info.x.targetOffset = inset.x;
+                    info.y.targetOffset = inset.y;
+                    info.x.targetLength = size.width;
+                    info.y.targetLength = size.height;
+                }
+                resolveOffsets(info, options);
             },
-            notify: () => onScroll(info),
+            notify: (containerInfo) => onScroll(needsOwnInfo ? info : containerInfo),
         };
     }
 
     const scrollListeners = new WeakMap();
     const resizeListeners = new WeakMap();
     const onScrollHandlers = new WeakMap();
-    const scrollSize = new WeakMap();
     const dimensionCheckProcesses = new WeakMap();
     const getEventTarget = (element) => element === document.scrollingElement ? window : element;
     function scrollInfo(onScroll, { container = document.scrollingElement, trackContentSize = false, ...options } = {}) {
@@ -12863,15 +12882,17 @@
          * If not, create one.
          */
         if (!scrollListeners.has(container)) {
+            const containerInfo = createScrollInfo();
             const measureAll = () => {
+                updateScrollInfo(container, containerInfo, frameData.timestamp);
                 for (const handler of containerHandlers) {
-                    handler.measure(frameData.timestamp);
+                    handler.measure(containerInfo);
                 }
                 frame.preUpdate(notifyAll);
             };
             const notifyAll = () => {
                 for (const handler of containerHandlers) {
-                    handler.notify();
+                    handler.notify(containerInfo);
                 }
             };
             const listener = () => frame.read(measureAll);
@@ -12894,7 +12915,6 @@
                 width: container.scrollWidth,
                 height: container.scrollHeight,
             };
-            scrollSize.set(container, size);
             // Add frame-based scroll dimension checking to detect content changes
             const checkScrollDimensions = () => {
                 const newWidth = container.scrollWidth;
@@ -12923,8 +12943,11 @@
             if (currentHandlers.size)
                 return;
             /**
-             * If no more handlers, remove the scroll listener too.
+             * If no more handlers, remove the scroll listener too. The handler
+             * set goes with it, as a measure still queued from this listener
+             * would otherwise notify handlers added by a later scrollInfo call.
              */
+            onScrollHandlers.delete(container);
             const scrollListener = scrollListeners.get(container);
             scrollListeners.delete(container);
             if (scrollListener) {
@@ -12938,7 +12961,6 @@
                 cancelFrame(dimensionCheckProcess);
                 dimensionCheckProcesses.delete(container);
             }
-            scrollSize.delete(container);
         };
     }
 
@@ -13019,10 +13041,8 @@
         }, options);
         return { currentTime, cancel };
     }
-    function getTimeline({ source, container, ...options }) {
+    function getTimeline({ container, ...options }) {
         const { axis } = options;
-        if (source)
-            container = source;
         let containerCache = timelineCache.get(container);
         if (!containerCache) {
             containerCache = new Map();
@@ -13098,38 +13118,16 @@
         });
     }
 
-    /**
-     * Currently, we only support element tracking with `scrollInfo`, though in
-     * the future we can also offer ViewTimeline support.
-     */
-    function isElementTracking(options) {
-        return options && (options.target || options.offset);
-    }
-
-    /**
-     * If the onScroll function has two arguments, it's expecting
-     * more specific information about the scroll from scrollInfo.
-     */
-    function isOnScrollWithInfo(onScroll) {
-        return onScroll.length === 2;
-    }
-    function attachToFunction(onScroll, options) {
-        if (isOnScrollWithInfo(onScroll) || isElementTracking(options)) {
-            return scrollInfo((info) => {
-                onScroll(info[options.axis].progress, info);
-            }, options);
-        }
-        else {
-            return observeTimeline(onScroll, getTimeline(options));
-        }
-    }
-
-    function scroll(onScroll, { axis = "y", container = document.scrollingElement, ...options } = {}) {
+    function scroll(onScroll, { axis = "y", source, container = document.scrollingElement, ...options } = {}) {
         if (!container)
             return noop;
-        const optionsWithDefaults = { axis, container, ...options };
+        const optionsWithDefaults = {
+            axis,
+            container: source || container,
+            ...options,
+        };
         return typeof onScroll === "function"
-            ? attachToFunction(onScroll, optionsWithDefaults)
+            ? scrollInfo((info) => onScroll(info[axis].progress, info), optionsWithDefaults)
             : attachToAnimation(onScroll, optionsWithDefaults);
     }