motion 13.4.6 → 13.5.1

package/dist/motion.dev.js

@@ -40,8 +40,7 @@
 
     exports.warning = () => { };
     exports.invariant = () => { };
-    if (typeof process !== "undefined" &&
-        process.env?.NODE_ENV !== "production") {
+    if (typeof process !== "undefined" && "development" !== "production") {
         exports.warning = (check, message, errorCode) => {
             if (!check && typeof console !== "undefined") {
                 console.warn(formatErrorMessage(message, errorCode));
@@ -310,170 +309,15 @@
         return definition;
     };
 
-    const stepsOrder = [
-        "setup", // Compute
-        "read", // Read
-        "resolveKeyframes", // Write/Read/Write/Read
-        "preUpdate", // Compute
-        "update", // Compute
-        "preRender", // Compute
-        "render", // Write
-        "postRender", // Compute
-    ];
-
-    function createRenderStep(runNextFrame) {
-        /**
-         * We create and reuse two queues, one to queue jobs for the current frame
-         * and one for the next. We reuse to avoid triggering GC after x frames.
-         */
-        let thisFrame = new Set();
-        let nextFrame = new Set();
-        /**
-         * Track whether we're currently processing jobs in this step. This way
-         * we can decide whether to schedule new jobs for this frame or next.
-         */
-        let isProcessing = false;
-        let flushNextFrame = false;
-        /**
-         * A set of processes which were marked keepAlive when scheduled.
-         * A keepAlive process is always also held by a frame queue until
-         * it's cancelled, so a Set has the same lifetime semantics as a
-         * WeakSet here while being considerably faster to query every frame.
-         */
-        const toKeepAlive = new Set();
-        let latestFrameData = {
-            delta: 0.0,
-            timestamp: 0.0,
-            isProcessing: false,
-        };
-        function triggerCallback(callback) {
-            if (toKeepAlive.has(callback)) {
-                nextFrame.add(callback);
-                runNextFrame();
-            }
-            callback(latestFrameData);
-        }
-        const step = {
-            /**
-             * Schedule a process to run on the next frame.
-             */
-            schedule: (callback, keepAlive = false, immediate = false) => {
-                const addToCurrentFrame = immediate && isProcessing;
-                const queue = addToCurrentFrame ? thisFrame : nextFrame;
-                if (keepAlive)
-                    toKeepAlive.add(callback);
-                queue.add(callback);
-                return callback;
-            },
-            /**
-             * Cancel the provided callback from running on the next frame.
-             */
-            cancel: (callback) => {
-                nextFrame.delete(callback);
-                toKeepAlive.delete(callback);
-            },
-            /**
-             * Execute all schedule callbacks.
-             */
-            process: (frameData) => {
-                latestFrameData = frameData;
-                /**
-                 * If we're already processing we've probably been triggered by a flushSync
-                 * inside an existing process. Instead of executing, mark flushNextFrame
-                 * as true and ensure we flush the following frame at the end of this one.
-                 */
-                if (isProcessing) {
-                    flushNextFrame = true;
-                    return;
-                }
-                isProcessing = true;
-                // Swap this frame and the next to avoid GC
-                const prevFrame = thisFrame;
-                thisFrame = nextFrame;
-                nextFrame = prevFrame;
-                // Execute this frame
-                thisFrame.forEach(triggerCallback);
-                // Clear the frame so no callbacks remain. This is to avoid
-                // memory leaks should this render step not run for a while.
-                thisFrame.clear();
-                isProcessing = false;
-                if (flushNextFrame) {
-                    flushNextFrame = false;
-                    step.process(frameData);
-                }
-            },
-        };
-        return step;
-    }
-
-    const maxElapsed$1 = 40;
-    function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
-        let runNextFrame = false;
-        let useDefaultElapsed = true;
-        const state = {
-            delta: 0.0,
-            timestamp: 0.0,
-            isProcessing: false,
-        };
-        const flagRunNextFrame = () => (runNextFrame = true);
-        const steps = stepsOrder.reduce((acc, key) => {
-            acc[key] = createRenderStep(flagRunNextFrame);
-            return acc;
-        }, {});
-        const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps;
-        const processBatch = () => {
-            const useManualTiming = MotionGlobalConfig.useManualTiming;
-            const timestamp = useManualTiming
-                ? state.timestamp
-                : performance.now();
-            runNextFrame = false;
-            if (!useManualTiming) {
-                state.delta = useDefaultElapsed
-                    ? 1000 / 60
-                    : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
-            }
-            state.timestamp = timestamp;
-            state.isProcessing = true;
-            // Unrolled render loop for better per-frame performance
-            setup.process(state);
-            read.process(state);
-            resolveKeyframes.process(state);
-            preUpdate.process(state);
-            update.process(state);
-            preRender.process(state);
-            render.process(state);
-            postRender.process(state);
-            state.isProcessing = false;
-            if (runNextFrame && allowKeepAlive) {
-                useDefaultElapsed = false;
-                scheduleNextBatch(processBatch);
-            }
-        };
-        const wake = () => {
-            runNextFrame = true;
-            useDefaultElapsed = true;
-            if (!state.isProcessing) {
-                scheduleNextBatch(processBatch);
-            }
-        };
-        const schedule = stepsOrder.reduce((acc, key) => {
-            const step = steps[key];
-            acc[key] = (process, keepAlive = false, immediate = false) => {
-                if (!runNextFrame)
-                    wake();
-                return step.schedule(process, keepAlive, immediate);
-            };
-            return acc;
-        }, {});
-        const cancel = (process) => {
-            for (let i = 0; i < stepsOrder.length; i++) {
-                steps[stepsOrder[i]].cancel(process);
-            }
-        };
-        return { schedule, cancel, state, steps };
-    }
-
-    const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+    /**
+     * The frameloop's state, kept apart from the frameloop itself so that
+     * reading it doesn't bundle the scheduler.
+     */
+    const frameData = {
+        delta: 0.0,
+        timestamp: 0.0,
+        isProcessing: false,
+    };
 
     let now;
     function clearTime() {
@@ -1057,6 +901,170 @@
         return mixer(from, to);
     }
 
+    const stepsOrder = [
+        "setup", // Compute
+        "read", // Read
+        "resolveKeyframes", // Write/Read/Write/Read
+        "preUpdate", // Compute
+        "update", // Compute
+        "preRender", // Compute
+        "render", // Write
+        "postRender", // Compute
+    ];
+
+    function createRenderStep(runNextFrame) {
+        /**
+         * We create and reuse two queues, one to queue jobs for the current frame
+         * and one for the next. We reuse to avoid triggering GC after x frames.
+         */
+        let thisFrame = new Set();
+        let nextFrame = new Set();
+        /**
+         * Track whether we're currently processing jobs in this step. This way
+         * we can decide whether to schedule new jobs for this frame or next.
+         */
+        let isProcessing = false;
+        let flushNextFrame = false;
+        /**
+         * A set of processes which were marked keepAlive when scheduled.
+         * A keepAlive process is always also held by a frame queue until
+         * it's cancelled, so a Set has the same lifetime semantics as a
+         * WeakSet here while being considerably faster to query every frame.
+         */
+        const toKeepAlive = new Set();
+        let latestFrameData = {
+            delta: 0.0,
+            timestamp: 0.0,
+            isProcessing: false,
+        };
+        function triggerCallback(callback) {
+            if (toKeepAlive.has(callback)) {
+                nextFrame.add(callback);
+                runNextFrame();
+            }
+            callback(latestFrameData);
+        }
+        const step = {
+            /**
+             * Schedule a process to run on the next frame.
+             */
+            schedule: (callback, keepAlive = false, immediate = false) => {
+                const addToCurrentFrame = immediate && isProcessing;
+                const queue = addToCurrentFrame ? thisFrame : nextFrame;
+                if (keepAlive)
+                    toKeepAlive.add(callback);
+                queue.add(callback);
+                return callback;
+            },
+            /**
+             * Cancel the provided callback from running on the next frame.
+             */
+            cancel: (callback) => {
+                nextFrame.delete(callback);
+                toKeepAlive.delete(callback);
+            },
+            /**
+             * Execute all schedule callbacks.
+             */
+            process: (frameData) => {
+                latestFrameData = frameData;
+                /**
+                 * If we're already processing we've probably been triggered by a flushSync
+                 * inside an existing process. Instead of executing, mark flushNextFrame
+                 * as true and ensure we flush the following frame at the end of this one.
+                 */
+                if (isProcessing) {
+                    flushNextFrame = true;
+                    return;
+                }
+                isProcessing = true;
+                // Swap this frame and the next to avoid GC
+                const prevFrame = thisFrame;
+                thisFrame = nextFrame;
+                nextFrame = prevFrame;
+                // Execute this frame
+                thisFrame.forEach(triggerCallback);
+                // Clear the frame so no callbacks remain. This is to avoid
+                // memory leaks should this render step not run for a while.
+                thisFrame.clear();
+                isProcessing = false;
+                if (flushNextFrame) {
+                    flushNextFrame = false;
+                    step.process(frameData);
+                }
+            },
+        };
+        return step;
+    }
+
+    const maxElapsed$1 = 40;
+    function createRenderBatcher(scheduleNextBatch, allowKeepAlive, state = {
+        delta: 0.0,
+        timestamp: 0.0,
+        isProcessing: false,
+    }) {
+        let runNextFrame = false;
+        let useDefaultElapsed = true;
+        const flagRunNextFrame = () => (runNextFrame = true);
+        const steps = stepsOrder.reduce((acc, key) => {
+            acc[key] = createRenderStep(flagRunNextFrame);
+            return acc;
+        }, {});
+        const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps;
+        const processBatch = () => {
+            const useManualTiming = MotionGlobalConfig.useManualTiming;
+            const timestamp = useManualTiming
+                ? state.timestamp
+                : performance.now();
+            runNextFrame = false;
+            if (!useManualTiming) {
+                state.delta = useDefaultElapsed
+                    ? 1000 / 60
+                    : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
+            }
+            state.timestamp = timestamp;
+            state.isProcessing = true;
+            // Unrolled render loop for better per-frame performance
+            setup.process(state);
+            read.process(state);
+            resolveKeyframes.process(state);
+            preUpdate.process(state);
+            update.process(state);
+            preRender.process(state);
+            render.process(state);
+            postRender.process(state);
+            state.isProcessing = false;
+            if (runNextFrame && allowKeepAlive) {
+                useDefaultElapsed = false;
+                scheduleNextBatch(processBatch);
+            }
+        };
+        const wake = () => {
+            runNextFrame = true;
+            useDefaultElapsed = true;
+            if (!state.isProcessing) {
+                scheduleNextBatch(processBatch);
+            }
+        };
+        const schedule = stepsOrder.reduce((acc, key) => {
+            const step = steps[key];
+            acc[key] = (process, keepAlive = false, immediate = false) => {
+                if (!runNextFrame)
+                    wake();
+                return step.schedule(process, keepAlive, immediate);
+            };
+            return acc;
+        }, {});
+        const cancel = (process) => {
+            for (let i = 0; i < stepsOrder.length; i++) {
+                steps[stepsOrder[i]].cancel(process);
+            }
+        };
+        return { schedule, cancel, state, steps };
+    }
+
+    const { schedule: frame, cancel: cancelFrame, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true, frameData);
+
     const frameloopDriver = (update) => {
         const passTimestamp = ({ timestamp }) => update(timestamp);
         return {
@@ -1135,8 +1143,37 @@
         minDuration: 0.01, // in seconds
         maxDuration: 10.0, // in seconds
         minDamping: 0.05,
-        maxDamping: 1,
     };
+    /**
+     * Maps bounce to a damping ratio as SwiftUI does: 0 is critically damped, and
+     * it approaches undamped towards 1 and infinitely overdamped towards -1. Both
+     * ends are limited so the spring still moves and settles.
+     */
+    const bounceToDampingRatio = (bounce) => bounce < 0
+        ? 1 / Math.max(1 + bounce, springDefaults.minDamping)
+        : Math.max(1 - bounce, springDefaults.minDamping);
+    /**
+     * Scales an overdamped spring's undamped frequency so that, at its defining
+     * time, it has as far left to go as the critically damped spring that's
+     * criticalFreqTime radians in by then. A negative bounce then changes the
+     * shape of the curve, not when it arrives. 1 at a damping ratio of 1, so
+     * there's no jump at a bounce of 0.
+     *
+     * Solved by Newton on the remaining distance (times fast - slow), which is
+     * convex from criticalFreqTime onwards. criticalFreqTime is always below the
+     * answer, so it converges from below without overshooting.
+     */
+    function overdampedFreqScale(dampingRatio, criticalFreqTime) {
+        if (!(dampingRatio > 1))
+            return 1;
+        const root = Math.sqrt(dampingRatio * dampingRatio - 1);
+        const slow = dampingRatio - root;
+        const fast = dampingRatio + root;
+        const target = 2 * root * Math.exp(-criticalFreqTime) * (1 + criticalFreqTime);
+        return (approximateRoot((freqTime) => fast * Math.exp(-slow * freqTime) -
+            slow * Math.exp(-fast * freqTime) -
+            target, (freqTime) => Math.exp(-fast * freqTime) - Math.exp(-slow * freqTime), criticalFreqTime) / criticalFreqTime);
+    }
     function calcAngularFreq(undampedFreq, dampingRatio) {
         return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
     }
@@ -1161,11 +1198,7 @@
         let envelope;
         let derivative;
         exports.warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
-        let dampingRatio = 1 - bounce;
-        /**
-         * Restrict dampingRatio and duration to within acceptable ranges.
-         */
-        dampingRatio = clamp(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
+        const dampingRatio = bounceToDampingRatio(bounce);
         duration = clamp(springDefaults.minDuration, springDefaults.maxDuration, millisecondsToSeconds(duration));
         if (dampingRatio < 1) {
             /**
@@ -1194,7 +1227,8 @@
         }
         else {
             /**
-             * Critically-damped spring
+             * Critically-damped spring. Overdamped springs reuse this root,
+             * scaled below.
              */
             envelope = (undampedFreq) => {
                 const a = Math.exp(-undampedFreq * duration);
@@ -1208,7 +1242,9 @@
             };
         }
         const initialGuess = 5 / duration;
-        const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
+        const criticalFreq = approximateRoot(envelope, derivative, initialGuess);
+        const undampedFreq = criticalFreq *
+            overdampedFreqScale(dampingRatio, criticalFreq * duration);
         const stiffness = undampedFreq * undampedFreq;
         return {
             stiffness,
@@ -1258,12 +1294,12 @@
         };
         if (springOptions.isTimeDefined) {
             if (options.visualDuration) {
-                const root = (2 * Math.PI) / (options.visualDuration * 1.2);
+                const dampingRatio = bounceToDampingRatio(options.bounce || 0);
+                const root = ((2 * Math.PI) / (options.visualDuration * 1.2)) *
+                    overdampedFreqScale(dampingRatio, (2 * Math.PI) / 1.2);
                 springOptions.stiffness = root * root;
                 springOptions.damping =
-                    2 *
-                        clamp(0.05, 1, 1 - (options.bounce || 0)) *
-                        Math.sqrt(springOptions.stiffness);
+                    2 * dampingRatio * Math.sqrt(springOptions.stiffness);
             }
             else {
                 Object.assign(springOptions, findSpring(springOptions));
@@ -1398,31 +1434,32 @@
                 (undampedAngularFreq * c.C * t - s.velocity);
         }
         else {
-            // Overdamped spring
+            /**
+             * Overdamped spring: the sum of a slow and a fast decaying
+             * exponential, so no term can overflow however heavily it's damped.
+             */
             const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
-            resolveSpring = (t) => {
-                const envelope = Math.exp(-decay * t);
-                // When performing sinh or cosh values can hit Infinity so we cap them here
-                const freqForT = Math.min(dampedAngularFreq * t, 300);
-                return (s.target -
-                    (envelope *
-                        ((s.velocity + decay * s.delta) * Math.sinh(freqForT) +
-                            dampedAngularFreq * s.delta * Math.cosh(freqForT))) /
-                        dampedAngularFreq);
-            };
-            // Analytical derivative of overdamped spring (px/ms)
-            const c = { P: 0, sinh: 0, cosh: 0 };
+            const slow = decay - dampedAngularFreq;
+            const fast = decay + dampedAngularFreq;
+            /**
+             * Physics-defined springs keep a non-physical limit: once
+             * dampedAngularFreq * t passes 300, both terms decay at the damping
+             * rate. Heavily overdamped drag springs (dragElastic: 0,
+             * dragTransition) rely on this to settle almost at once rather than
+             * creep at stiffness / damping. Negative bounce needs the exact
+             * curve, so time-defined springs are exempt.
+             */
+            const limit = isTimeDefined ? Infinity : 300 / dampedAngularFreq;
+            const decayAt = (rate, t) => Math.exp(t > limit ? -rate * limit - decay * (t - limit) : -rate * t);
+            const c = { S: 0, F: 0 };
             update = () => {
-                c.P = (s.velocity + decay * s.delta) / dampedAngularFreq;
-                c.sinh = decay * c.P - s.delta * dampedAngularFreq;
-                c.cosh = decay * s.delta - c.P * dampedAngularFreq;
-            };
-            resolveVelocity = (t) => {
-                const envelope = Math.exp(-decay * t);
-                const freqForT = Math.min(dampedAngularFreq * t, 300);
-                return (envelope *
-                    (c.sinh * Math.sinh(freqForT) + c.cosh * Math.cosh(freqForT)));
+                const P = (s.velocity + decay * s.delta) / dampedAngularFreq;
+                c.S = (s.delta + P) / 2;
+                c.F = (s.delta - P) / 2;
             };
+            resolveSpring = (t) => s.target - c.S * decayAt(slow, t) - c.F * decayAt(fast, t);
+            // Analytical derivative of overdamped spring (px/ms)
+            resolveVelocity = (t) => slow * c.S * decayAt(slow, t) + fast * c.F * decayAt(fast, t);
         }
         update();
         const calculatedDuration = isResolvedFromDuration ? duration || null : null;
@@ -3000,17 +3037,17 @@
         /**
          * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
          */
-        attachTimeline({ timeline, rangeStart, rangeEnd, observe, }) {
+        attachTimeline({ timeline, onAttach, observe, 
+        // Deprecated rangeStart/rangeEnd from framer-motion 13.0–13.4. Removed in v14.
+        ...range }) {
             if (this.allowFlatten) {
                 this.animation.effect?.updateTiming({ easing: "linear" });
             }
             this.animation.onfinish = null;
             if (timeline && supportsScrollTimeline()) {
                 this.animation.timeline = timeline;
-                if (rangeStart)
-                    this.animation.rangeStart = rangeStart;
-                if (rangeEnd)
-                    this.animation.rangeEnd = rangeEnd;
+                Object.assign(this.animation, range);
+                onAttach?.(this.animation);
                 return noop;
             }
             else {
@@ -4347,36 +4384,29 @@
         return state;
     }
     function resolveVariantFromProps(props, definition, custom, visualElement) {
+        const resolveFunction = (def) => typeof def === "function"
+            ? def(custom !== undefined ? custom : props.custom, ...getValueState(visualElement))
+            : def;
         /**
-         * If the variant definition is a function, resolve.
-         */
-        if (typeof definition === "function") {
-            const [current, velocity] = getValueState(visualElement);
-            definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
-        }
-        /**
-         * If the variant definition is a variant label, or
-         * the function returned a variant label, resolve.
+         * Resolve a function, then a variant label (which the function may have
+         * returned), then a function again as the label may point to one. The
+         * final function can only return a target object.
          */
+        definition = resolveFunction(definition);
         if (typeof definition === "string") {
             definition = props.variants && props.variants[definition];
         }
-        /**
-         * At this point we've resolved both functions and variant labels,
-         * but the resolved variant label might itself have been a function.
-         * If so, resolve. This can only have returned a valid target object.
-         */
-        if (typeof definition === "function") {
-            const [current, velocity] = getValueState(visualElement);
-            definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
-        }
-        return definition;
+        return resolveFunction(definition);
     }
 
     function resolveVariant(visualElement, definition, custom) {
-        const props = visualElement.getProps();
-        return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement);
+        return resolveVariantFromProps(visualElement.getProps(), definition, custom, visualElement);
     }
+    /**
+     * Exit variants resolve with AnimatePresence's custom, every other type
+     * with the element's own.
+     */
+    const getTypeCustom = (visualElement, type) => type === "exit" ? visualElement.presenceContext?.custom : undefined;
 
     const positionalKeys = new Set([
         "width",
@@ -4459,7 +4489,7 @@
      * had been set to true in the meantime.
      */
     function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
-        const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
+        const shouldBlock = key in protectedKeys && !needsAnimating[key];
         needsAnimating[key] = false;
         return shouldBlock;
     }
@@ -4474,9 +4504,7 @@
         if (transitionOverride)
             transition = transitionOverride;
         const animations = [];
-        const animationTypeState = type &&
-            visualElement.animationState &&
-            visualElement.animationState.getState()[type];
+        const animationTypeState = type && visualElement.animationState?.getState()[type];
         const path = transition?.path;
         if (path) {
             // path mutates `target` to claim x/y; loop below skips them.
@@ -4550,75 +4578,46 @@
     }
 
     function animateVariant(visualElement, variant, options = {}) {
-        const resolved = resolveVariant(visualElement, variant, options.type === "exit"
-            ? visualElement.presenceContext?.custom
-            : undefined);
-        let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
-        if (options.transitionOverride) {
-            transition = options.transitionOverride;
-        }
-        /**
-         * If we have a variant, create a callback that runs it as an animation.
-         * Otherwise, we resolve a Promise immediately for a composable no-op.
-         */
-        const getAnimation = resolved
-            ? () => Promise.all(animateTarget(visualElement, resolved, options))
-            : () => Promise.resolve();
-        /**
-         * If we have children, create a callback that runs all their animations.
-         * Otherwise, we resolve a Promise immediately for a composable no-op.
-         */
-        const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
-            ? (forwardDelay = 0) => {
-                const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
-                return animateChildren(visualElement, variant, forwardDelay, delayChildren, staggerChildren, staggerDirection, options);
-            }
-            : () => Promise.resolve();
-        /**
-         * If the transition explicitly defines a "when" option, we need to resolve either
-         * this animation or all children animations before playing the other.
-         */
-        const { when } = transition;
-        if (when) {
-            const [first, last] = when === "beforeChildren"
-                ? [getAnimation, getChildAnimations]
-                : [getChildAnimations, getAnimation];
-            return first().then(() => last());
-        }
-        else {
-            return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
-        }
-    }
-    function animateChildren(visualElement, variant, delay = 0, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
-        const animations = [];
-        for (const child of visualElement.variantChildren) {
-            child.notify("AnimationStart", variant);
-            animations.push(animateVariant(child, variant, {
-                ...options,
-                delay: delay +
-                    (typeof delayChildren === "function" ? 0 : delayChildren) +
-                    calcChildStagger(visualElement.variantChildren, child, delayChildren, staggerChildren, staggerDirection),
-            }).then(() => child.notify("AnimationComplete", variant)));
-        }
-        return Promise.all(animations);
+        const resolved = resolveVariant(visualElement, variant, getTypeCustom(visualElement, options.type));
+        const transition = options.transitionOverride ||
+            (resolved?.transition ?? (visualElement.getDefaultTransition() || {}));
+        const getAnimation = () => Promise.all(resolved ? animateTarget(visualElement, resolved, options) : []);
+        const getChildAnimations = (delay = 0) => {
+            const { variantChildren } = visualElement;
+            const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
+            const animations = [];
+            variantChildren?.forEach((child) => {
+                child.notify("AnimationStart", variant);
+                animations.push(animateVariant(child, variant, {
+                    ...options,
+                    delay: delay +
+                        (typeof delayChildren === "function"
+                            ? 0
+                            : delayChildren) +
+                        calcChildStagger(variantChildren, child, delayChildren, staggerChildren, staggerDirection),
+                }).then(() => child.notify("AnimationComplete", variant)));
+            });
+            return Promise.all(animations);
+        };
+        /**
+         * when: "beforeChildren" | "afterChildren" runs this element's animation
+         * and its children's in sequence.
+         */
+        const { when } = transition;
+        return when
+            ? when === "beforeChildren"
+                ? getAnimation().then(() => getChildAnimations())
+                : getChildAnimations().then(getAnimation)
+            : Promise.all([getAnimation(), getChildAnimations(options.delay)]);
     }
 
     function animateVisualElement(visualElement, definition, options = {}) {
         visualElement.notify("AnimationStart", definition);
-        let animation;
-        if (Array.isArray(definition)) {
-            const animations = definition.map((variant) => animateVariant(visualElement, variant, options));
-            animation = Promise.all(animations);
-        }
-        else if (typeof definition === "string") {
-            animation = animateVariant(visualElement, definition, options);
-        }
-        else {
-            const resolvedDefinition = typeof definition === "function"
-                ? resolveVariant(visualElement, definition, options.custom)
-                : definition;
-            animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));
-        }
+        const animation = Array.isArray(definition)
+            ? Promise.all(definition.map((variant) => animateVariant(visualElement, variant, options)))
+            : typeof definition === "string"
+                ? animateVariant(visualElement, definition, options)
+                : Promise.all(animateTarget(visualElement, resolveVariant(visualElement, definition, options.custom), options));
         return animation.then(() => {
             visualElement.notify("AnimationComplete", definition);
         });
@@ -5144,7 +5143,12 @@
             const onRemove = () => {
                 cancelOnChange();
                 render && !computed && this.cancel(render);
-                this.values.delete(name);
+                /**
+                 * A later set() of the same name has already removed this
+                 * entry, so leave the one that replaced it.
+                 */
+                this.values.get(name)?.onRemove === onRemove &&
+                    this.values.delete(name);
             };
             this.values.set(name, {
                 value,
@@ -5623,24 +5627,35 @@
         else if (key.startsWith("attr")) {
             return addAttrValue(element, state, key, value, convertAttrKey(key));
         }
-        const handler = isCSSVar(key) || key in element.style ? addStyleValue : addAttrValue;
+        /**
+         * Transforms and origins aren't CSS properties (bar `x`/`y` in some
+         * browsers), so check them by name rather than `key in element.style`.
+         */
+        const handler = transformProps.has(key) ||
+            originProps.has(key) ||
+            isCSSVar(key) ||
+            key in element.style
+            ? addStyleValue
+            : addAttrValue;
         return handler(element, state, key, value);
     };
     /**
      * Reads the current value of `key` from an SVG element as the origin of
      * an animation, as the SVG VisualElement does: transforms start from
      * their defaults, CSS variables and the few CSS-only properties come from
-     * computed style
-     * and everything else is read from the attribute, dash-cased
-     * (`strokeWidth` -> `stroke-width`) or, failing that, as written
-     * (`baseFrequency`).
+     * computed style, falling back to the attribute when that's empty (e.g.
+     * the element isn't rendered), and everything else is read from the
+     * attribute, dash-cased (`strokeWidth` -> `stroke-width`) or, failing
+     * that, as written (`baseFrequency`).
      */
     const readSVGValue = (element, key) => {
         if (transformProps.has(key)) {
             return numberValueTypes[key]?.default || 0;
         }
         if (isCSSVar(key) || cssStyleProperties.includes(key)) {
-            return readStyleValue(element, key);
+            return (readStyleValue(element, key) ||
+                element.getAttribute(camelToDash(key)) ||
+                0);
         }
         key = convertAttrKey(key);
         return (element.getAttribute(camelToDash(key)) ??
@@ -6343,6 +6358,10 @@
         return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
     }
 
+    /**
+     * @deprecated Kept because framer-motion 13.0–13.4 import it from
+     * motion-dom with a ^ range. Removed in v14.
+     */
     function observeTimeline(update, timeline) {
         let prevProgress;
         const onFrame = () => {
@@ -6471,8 +6490,7 @@
                 this.options.onStop?.();
             };
             this.options = options;
-            replaceTransitionType(options);
-            this.factory = options.type || keyframes;
+            this.factory = options.type;
             this.generator = this.factory(options);
             const { driver } = options;
             if (driver)
@@ -6573,41 +6591,15 @@
         }
     }
 
+    const asNumber = (v) => typeof v === "number" ? v : parseFloat(v);
+
     /**
-     * Create a `MotionValue` that animates to its latest value using any transition type.
-     * Can either be a value or track another `MotionValue`.
-     *
-     * ```jsx
-     * const x = motionValue(0)
-     * const y = followValue(x, { type: "spring", stiffness: 300 })
-     * // or with tween
-     * const z = followValue(x, { type: "tween", duration: 0.5, ease: "easeOut" })
-     * ```
-     *
-     * @param source - Initial value or MotionValue to track
-     * @param options - Animation transition options
-     * @returns `MotionValue`
-     *
-     * @public
-     */
-    function followValue(source, options) {
-        const initialValue = isMotionValue(source) ? source.get() : source;
-        const value = motionValue(initialValue);
-        attachFollow(value, source, options);
-        return value;
-    }
-    /**
-     * Attach an animation to a MotionValue that will animate whenever the value changes.
-     * Similar to attachSpring but supports any transition type (spring, tween, inertia, etc.)
-     *
-     * @param value - The MotionValue to animate
-     * @param source - Initial value or MotionValue to track
-     * @param options - Animation transition options
-     * @returns Cleanup function
-     *
-     * @public
+     * Animate `value` to its latest value with the generator in
+     * `options.type`, tracking `source` if it's a `MotionValue`. Takes a
+     * generator rather than a type name, so spring-only callers don't
+     * bundle every generator.
      */
-    function attachFollow(value, source, options = {}) {
+    function follow(value, source, options) {
         const initialValue = value.get();
         let activeAnimation = null;
         let set;
@@ -6625,7 +6617,7 @@
         };
         value.attach((v, safeSet) => {
             set = safeSet;
-            const target = asNumber$1(v);
+            const target = asNumber(v);
             if (activeAnimation?.state === "running") {
                 /**
                  * Steer the running animation rather than replacing it. This
@@ -6636,7 +6628,7 @@
                 activeAnimation.setTarget(target, options.velocity);
                 return;
             }
-            const current = asNumber$1(value.get());
+            const current = asNumber(value.get());
             const velocity = activeAnimation
                 ? activeAnimation.getGeneratorVelocity()
                 : value.getVelocity();
@@ -6647,8 +6639,6 @@
             const animationOptions = {
                 keyframes: [current, target],
                 velocity,
-                // Default to spring if no type specified (matches useSpring behavior)
-                type: "spring",
                 restDelta: 0.001,
                 restSpeed: 0.01,
                 ...options,
@@ -6690,8 +6680,47 @@
     function parseValue(v, unit) {
         return unit ? v + unit : v;
     }
-    function asNumber$1(v) {
-        return typeof v === "number" ? v : parseFloat(v);
+
+    /**
+     * Create a `MotionValue` that animates to its latest value using any transition type.
+     * Can either be a value or track another `MotionValue`.
+     *
+     * ```jsx
+     * const x = motionValue(0)
+     * const y = followValue(x, { type: "spring", stiffness: 300 })
+     * // or with tween
+     * const z = followValue(x, { type: "tween", duration: 0.5, ease: "easeOut" })
+     * ```
+     *
+     * @param source - Initial value or MotionValue to track
+     * @param options - Animation transition options
+     * @returns `MotionValue`
+     *
+     * @public
+     */
+    function followValue(source, options) {
+        const initialValue = isMotionValue(source) ? source.get() : source;
+        const value = motionValue(initialValue);
+        attachFollow(value, source, options);
+        return value;
+    }
+    /**
+     * Attach an animation to a MotionValue that will animate whenever the value changes.
+     * Similar to attachSpring but supports any transition type (spring, tween, inertia, etc.)
+     *
+     * @param value - The MotionValue to animate
+     * @param source - Initial value or MotionValue to track
+     * @param options - Animation transition options
+     * @returns Cleanup function
+     *
+     * @public
+     */
+    function attachFollow(value, source, options = {}) {
+        // Default to spring if no type specified (matches useSpring behavior)
+        const transition = { type: "spring", ...options };
+        replaceTransitionType(transition);
+        transition.type = transition.type || keyframes;
+        return follow(value, source, transition);
     }
 
     function subscribeValue(inputValues, outputValue, getLatest) {
@@ -6793,7 +6822,9 @@
      * @public
      */
     function springValue(source, options) {
-        return followValue(source, { type: "spring", ...options });
+        const value = motionValue(isMotionValue(source) ? source.get() : source);
+        attachSpring(value, source, options);
+        return value;
     }
     /**
      * Attach a spring animation to a MotionValue that will animate whenever the value changes.
@@ -6806,7 +6837,7 @@
      * @public
      */
     function attachSpring(value, source, options) {
-        return attachFollow(value, source, { type: "spring", ...options });
+        return follow(value, source, { ...options, type: spring });
     }
 
     /**
@@ -8228,8 +8259,20 @@
             if (this.projection && !this.projection.instance) {
                 this.projection.mount(instance);
             }
-            if (this.parent && this.isVariantNode && !this.isControllingVariants) {
-                this.removeFromVariantTree = this.parent.addVariantChild(this);
+            /**
+             * Join the closest variant node above, so its variant changes
+             * propagate here, unless inherit={false} cuts the chain.
+             */
+            if (this.isVariantNode && !this.isControllingVariants) {
+                let node = this;
+                do
+                    node = node.props.inherit !== false && node.parent;
+                while (node && !node.isVariantNode);
+                if (node) {
+                    const { variantChildren } = node;
+                    variantChildren.add(this);
+                    this.removeFromVariantTree = () => variantChildren.delete(this);
+                }
             }
             this.values.forEach((value, key) => this.bindToMotionValue(key, value));
             /**
@@ -8339,9 +8382,11 @@
         }
         sortNodePosition(other) {
             /**
-             * If these nodes aren't even of the same type we can't compare their depth.
+             * If either node isn't mounted, or they aren't even of the same type,
+             * we can't compare their document order.
              */
             if (!this.current ||
+                !other.current ||
                 !this.sortInstanceNodePosition ||
                 this.type !== other.type) {
                 return 0;
@@ -8447,24 +8492,6 @@
         getTransformPagePoint() {
             return this.props.transformPagePoint;
         }
-        getClosestVariantNode() {
-            return this.isVariantNode
-                ? this
-                : this.parent
-                    ? this.parent.getClosestVariantNode()
-                    : undefined;
-        }
-        /**
-         * Add a child visual element to our set of children.
-         */
-        addVariantChild(child) {
-            const closestVariantNode = this.getClosestVariantNode();
-            if (closestVariantNode) {
-                closestVariantNode.variantChildren &&
-                    closestVariantNode.variantChildren.add(child);
-                return () => closestVariantNode.variantChildren.delete(child);
-            }
-        }
         /**
          * Add a motion value and bind it to this visual element.
          */
@@ -8476,7 +8503,15 @@
                     this.removeValue(key);
                 this.bindToMotionValue(key, value);
                 this.values.set(key, value);
-                this.latestValues[key] = value.get();
+                /**
+                 * An animated value with no base value is undefined until the
+                 * keyframe resolver reads its origin. Rendering it before then
+                 * writes an invalid placeholder (e.g. points="undefined") that
+                 * the resolver can read back from the DOM as the origin.
+                 */
+                const latest = value.get();
+                if (latest !== undefined)
+                    this.latestValues[key] = latest;
             }
         }
         /**
@@ -8504,7 +8539,9 @@
             }
             let value = this.values.get(key);
             if (value === undefined && defaultValue !== undefined) {
-                value = motionValue(defaultValue === null ? undefined : defaultValue, { owner: this });
+                value = motionValue(defaultValue ?? this.getDefaultValue?.(key), {
+                    owner: this,
+                });
                 this.addValue(key, value);
             }
             return value;
@@ -8549,41 +8586,6 @@
         setBaseTarget(key, value) {
             this.baseTarget[key] = value;
         }
-        /**
-         * Find the base target for a value thats been removed from all animation
-         * props.
-         */
-        getBaseTarget(key) {
-            const { initial } = this.props;
-            let valueFromInitial;
-            if (typeof initial === "string" || typeof initial === "object") {
-                const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom);
-                if (variant) {
-                    valueFromInitial = variant[key];
-                }
-            }
-            /**
-             * If this value still exists in the current initial variant, read that.
-             */
-            if (initial && valueFromInitial !== undefined) {
-                return valueFromInitial;
-            }
-            /**
-             * Alternatively, if this VisualElement config has defined a getBaseTarget
-             * so we can read the value from an alternative source, try that.
-             */
-            const target = this.getBaseTargetFromProps(this.props, key);
-            if (target !== undefined && !isMotionValue(target))
-                return target;
-            /**
-             * If the value was initially defined on initial, but it doesn't any more,
-             * return undefined. Otherwise return the value as initially read from the DOM.
-             */
-            return this.initialValues[key] !== undefined &&
-                valueFromInitial === undefined
-                ? undefined
-                : this.baseTarget[key];
-        }
         on(eventName, callback) {
             if (!this.events[eventName]) {
                 this.events[eventName] = new SubscriptionManager();
@@ -8666,86 +8668,7 @@
         }
     }
 
-    function pixelsToPercent(pixels, axis) {
-        if (axis.max === axis.min)
-            return 0;
-        return (pixels / (axis.max - axis.min)) * 100;
-    }
-    /**
-     * We always correct borderRadius as a percentage rather than pixels to reduce paints.
-     * For example, if you are projecting a box that is 100px wide with a 10px borderRadius
-     * into a box that is 200px wide with a 20px borderRadius, that is actually a 10%
-     * borderRadius in both states. If we animate between the two in pixels that will trigger
-     * a paint each time. If we animate between the two in percentage we'll avoid a paint.
-     */
-    const correctBorderRadius = {
-        correct: (latest, node) => {
-            if (!node.target)
-                return latest;
-            /**
-             * If latest is a string, if it's a percentage we can return immediately as it's
-             * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
-             */
-            if (typeof latest === "string") {
-                if (px.test(latest)) {
-                    latest = parseFloat(latest);
-                }
-                else {
-                    return latest;
-                }
-            }
-            /**
-             * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that
-             * pixel value as a percentage of each axis
-             */
-            const x = pixelsToPercent(latest, node.target.x);
-            const y = pixelsToPercent(latest, node.target.y);
-            return `${x}% ${y}%`;
-        },
-    };
-
-    const correctBoxShadow = {
-        correct: (latest, { treeScale, projectionDelta }) => {
-            const original = latest;
-            const shadow = complex.parse(latest);
-            // TODO: Doesn't support multiple shadows
-            if (shadow.length > 5)
-                return original;
-            const template = complex.createTransformer(latest);
-            const offset = typeof shadow[0] !== "number" ? 1 : 0;
-            // Calculate the overall context scale
-            const xScale = projectionDelta.x.scale * treeScale.x;
-            const yScale = projectionDelta.y.scale * treeScale.y;
-            shadow[0 + offset] /= xScale;
-            shadow[1 + offset] /= yScale;
-            /**
-             * Ideally we'd correct x and y scales individually, but because blur and
-             * spread apply to both we have to take a scale average and apply that instead.
-             * We could potentially improve the outcome of this by incorporating the ratio between
-             * the two scales.
-             */
-            const averageScale = mixNumber$1(xScale, yScale, 0.5);
-            // Blur
-            if (typeof shadow[2 + offset] === "number")
-                shadow[2 + offset] /= averageScale;
-            // Spread
-            if (typeof shadow[3 + offset] === "number")
-                shadow[3 + offset] /= averageScale;
-            return template(shadow);
-        },
-    };
-
-    const scaleCorrectors = {
-        borderRadius: {
-            ...correctBorderRadius,
-            applyTo: [...cornerRadiusProps],
-        },
-        borderTopLeftRadius: correctBorderRadius,
-        borderTopRightRadius: correctBorderRadius,
-        borderBottomLeftRadius: correctBorderRadius,
-        borderBottomRightRadius: correctBorderRadius,
-        boxShadow: correctBoxShadow,
-    };
+    const scaleCorrectors = {};
     function addScaleCorrector(correctors) {
         for (const key in correctors) {
             scaleCorrectors[key] = correctors[key];
@@ -8919,7 +8842,24 @@
             this.measureInstanceViewportBox = createBox;
         }
         getBaseTargetFromProps(props, key) {
-            return props[key];
+            /**
+             * An independent transform's base is never an attribute of the same
+             * name, e.g. <rect x> is a position, not a translate. Like HTML it
+             * comes from style, falling back to the transform's default.
+             */
+            return transformProps.has(key)
+                ? super.getBaseTargetFromProps(props, key) ??
+                    defaultTransformValue(key)
+                : props[key];
+        }
+        /**
+         * An independent transform's origin is never read from the DOM, so it
+         * starts from its latest or default value and renders on mount.
+         */
+        getDefaultValue(key) {
+            return transformProps.has(key)
+                ? this.latestValues[key] ?? defaultTransformValue(key)
+                : undefined;
         }
         readValueFromInstance(instance, key) {
             if (transformProps.has(key)) {
@@ -8950,34 +8890,6 @@
         }
     }
 
-    const numVariantProps = variantProps.length;
-    /**
-     * Get variant context from a visual element's parent chain.
-     * Uses `any` type for visualElement to avoid circular dependencies.
-     */
-    function getVariantContext(visualElement) {
-        if (!visualElement)
-            return undefined;
-        if (!visualElement.isControllingVariants) {
-            const context = visualElement.parent
-                ? getVariantContext(visualElement.parent) || {}
-                : {};
-            if (visualElement.props.initial !== undefined) {
-                context.initial = visualElement.props.initial;
-            }
-            return context;
-        }
-        const context = {};
-        for (let i = 0; i < numVariantProps; i++) {
-            const name = variantProps[i];
-            const prop = visualElement.props[name];
-            if (isVariantLabel(prop) || prop === false) {
-                context[name] = prop;
-            }
-        }
-        return context;
-    }
-
     function shallowCompare(next, prev) {
         if (!Array.isArray(prev))
             return false;
@@ -8992,332 +8904,211 @@
     }
 
     const reversePriorityOrder = [...variantPriorityOrder].reverse();
-    const numAnimationTypes = variantPriorityOrder.length;
-    function createAnimateFunction(visualElement) {
-        return (animations) => {
-            return Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));
-        };
-    }
+    /**
+     * Diffs the element's animation props (one layer per AnimationType, highest
+     * priority wins each value) against the previous call and starts animations
+     * for what changed.
+     *
+     * Uses `any` type for visualElement to avoid circular dependencies. It reads
+     * props, parent, presenceContext, variantChildren, enteringChildren,
+     * manuallyAnimateOnMount, blockInitialAnimation, getValue(),
+     * getBaseTargetFromProps(), baseTarget and initialValues.
+     */
     function createAnimationState(visualElement) {
-        let animate = createAnimateFunction(visualElement);
+        let animate = (animations) => Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));
         let state = createState();
         let isInitialRender = true;
         /**
-         * Track whether the animation state has been reset (e.g. via StrictMode
-         * double-invocation or Suspense unmount/remount). On the first
-         * animateChanges() call after a reset we need to behave like the initial
-         * render for variant-inheritance checks, even though isInitialRender is
-         * already false.
+         * After a reset (StrictMode, Suspense, AnimatePresence re-entry) the next
+         * animateChanges() mounts again, but initial={false} no longer applies.
          */
         let wasReset = false;
-        /**
-         * This function will be used to reduce the animation definitions for
-         * each active animation type into an object of resolved values for it.
-         */
-        const buildResolvedTypeValues = (type) => (acc, definition) => {
-            const resolved = resolveVariant(visualElement, definition, type === "exit"
-                ? visualElement.presenceContext?.custom
-                : undefined);
-            if (resolved) {
-                const { transition, transitionEnd, ...target } = resolved;
-                acc = { ...acc, ...target, ...transitionEnd };
-            }
-            return acc;
-        };
-        /**
-         * This just allows us to inject mocked animation functions
-         * @internal
-         */
-        function setAnimateFunction(makeAnimator) {
-            animate = makeAnimator(visualElement);
-        }
-        /**
-         * When we receive new props, we need to:
-         * 1. Create a list of protected keys for each type. This is a directory of
-         *    value keys that are currently being "handled" by types of a higher priority
-         *    so that whenever an animation is played of a given type, these values are
-         *    protected from being animated.
-         * 2. Determine if an animation type needs animating.
-         * 3. Determine if any values have been removed from a type and figure out
-         *    what to animate those to.
-         */
         function animateChanges(changedActiveType) {
-            const { props } = visualElement;
-            const context = getVariantContext(visualElement.parent) || {};
-            /**
-             * A list of animations that we'll build into as we iterate through the animation
-             * types. This will get executed at the end of the function.
-             */
+            const { props, parent, manuallyAnimateOnMount } = visualElement;
+            const isMounting = isInitialRender || wasReset;
             const animations = [];
             /**
-             * Keep track of which values have been removed. Then, as we hit lower priority
-             * animation types, we can check if they contain removed values and animate to that.
+             * Values removed from a type. A lower-priority type that defines
+             * them animates them back, otherwise they fall back to a base target.
              */
             const removedKeys = new Set();
             /**
-             * A dictionary of all encountered keys. This is an object to let us build into and
-             * copy it without iteration. Each time we hit an animation type we set its protected
-             * keys - the keys its not allowed to animate - to the latest version of this object.
+             * Values claimed by active, higher-priority types.
              */
             let encounteredKeys = {};
             /**
-             * If a variant has been removed at a given index, and this component is controlling
-             * variant animations, we want to ensure lower-priority variants are forced to animate.
+             * Once a type has been deactivated, lower-priority variant labels
+             * re-animate so variant children animate back too.
              */
             let removedVariantIndex = Infinity;
             /**
-             * Iterate through all animation types in reverse priority order. For each, we want to
-             * detect which values it's handling and whether or not they've changed (and therefore
-             * need to be animated). If any values have been removed, we want to detect those in
-             * lower priority props and flag for animation.
+             * Variant labels are inherited from the closest variant-controlling
+             * ancestor, unless an element on the way has inherit={false}.
              */
-            for (let i = 0; i < numAnimationTypes; i++) {
-                const type = reversePriorityOrder[i];
+            let source = visualElement;
+            do
+                source = source.props.inherit !== false && source.parent;
+            while (source && !source.isControllingVariants);
+            reversePriorityOrder.forEach((type, i) => {
                 const typeState = state[type];
-                const prop = props[type] !== undefined
-                    ? props[type]
-                    : context[type];
+                const ownProp = props[type];
+                const inheritedProp = source && source.props[type];
+                const prop = ownProp !== undefined
+                    ? ownProp
+                    : isVariantLabel(inheritedProp) || inheritedProp === false
+                        ? inheritedProp
+                        : undefined;
                 const propIsVariant = isVariantLabel(prop);
-                /**
-                 * If this type has *just* changed isActive status, set activeDelta
-                 * to that status. Otherwise set to null.
-                 */
                 const activeDelta = type === changedActiveType ? typeState.isActive : null;
                 if (activeDelta === false)
                     removedVariantIndex = i;
                 /**
-                 * If this prop is an inherited variant, rather than been set directly on the
-                 * component itself, we want to make sure we allow the parent to trigger animations.
-                 *
-                 * TODO: Can probably change this to a !isControllingVariants check
-                 */
-                let isInherited = prop === context[type] &&
-                    prop !== props[type] &&
-                    propIsVariant;
-                if (isInherited &&
-                    (isInitialRender || wasReset) &&
-                    visualElement.manuallyAnimateOnMount) {
-                    isInherited = false;
-                }
-                /**
-                 * 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-priority types.
+                 * Inherited labels are animated by the parent through
+                 * variantChildren, unless this element mounted after its parent.
                  */
+                const isInherited = propIsVariant &&
+                    ownProp === undefined &&
+                    !(isMounting && manuallyAnimateOnMount);
                 typeState.protectedKeys = { ...encounteredKeys };
-                // Check if we can skip analysing this prop early
-                if (
-                // If it isn't active and hasn't *just* been set as inactive
-                (!typeState.isActive && activeDelta === null) ||
-                    // If we didn't and don't have any defined prop for this animation type
+                if ((!typeState.isActive && activeDelta === null) ||
                     (!prop && !typeState.prevProp) ||
-                    // Or if the prop doesn't define an animation
                     isAnimationControls(prop) ||
-                    typeof prop === "boolean") {
-                    continue;
-                }
-                /**
-                 * If exit is already active and wasn't just activated, skip
-                 * re-processing to prevent interrupting running exit animations.
-                 * Re-resolving exit with a changed custom value can start new
-                 * value animations that stop the originals, leaving the exit
-                 * animation promise unresolved and the component stuck in the DOM.
-                 */
-                if (type === "exit" && typeState.isActive && activeDelta !== true) {
-                    if (typeState.prevResolvedValues) {
-                        encounteredKeys = {
-                            ...encounteredKeys,
-                            ...typeState.prevResolvedValues,
-                        };
-                    }
-                    continue;
+                    typeof prop === "boolean") {
+                    return;
                 }
                 /**
-                 * As we go look through the values defined on this type, if we detect
-                 * a changed value or a value that was removed in a higher priority, we set
-                 * this to true and add this prop to the animation list.
+                 * Don't re-resolve a running exit: a changed custom would start
+                 * new value animations that stop the originals, leaving the exit
+                 * promise unresolved and the element stuck in the DOM.
                  */
+                if (type === "exit" && typeState.isActive && activeDelta !== true) {
+                    encounteredKeys = {
+                        ...encounteredKeys,
+                        ...typeState.prevResolvedValues,
+                    };
+                    return;
+                }
                 const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
                 let shouldAnimateType = variantDidChange ||
-                    // If we're making this variant active, we want to always make it active
-                    (type === changedActiveType &&
-                        typeState.isActive &&
-                        !isInherited &&
-                        propIsVariant) ||
-                    // If we removed a higher-priority variant (i is in reverse order)
-                    (i > removedVariantIndex && propIsVariant);
+                    (propIsVariant &&
+                        ((activeDelta && !isInherited) || i > removedVariantIndex));
                 let handledRemovedValues = false;
-                /**
-                 * As animations can be set as variant lists, variants or target objects, we
-                 * coerce everything to an array if it isn't one already
-                 */
                 const definitionList = Array.isArray(prop) ? prop : [prop];
-                /**
-                 * Build an object of all the resolved values. We'll use this in the subsequent
-                 * animateChanges calls to determine whether a value has changed.
-                 */
-                let resolvedValues = definitionList.reduce(buildResolvedTypeValues(type), {});
-                if (activeDelta === false)
-                    resolvedValues = {};
-                /**
-                 * Now we need to loop through all the keys in the prev prop and this prop,
-                 * and decide:
-                 * 1. If the value has changed, and needs animating
-                 * 2. If it has been removed, and needs adding to the removedKeys set
-                 * 3. If it has been removed in a higher priority type and needs animating
-                 * 4. If it hasn't been removed in a higher priority but hasn't changed, and
-                 *    needs adding to the type's protectedKeys list.
-                 */
-                const { prevResolvedValues = {} } = typeState;
-                const allKeys = {
-                    ...prevResolvedValues,
-                    ...resolvedValues,
-                };
-                const markToAnimate = (key) => {
-                    shouldAnimateType = true;
-                    if (removedKeys.has(key)) {
-                        handledRemovedValues = true;
-                        removedKeys.delete(key);
+                let resolvedValues = {};
+                if (activeDelta !== false) {
+                    for (const definition of definitionList) {
+                        const { transition, transitionEnd, ...target } = resolveVariant(visualElement, definition, getTypeCustom(visualElement, type)) || {};
+                        resolvedValues = {
+                            ...resolvedValues,
+                            ...target,
+                            ...transitionEnd,
+                        };
                     }
-                    typeState.needsAnimating[key] = true;
-                    const motionValue = visualElement.getValue(key);
-                    if (motionValue)
-                        motionValue.liveStyle = false;
-                };
-                for (const key in allKeys) {
+                }
+                const { prevResolvedValues } = typeState;
+                for (const key in { ...prevResolvedValues, ...resolvedValues }) {
+                    if (key in encounteredKeys)
+                        continue;
                     const next = resolvedValues[key];
                     const prev = prevResolvedValues[key];
-                    // If we've already handled this we can just skip ahead
-                    if (encounteredKeys.hasOwnProperty(key))
-                        continue;
                     /**
-                     * If the value has changed, we probably want to animate it.
+                     * Keyframes compare by value, but replay whenever the
+                     * variant label changed.
                      */
-                    let valueHasChanged = false;
-                    if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {
-                        valueHasChanged =
-                            !shallowCompare(next, prev) || variantDidChange;
-                    }
-                    else {
-                        valueHasChanged = next !== prev;
-                    }
-                    if (valueHasChanged) {
-                        if (next !== undefined && next !== null) {
-                            // If next is defined and doesn't equal prev, it needs animating
-                            markToAnimate(key);
-                        }
-                        else {
-                            // If it's undefined, it's been removed.
-                            removedKeys.add(key);
-                        }
+                    const valueHasChanged = Array.isArray(next) && Array.isArray(prev)
+                        ? !shallowCompare(next, prev) || variantDidChange
+                        : next !== prev;
+                    if (valueHasChanged &&
+                        (next === undefined || next === null)) {
+                        removedKeys.add(key);
                     }
-                    else if (next !== undefined && removedKeys.has(key)) {
-                        /**
-                         * If next hasn't changed and it isn't undefined, we want to check if it's
-                         * been removed by a higher priority
-                         */
-                        markToAnimate(key);
+                    else if (valueHasChanged ||
+                        (next !== undefined && removedKeys.has(key))) {
+                        shouldAnimateType = true;
+                        if (removedKeys.delete(key))
+                            handledRemovedValues = true;
+                        typeState.needsAnimating[key] = true;
+                        const motionValue = visualElement.getValue(key);
+                        if (motionValue)
+                            motionValue.liveStyle = false;
                     }
                     else {
-                        /**
-                         * If it hasn't changed, we add it to the list of protected values
-                         * to ensure it doesn't get animated.
-                         */
                         typeState.protectedKeys[key] = true;
                     }
                 }
-                /**
-                 * Update the typeState so next time animateChanges is called we can compare the
-                 * latest prop and resolvedValues to these.
-                 */
                 typeState.prevProp = prop;
                 typeState.prevResolvedValues = resolvedValues;
                 if (typeState.isActive) {
                     encounteredKeys = { ...encounteredKeys, ...resolvedValues };
                 }
-                if ((isInitialRender || wasReset) &&
-                    visualElement.blockInitialAnimation) {
-                    shouldAnimateType = false;
-                }
-                /**
-                 * If this is an inherited prop we want to skip this animation
-                 * unless the inherited variants haven't changed on this render.
-                 */
-                const willAnimateViaParent = isInherited && variantDidChange;
-                const needsAnimating = !willAnimateViaParent || handledRemovedValues;
-                if (shouldAnimateType && needsAnimating) {
-                    animations.push(...definitionList.map((animation) => {
+                if (shouldAnimateType &&
+                    (!(isInherited && variantDidChange) || handledRemovedValues)) {
+                    for (const animation of definitionList) {
                         const options = { type };
                         /**
-                         * If we're performing the initial animation, but we're not
-                         * rendering at the same time as the variant-controlling parent,
-                         * we want to use the parent's transition to calculate the stagger.
+                         * Elements that mount into an already-mounted parent
+                         * animate themselves, staggered by the parent variant's
+                         * delayChildren.
                          */
                         if (typeof animation === "string" &&
-                            (isInitialRender || wasReset) &&
-                            !willAnimateViaParent &&
-                            visualElement.manuallyAnimateOnMount &&
-                            visualElement.parent) {
-                            const { parent } = visualElement;
-                            const parentVariant = resolveVariant(parent, animation);
-                            if (parent.enteringChildren && parentVariant) {
-                                const { delayChildren } = parentVariant.transition || {};
-                                options.delay = calcChildStagger(parent.enteringChildren, visualElement, delayChildren);
-                            }
+                            isMounting &&
+                            manuallyAnimateOnMount &&
+                            parent?.enteringChildren) {
+                            const delayChildren = resolveVariant(parent, animation)
+                                ?.transition?.delayChildren;
+                            options.delay = calcChildStagger(parent.enteringChildren, visualElement, delayChildren);
                         }
-                        return {
-                            animation: animation,
-                            options,
-                        };
-                    }));
+                        animations.push({ animation, options });
+                    }
                 }
-            }
+            });
             /**
-             * If there are some removed value that haven't been dealt with,
-             * we need to create a new animation that falls back either to the value
-             * defined in the style prop, or the last read value.
+             * Removed values that no lower-priority type defines animate back to
+             * initial, then style, then the value as first read. If initial no
+             * longer defines a value it once did, it stays where it is.
              */
             if (removedKeys.size) {
+                const { initial } = props;
                 const fallbackAnimation = {};
-                /**
-                 * If the initial prop contains a transition we can use that, otherwise
-                 * allow the animation function to use the visual element's default.
-                 */
-                if (typeof props.initial !== "boolean") {
-                    const initialTransition = resolveVariant(visualElement, Array.isArray(props.initial)
-                        ? props.initial[0]
-                        : props.initial);
-                    if (initialTransition && initialTransition.transition) {
-                        fallbackAnimation.transition = initialTransition.transition;
-                    }
+                const resolvedInitial = typeof initial !== "boolean" &&
+                    resolveVariant(visualElement, Array.isArray(initial) ? initial[0] : initial, visualElement.presenceContext?.custom);
+                if (resolvedInitial && resolvedInitial.transition) {
+                    fallbackAnimation.transition = resolvedInitial.transition;
                 }
                 removedKeys.forEach((key) => {
-                    const fallbackTarget = visualElement.getBaseTarget(key);
                     const motionValue = visualElement.getValue(key);
                     if (motionValue)
                         motionValue.liveStyle = true;
-                    // @ts-expect-error - @mattgperry to figure if we should do something here
-                    fallbackAnimation[key] = fallbackTarget ?? null;
+                    const fromInitial = resolvedInitial && !Array.isArray(initial)
+                        ? resolvedInitial[key]
+                        : undefined;
+                    const fromProps = visualElement.getBaseTargetFromProps(props, key);
+                    fallbackAnimation[key] =
+                        (fromInitial !== undefined
+                            ? fromInitial
+                            : fromProps !== undefined && !isMotionValue(fromProps)
+                                ? fromProps
+                                : visualElement.initialValues[key] === undefined
+                                    ? visualElement.baseTarget[key]
+                                    : undefined) ?? null;
                 });
                 animations.push({ animation: fallbackAnimation });
             }
-            let shouldAnimate = Boolean(animations.length);
-            if (isInitialRender &&
-                (props.initial === false || props.initial === props.animate) &&
-                !visualElement.manuallyAnimateOnMount) {
-                shouldAnimate = false;
-            }
-            isInitialRender = false;
-            wasReset = false;
-            return shouldAnimate ? animate(animations) : Promise.resolve();
+            const blockAnimation = (isMounting && visualElement.blockInitialAnimation) ||
+                (isInitialRender &&
+                    !manuallyAnimateOnMount &&
+                    (props.initial === false || props.initial === props.animate));
+            isInitialRender = wasReset = false;
+            return !blockAnimation && animations.length
+                ? animate(animations)
+                : Promise.resolve();
         }
         /**
          * Change whether a certain animation type is active.
          */
         function setActive(type, isActive) {
-            // 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
             visualElement.variantChildren?.forEach((child) => child.animationState?.setActive(type, isActive));
             state[type].isActive = isActive;
             const animations = animateChanges(type);
@@ -9329,7 +9120,13 @@
         return {
             animateChanges,
             setActive,
-            setAnimateFunction,
+            /**
+             * Allows tests to inject a mocked animate function.
+             * @internal
+             */
+            setAnimateFunction: (makeAnimator) => {
+                animate = makeAnimator(visualElement);
+            },
             getState: () => state,
             reset: () => {
                 state = createState();
@@ -9346,24 +9143,45 @@
         }
         return false;
     }
-    function createTypeState(isActive = false) {
-        return {
-            isActive,
-            protectedKeys: {},
-            needsAnimating: {},
-            prevResolvedValues: {},
-        };
-    }
     function createState() {
-        return {
-            animate: createTypeState(true),
-            whileInView: createTypeState(),
-            whileHover: createTypeState(),
-            whileTap: createTypeState(),
-            whileDrag: createTypeState(),
-            whileFocus: createTypeState(),
-            exit: createTypeState(),
-        };
+        const state = {};
+        for (const type of variantPriorityOrder) {
+            state[type] = {
+                isActive: type === "animate",
+                protectedKeys: {},
+                needsAnimating: {},
+                prevResolvedValues: {},
+            };
+        }
+        return state;
+    }
+
+    const numVariantProps = variantProps.length;
+    /**
+     * Get variant context from a visual element's parent chain.
+     * Uses `any` type for visualElement to avoid circular dependencies.
+     */
+    function getVariantContext(visualElement) {
+        if (!visualElement)
+            return undefined;
+        if (!visualElement.isControllingVariants) {
+            const context = visualElement.parent
+                ? getVariantContext(visualElement.parent) || {}
+                : {};
+            if (visualElement.props.initial !== undefined) {
+                context.initial = visualElement.props.initial;
+            }
+            return context;
+        }
+        const context = {};
+        for (let i = 0; i < numVariantProps; i++) {
+            const name = variantProps[i];
+            const prop = visualElement.props[name];
+            if (isVariantLabel(prop) || prop === false) {
+                context[name] = prop;
+            }
+        }
+        return context;
     }
 
     /**
@@ -9532,6 +9350,75 @@
         return [callback("x"), callback("y")];
     }
 
+    function pixelsToPercent(pixels, axis) {
+        if (axis.max === axis.min)
+            return 0;
+        return (pixels / (axis.max - axis.min)) * 100;
+    }
+    /**
+     * We always correct borderRadius as a percentage rather than pixels to reduce paints.
+     * For example, if you are projecting a box that is 100px wide with a 10px borderRadius
+     * into a box that is 200px wide with a 20px borderRadius, that is actually a 10%
+     * borderRadius in both states. If we animate between the two in pixels that will trigger
+     * a paint each time. If we animate between the two in percentage we'll avoid a paint.
+     */
+    const correctBorderRadius = {
+        correct: (latest, node) => {
+            if (!node.target)
+                return latest;
+            /**
+             * If latest is a string, if it's a percentage we can return immediately as it's
+             * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
+             */
+            if (typeof latest === "string") {
+                if (px.test(latest)) {
+                    latest = parseFloat(latest);
+                }
+                else {
+                    return latest;
+                }
+            }
+            /**
+             * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that
+             * pixel value as a percentage of each axis
+             */
+            const x = pixelsToPercent(latest, node.target.x);
+            const y = pixelsToPercent(latest, node.target.y);
+            return `${x}% ${y}%`;
+        },
+    };
+
+    const correctBoxShadow = {
+        correct: (latest, { treeScale, projectionDelta }) => {
+            const original = latest;
+            const shadow = complex.parse(latest);
+            // TODO: Doesn't support multiple shadows
+            if (shadow.length > 5)
+                return original;
+            const template = complex.createTransformer(latest);
+            const offset = typeof shadow[0] !== "number" ? 1 : 0;
+            // Calculate the overall context scale
+            const xScale = projectionDelta.x.scale * treeScale.x;
+            const yScale = projectionDelta.y.scale * treeScale.y;
+            shadow[0 + offset] /= xScale;
+            shadow[1 + offset] /= yScale;
+            /**
+             * Ideally we'd correct x and y scales individually, but because blur and
+             * spread apply to both we have to take a scale average and apply that instead.
+             * We could potentially improve the outcome of this by incorporating the ratio between
+             * the two scales.
+             */
+            const averageScale = mixNumber$1(xScale, yScale, 0.5);
+            // Blur
+            if (typeof shadow[2 + offset] === "number")
+                shadow[2 + offset] /= averageScale;
+            // Spread
+            if (typeof shadow[3 + offset] === "number")
+                shadow[3 + offset] /= averageScale;
+            return template(shadow);
+        },
+    };
+
     function buildProjectionTransform(delta, treeScale, latestTransform) {
         let transform = "";
         /**
@@ -9584,7 +9471,6 @@
     }
 
     const numBorders = cornerRadiusProps.length;
-    const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
     const isPx = (value) => typeof value === "number" || px.test(value);
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
         if (shouldCrossfadeOpacity) {
@@ -9783,6 +9669,18 @@
         }
     }
 
+    const defaultScaleCorrectors = {
+        borderRadius: {
+            ...correctBorderRadius,
+            applyTo: [...cornerRadiusProps],
+        },
+        borderTopLeftRadius: correctBorderRadius,
+        borderTopRightRadius: correctBorderRadius,
+        borderBottomLeftRadius: correctBorderRadius,
+        borderBottomRightRadius: correctBorderRadius,
+        boxShadow: correctBoxShadow,
+    };
+
     /**
      * This should only ever be modified on the client otherwise it'll
      * persist through server requests. If we need instanced states we
@@ -9801,6 +9699,14 @@
         hasEverUpdated: false,
     };
 
+    /**
+     * Correctors registered via addScaleCorrector before projection loaded
+     * (e.g. with an async LazyMotion bundle) take precedence over the defaults.
+     */
+    Object.assign(scaleCorrectors, {
+        ...defaultScaleCorrectors,
+        ...scaleCorrectors,
+    });
     const metrics = {
         nodes: 0,
         calculatedTargetDeltas: 0,
@@ -12556,12 +12462,6 @@
     };
     const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
 
-    function canUseNativeTimeline(target) {
-        if (typeof window === "undefined")
-            return false;
-        return target ? supportsViewTimeline() : supportsScrollTimeline();
-    }
-
     /**
      * A time in milliseconds, beyond which we consider the scroll velocity to be 0.
      */
@@ -12701,18 +12601,6 @@
     }
 
     const ScrollOffset = {
-        Enter: [
-            [0, 1],
-            [1, 1],
-        ],
-        Exit: [
-            [0, 0],
-            [1, 0],
-        ],
-        Any: [
-            [1, 0],
-            [0, 1],
-        ],
         All: [
             [0, 0],
             [1, 1],
@@ -12964,158 +12852,163 @@
         };
     }
 
-    /**
-     * Maps from ProgressIntersection pairs used by Motion's preset offsets to
-     * ViewTimeline named ranges. Returns undefined for unrecognised patterns,
-     * which signals the caller to fall back to JS-based scroll tracking.
-     */
-    const presets = [
-        [ScrollOffset.Enter, "entry"],
-        [ScrollOffset.Exit, "exit"],
-        [ScrollOffset.Any, "cover"],
-        [ScrollOffset.All, "contain"],
-    ];
-    const stringToProgress = {
-        start: 0,
-        end: 1,
-    };
-    function parseStringOffset(s) {
-        const parts = s.trim().split(/\s+/);
-        if (parts.length !== 2)
-            return undefined;
-        const a = stringToProgress[parts[0]];
-        const b = stringToProgress[parts[1]];
-        if (a === undefined || b === undefined)
-            return undefined;
-        return [a, b];
-    }
-    function normaliseOffset(offset) {
-        if (offset.length !== 2)
-            return undefined;
-        const result = [];
-        for (const item of offset) {
-            if (Array.isArray(item)) {
-                result.push(item);
-            }
-            else if (typeof item === "string") {
-                const parsed = parseStringOffset(item);
-                if (!parsed)
-                    return undefined;
-                result.push(parsed);
-            }
-            else {
-                return undefined;
-            }
-        }
-        return result;
-    }
-    function matchesPreset(offset, preset) {
-        const normalised = normaliseOffset(offset);
-        if (!normalised)
+    function canUseNativeTimeline(target) {
+        if (typeof window === "undefined")
             return false;
-        for (let i = 0; i < 2; i++) {
-            const o = normalised[i];
-            const p = preset[i];
-            if (o[0] !== p[0] || o[1] !== p[1])
-                return false;
-        }
-        return true;
-    }
-    function offsetToViewTimelineRange(offset) {
-        if (!offset) {
-            return { rangeStart: "contain 0%", rangeEnd: "contain 100%" };
-        }
-        for (const [preset, name] of presets) {
-            if (matchesPreset(offset, preset)) {
-                return { rangeStart: `${name} 0%`, rangeEnd: `${name} 100%` };
-            }
-        }
-        return undefined;
+        return target ? supportsViewTimeline() : supportsScrollTimeline();
     }
 
     const timelineCache = new Map();
-    function scrollTimelineFallback(options) {
-        const currentTime = { value: 0 };
-        const cancel = scrollInfo((info) => {
-            currentTime.value = info[options.axis].progress * 100;
-        }, options);
-        return { currentTime, cancel };
-    }
-    function getTimeline({ container, ...options }) {
-        const { axis } = options;
+    /**
+     * Native timelines are only attached to WAAPI animations. Offsets are
+     * applied to each animation as a range, so a timeline is shared by every
+     * offset.
+     */
+    function getTimeline({ container, target, axis, }) {
         let containerCache = timelineCache.get(container);
         if (!containerCache) {
             containerCache = new Map();
             timelineCache.set(container, containerCache);
         }
-        const targetKey = options.target ?? "self";
+        const targetKey = target ?? "self";
         let targetCache = containerCache.get(targetKey);
         if (!targetCache) {
             targetCache = {};
             containerCache.set(targetKey, targetCache);
         }
-        const axisKey = axis + (options.offset ?? []).join(",");
-        if (!targetCache[axisKey]) {
-            if (options.target && canUseNativeTimeline(options.target)) {
-                const range = offsetToViewTimelineRange(options.offset);
-                if (range) {
-                    targetCache[axisKey] = new ViewTimeline({
-                        subject: options.target,
-                        axis,
-                    });
-                }
-                else {
-                    targetCache[axisKey] = scrollTimelineFallback({
-                        container,
-                        ...options,
-                    });
-                }
-            }
-            else if (canUseNativeTimeline()) {
-                targetCache[axisKey] = new ScrollTimeline({
-                    source: container,
-                    axis,
-                });
-            }
-            else {
-                targetCache[axisKey] = scrollTimelineFallback({
-                    container,
-                    ...options,
-                });
-            }
+        return (targetCache[axis] || (targetCache[axis] = target
+            ? new ViewTimeline({ subject: target, axis })
+            : new ScrollTimeline({ source: container, axis })));
+    }
+
+    /**
+     * Resolved offsets are linear in the target and container lengths, so
+     * probing them gives [target progress, container progress, pixels].
+     * vw/vh can resolve to 0px, so they're rejected up front.
+     */
+    const toIntersection = (o) => {
+        if (/v/u.test(o))
+            return [];
+        const px = resolveOffset(o, 0, 0, 0);
+        return [resolveOffset(o, 0, 1, 0) - px, px - resolveOffset(o, 1, 0, 0), px];
+    };
+    const toRange = ([t, c, px]) => !px &&
+        (c === 0 || c === 1) &&
+        `${c ? "entry" : "exit"}-crossing ${t * 100}%`;
+    /**
+     * Maps an offset to an equivalent ViewTimeline range. Returns undefined when
+     * there isn't one, which signals the caller to fall back to JS-based scroll
+     * tracking.
+     */
+    function offsetToViewTimelineRange(offset = ScrollOffset.All) {
+        if (offset.length !== 2)
+            return;
+        const [start, end] = offset.map(toIntersection);
+        const points = [toRange(start), toRange(end)];
+        const a = end[0] - start[0];
+        const b = start[1] - end[1];
+        if (points[0] && points[1] && (a || b)) {
+            return {
+                points: points,
+                a,
+                b,
+                cover: !start[0] && a === 1 && b === 1,
+            };
         }
-        return targetCache[axisKey];
     }
 
     function attachToAnimation(animation, options) {
-        const timeline = getTimeline(options);
-        const range = options.target
-            ? offsetToViewTimelineRange(options.offset)
-            : undefined;
+        const { target, container, axis } = options;
+        const range = target && offsetToViewTimelineRange(options.offset);
         /**
          * Use native timeline when:
-         * - No target: ScrollTimeline (existing behaviour)
+         * - No target and no offset: ScrollTimeline
          * - Target with mappable offset: ViewTimeline with named range
-         * - Target with unmappable offset: fall back to JS observe
-         */
-        const useNative = options.target
-            ? canUseNativeTimeline(options.target) && !!range
-            : canUseNativeTimeline();
-        return animation.attachTimeline({
-            timeline: useNative ? timeline : undefined,
-            ...(range &&
-                useNative && {
-                rangeStart: range.rangeStart,
-                rangeEnd: range.rangeEnd,
+         * - Otherwise: fall back to JS observe. A ScrollTimeline has no offset,
+         *   so page offsets are applied by the JS timeline.
+         */
+        const native = canUseNativeTimeline(target) && (target ? !!range : !options.offset);
+        const animations = new Map();
+        const observed = new Set();
+        let stopObserving;
+        let reverse = false;
+        /**
+         * When an offset's second point comes first, its range is swapped and
+         * the animation played backwards. The range is set after the direction,
+         * as that's what realigns a running animation with its timeline. Chrome
+         * skips that realignment when the range changes in the frame the
+         * animation starts, leaving it offset for good, so it's replayed too.
+         */
+        const apply = (direction, waapi) => {
+            const [start, end] = range.points;
+            waapi.effect.updateTiming({
+                direction: reverse
+                    ? direction === "normal"
+                        ? "reverse"
+                        : "alternate-reverse"
+                    : direction,
+            });
+            Object.assign(waapi, {
+                rangeStart: reverse ? end : start,
+                rangeEnd: reverse ? start : end,
+            });
+            waapi.play();
+        };
+        const stops = [
+            animation.attachTimeline({
+                /**
+                 * Read only by WAAPI animations, so values driven from JS don't
+                 * create a native timeline they won't use.
+                 */
+                get timeline() {
+                    return native ? getTimeline(options) : undefined;
+                },
+                onAttach: range &&
+                    ((waapi) => {
+                        const direction = waapi.effect.getTiming().direction;
+                        animations.set(waapi, direction);
+                        apply(direction, waapi);
+                    }),
+                /**
+                 * Values driven from JS all track the offset with scrollInfo,
+                 * which measures once per frame for all of them.
+                 */
+                observe: (valueAnimation) => {
+                    valueAnimation.pause();
+                    observed.add(valueAnimation);
+                    stopObserving || (stopObserving = scrollInfo((info) => {
+                        observed.forEach((observedAnimation) => {
+                            observedAnimation.time =
+                                observedAnimation.iterationDuration *
+                                    info[axis].progress;
+                        });
+                    }, options));
+                    return () => observed.delete(valueAnimation);
+                },
             }),
-            observe: (valueAnimation) => {
-                valueAnimation.pause();
-                return observeTimeline((progress) => {
-                    valueAnimation.time =
-                        valueAnimation.iterationDuration * progress;
-                }, timeline);
-            },
-        });
+        ];
+        if (native && range) {
+            const { a, b } = range;
+            const length = axis === "y" ? "clientHeight" : "clientWidth";
+            /**
+             * Offsets like All only run forwards when the target is longer than
+             * the container, so their direction is remeasured on resize.
+             */
+            const update = () => {
+                if (reverse !==
+                    (reverse = a * target[length] + b * container[length] < 0)) {
+                    animations.forEach(apply);
+                }
+            };
+            update();
+            if (a * b < 0) {
+                stops.push(resize(update), resize([target, container], update));
+            }
+        }
+        return () => {
+            stops.forEach((stop) => stop());
+            stopObserving?.();
+        };
     }
 
     function scroll(onScroll, { axis = "y", source, container = document.scrollingElement, ...options } = {}) {
@@ -13418,6 +13311,7 @@
     exports.observeTimeline = observeTimeline;
     exports.optimizedAppearDataAttribute = optimizedAppearDataAttribute;
     exports.optimizedAppearDataId = optimizedAppearDataId;
+    exports.originProps = originProps;
     exports.parseAnimateLayoutArgs = parseAnimateLayoutArgs;
     exports.parseCSSVariable = parseCSSVariable;
     exports.parseValueFromTransform = parseValueFromTransform;