motion 13.4.2 → 13.4.4

package/README.md

@@ -24,10 +24,12 @@ npm install motion-v
 1. [Why Motion?](#why-motion)
 2. [🍦 Platforms](#-platforms)
 3. [🎓 Examples](#-examples)
-4. [⚡️ Motion+](#-motion)
-5. [👩🏻‍⚖️ License](#-license)
-6. [💎 Contribute](#-contribute)
-7. [✨ Sponsors](#-sponsors)
+4. [🎨 Motion Studio](#-motion-studio)
+4. [🤖 Using Motion with AI](#-using-motion-with-ai)
+5. [⚡️ Motion+](#-motion)
+6. [👩🏻‍⚖️ License](#-license)
+7. [💎 Contribute](#-contribute)
+8. [✨ Sponsors](#-sponsors)
 
 ## Why Motion?
 
@@ -106,19 +108,35 @@ Get started with [Motion for Vue](https://motion.dev/docs/vue).
 
 ## 🎓 Examples & tutorials
 
-Browse 330+ [official examples](https://motion.dev/examples), with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
+Browse 450+ [official examples](https://motion.dev/examples), with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
 
-Over 100 examples come with a full step-by-step [tutorial](https://motion.dev/tutorials).
+Over 110 examples come with a full step-by-step tutorial on [their example page](https://motion.dev/examples).
+
+## 🤖 Using Motion with AI
+
+Give your coding agent current Motion docs:
+
+-   **Agent skill:** `npx motion-ai` installs the free, MIT-licensed `/motion` skill and sets up Motion's MCP servers for Claude Code, Cursor, Amp, OpenCode, Gemini CLI and Copilot. [Source on GitHub](https://github.com/motiondivision/ai-kit).
+-   **MCP server:** `https://mcp.motion.dev` searches the Motion docs and example metadata. It is free and needs no account.
+-   **llms.txt:** [motion.dev/llms.txt](https://motion.dev/llms.txt?utm_source=npm-readme) indexes every docs page. Motion+ pages are labelled as paid, with their install and import.
+
+[Motion+](https://motion.dev/plus?utm_source=npm-readme) adds example and Motion UI source, MotionScore performance audits and CSS spring generation for your agent.
+
+## 🎨 Motion Studio
+
+A visual animation editor for your website. Edit keyframes, easing curves and springs on a live timeline, or describe changes to the Ultramotion agent, then apply the result straight to your code with Cursor, Codex or Claude.
+
+[Explore Motion Studio](https://motion.dev/studio)
 
 ## ⚡️ Motion+
 
-A one-time payment, lifetime-updates membership:
+A one-time Personal licence with lifetime updates, or an annual per-seat Business plan for teams:
 
--   **330+ examples**
--   **100+ tutorials**
+-   **450+ examples**
+-   **110+ tutorials**
 -   **Premium APIs** like [Cursor](https://motion.dev/docs/cursor) and [Ticker](https://motion.dev/docs/react-ticker)
 -   **Transition editor** for Cursor and VS Code
--   **AI skills**
+-   **AI Kit:** example and Motion UI source, MotionScore audits and CSS springs for your agent
 -   **Private Discord**
 -   **Early access content**
 

package/dist/motion.dev.js

@@ -1225,22 +1225,50 @@
         }
     }
     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) {
+        /**
+         * 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);
         let springOptions = {
-            velocity: springDefaults.velocity,
-            stiffness: springDefaults.stiffness,
-            damping: springDefaults.damping,
-            mass: springDefaults.mass,
-            isResolvedFromDuration: false,
             ...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 &&
+                isSpringType(options, durationKeys),
         };
-        // stiffness/damping/mass overrides duration/bounce
-        if (!isSpringType(options, physicsKeys) &&
-            isSpringType(options, durationKeys)) {
+        if (springOptions.isTimeDefined) {
             // Time-defined springs should ignore inherited velocity.
             // Velocity from interrupted animations can cause findSpring()
             // to compute wildly different spring parameters, leading to
@@ -1261,7 +1289,7 @@
                 };
             }
             else {
-                const derived = findSpring({ ...options, velocity: 0 });
+                const derived = findSpring(springOptions);
                 springOptions = {
                     ...springOptions,
                     ...derived,
@@ -1269,6 +1297,17 @@
                 };
                 springOptions.isResolvedFromDuration = true;
             }
+            /**
+             * Non-finite time options degenerate: a NaN bounce gives a NaN
+             * damping, an infinite visualDuration a 0 stiffness. 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,7 +1326,7 @@
          * to reduce GC during animation.
          */
         const state = { done: false, value: origin };
-        const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration, } = getSpringOptions({
+        const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration, isTimeDefined, } = getSpringOptions({
             ...options,
             velocity: -millisecondsToSeconds(options.velocity || 0),
         });
@@ -1312,7 +1351,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 +1449,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 +1459,8 @@
             retarget: (keyframes, newVelocity) => {
                 s.target = keyframes[keyframes.length - 1];
                 s.delta = s.target - keyframes[0];
-                s.velocity = ignoreVelocity
-                    ? 0
-                    : -millisecondsToSeconds(newVelocity);
+                // Time-defined springs ignore inherited velocity, see getSpringOptions
+                s.velocity = isTimeDefined ? 0 : -millisecondsToSeconds(newVelocity);
                 // Default thresholds depend on the scale of the new delta
                 if (!(options.restSpeed && options.restDelta))
                     setRestThresholds();
@@ -3445,7 +3478,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 +5810,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 +6018,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 +7754,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 +8634,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 +9126,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 +9951,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
@@ -12561,7 +12594,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 +12609,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 +12626,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 +12732,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;
-        }
-        /**
-         * 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];
+            axisInfo.offset[i] = resolveOffset(offsetDefinition[i], axisInfo.containerLength, axisInfo.targetLength, axisInfo.targetOffset);
         }
-        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 +12837,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 +12895,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 +12928,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 +12956,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 +12974,6 @@
                 cancelFrame(dimensionCheckProcess);
                 dimensionCheckProcesses.delete(container);
             }
-            scrollSize.delete(container);
         };
     }
 
@@ -13019,10 +13054,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 +13131,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);
     }