motion 14.5.0 → 14.7.0

package/dist/motion.dev.js

@@ -247,8 +247,8 @@
             : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
 
     const circIn = (p) => 1 - Math.sin(Math.acos(p));
-    const circOut = reverseEasing(circIn);
-    const circInOut = mirrorEasing(circIn);
+    const circOut = /* @__PURE__ */ reverseEasing(circIn);
+    const circInOut = /* @__PURE__ */ mirrorEasing(circIn);
 
     const easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);
     const easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);
@@ -299,13 +299,17 @@
     const easingDefinitionToFunction = (definition) => {
         if (isBezierDefinition(definition)) {
             // If cubic bezier definition, create bezier curve
-            exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`, "cubic-bezier-length");
+            typeof process !== "undefined" &&
+                "development" !== "production" &&
+                exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`, "cubic-bezier-length");
             const [x1, y1, x2, y2] = definition;
             return cubicBezier(x1, y1, x2, y2);
         }
         else if (isValidEasing(definition)) {
             // Else lookup from table
-            exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`, "invalid-easing-type");
+            typeof process !== "undefined" &&
+                "development" !== "production" &&
+                exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`, "invalid-easing-type");
             return easingLookup[definition];
         }
         return definition;
@@ -442,34 +446,21 @@
             ")",
     };
 
+    /**
+     * #FF0000 has two characters per channel, #F00 one, which is doubled.
+     */
+    const channel = (v, i, size) => {
+        const c = v.substring(1 + i * size, 1 + (i + 1) * size);
+        return size > 1 ? c : c + c;
+    };
     function parseHex(v) {
-        let r = "";
-        let g = "";
-        let b = "";
-        let a = "";
-        // If we have 6 characters, ie #FF0000
-        if (v.length > 5) {
-            r = v.substring(1, 3);
-            g = v.substring(3, 5);
-            b = v.substring(5, 7);
-            a = v.substring(7, 9);
-            // Or we have 3 characters, ie #F00
-        }
-        else {
-            r = v.substring(1, 2);
-            g = v.substring(2, 3);
-            b = v.substring(3, 4);
-            a = v.substring(4, 5);
-            r += r;
-            g += g;
-            b += b;
-            a += a;
-        }
+        const size = v.length > 5 ? 2 : 1;
+        const alpha = channel(v, 3, size);
         return {
-            red: parseInt(r, 16),
-            green: parseInt(g, 16),
-            blue: parseInt(b, 16),
-            alpha: a ? parseInt(a, 16) / 255 : 1,
+            red: parseInt(channel(v, 0, size), 16),
+            green: parseInt(channel(v, 1, size), 16),
+            blue: parseInt(channel(v, 2, size), 16),
+            alpha: alpha ? parseInt(alpha, 16) / 255 : 1,
         };
     }
     const hex = {
@@ -846,7 +837,6 @@
         return orderedOrigin;
     }
     const mixComplex = (origin, target) => {
-        const template = complex.createTransformer(target);
         const originStats = analyseComplexValue(origin);
         const targetStats = analyseComplexValue(target);
         const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length &&
@@ -859,7 +849,7 @@
                     !originStats.values.length)) {
                 return mixVisibility(origin, target);
             }
-            return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
+            return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), buildTransformer(targetStats));
         }
         else {
             exports.warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`, "complex-values-different");
@@ -928,6 +918,11 @@
          */
         let isProcessing = false;
         let flushNextFrame = false;
+        /**
+         * The callback currently running. If it schedules itself with `immediate`
+         * it's left in place, so as before it doesn't run again this step.
+         */
+        let running;
         /**
          * A set of processes which were marked keepAlive when scheduled.
          * A keepAlive process is always also held by a frame queue until
@@ -945,7 +940,7 @@
                 nextFrame.add(callback);
                 runNextFrame();
             }
-            callback(latestFrameData);
+            (running = callback)(latestFrameData);
         }
         const step = {
             /**
@@ -956,6 +951,14 @@
                 const queue = addToCurrentFrame ? thisFrame : nextFrame;
                 if (keepAlive)
                     toKeepAlive.add(callback);
+                /**
+                 * A callback scheduled with `immediate` during processing may
+                 * already have run this step (for instance, a value it reads was
+                 * changed by a later callback). Re-adding moves it to the end of
+                 * the queue, so it runs again. The running callback is excluded,
+                 * so one that re-schedules itself can't loop forever.
+                 */
+                addToCurrentFrame && callback !== running && queue.delete(callback);
                 queue.add(callback);
                 return callback;
             },
@@ -990,6 +993,7 @@
                 // Clear the frame so no callbacks remain. This is to avoid
                 // memory leaks should this render step not run for a while.
                 thisFrame.clear();
+                running = undefined;
                 isProcessing = false;
                 if (flushNextFrame) {
                     flushNextFrame = false;
@@ -1137,37 +1141,31 @@
         };
     }
 
-    const springDefaults = {
-        // Default spring physics
-        stiffness: 100,
-        damping: 10,
-        mass: 1.0,
-        // Default duration/bounce-based options
-        duration: 800, // in ms
-        bounce: 0.3,
-        visualDuration: 0.3, // in seconds
-        // Rest thresholds
-        restSpeed: {
-            granular: 0.01,
-            default: 2,
-        },
-        restDelta: {
-            granular: 0.005,
-            default: 0.5,
-        },
-        // Limits
-        minDuration: 0.01, // in seconds
-        maxDuration: 10.0, // in seconds
-        minDamping: 0.05,
-    };
+    // Default spring physics
+    const defaultStiffness = 100;
+    const defaultDamping = 10;
+    const defaultMass = 1.0;
+    // Default duration/bounce-based options
+    const defaultDuration = 800; // in ms
+    const defaultBounce = 0.3;
+    const defaultVisualDuration = 0.3; // in seconds
+    // Rest thresholds
+    const restSpeedGranular = 0.01;
+    const restSpeedDefault = 2;
+    const restDeltaGranular = 0.005;
+    const restDeltaDefault = 0.5;
+    // Limits
+    const minDuration = 0.01; // in seconds
+    const maxDuration = 10.0; // in seconds
+    const minDamping = 0.05;
     /**
      * 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);
+        ? 1 / Math.max(1 + bounce, minDamping)
+        : Math.max(1 - bounce, 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
@@ -1210,12 +1208,12 @@
      * ignore inherited velocity and only resolve without valid physics. Returns
      * NaN physics when the root search doesn't converge.
      */
-    function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, }) {
+    function findSpring({ duration = defaultDuration, bounce = defaultBounce, }) {
         let envelope;
         let derivative;
-        exports.warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
+        exports.warning(duration <= secondsToMilliseconds(maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
         const dampingRatio = bounceToDampingRatio(bounce);
-        duration = clamp(springDefaults.minDuration, springDefaults.maxDuration, millisecondsToSeconds(duration));
+        duration = clamp(minDuration, maxDuration, millisecondsToSeconds(duration));
         if (dampingRatio < 1) {
             /**
              * Underdamped spring
@@ -1300,9 +1298,9 @@
         const validMass = resolvePhysics(options.mass);
         const springOptions = {
             ...options,
-            stiffness: validStiffness ?? springDefaults.stiffness,
-            damping: validDamping ?? springDefaults.damping,
-            mass: validMass ?? springDefaults.mass,
+            stiffness: validStiffness ?? defaultStiffness,
+            damping: validDamping ?? defaultDamping,
+            mass: validMass ?? defaultMass,
             isResolvedFromDuration: false,
             // stiffness/damping/mass overrides duration/bounce
             isTimeDefined: (validStiffness ?? validDamping ?? validMass) === undefined &&
@@ -1330,13 +1328,13 @@
              */
             if (!isValidPhysics(springOptions.stiffness) ||
                 !isValidPhysics(springOptions.damping, true)) {
-                springOptions.stiffness = springDefaults.stiffness;
-                springOptions.damping = springDefaults.damping;
+                springOptions.stiffness = defaultStiffness;
+                springOptions.damping = defaultDamping;
             }
         }
         return springOptions;
     }
-    function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
+    function springGenerator(optionsOrVisualDuration = defaultVisualDuration, bounce = defaultBounce) {
         const options = typeof optionsOrVisualDuration !== "object"
             ? {
                 visualDuration: optionsOrVisualDuration,
@@ -1386,14 +1384,10 @@
             const isGranularScale = Math.abs(s.delta) < 5;
             s.restSpeed =
                 options.restSpeed ||
-                    (isGranularScale
-                        ? springDefaults.restSpeed.granular
-                        : springDefaults.restSpeed.default);
+                    (isGranularScale ? restSpeedGranular : restSpeedDefault);
             s.restDelta =
                 options.restDelta ||
-                    (isGranularScale
-                        ? springDefaults.restDelta.granular
-                        : springDefaults.restDelta.default);
+                    (isGranularScale ? restDeltaGranular : restDeltaDefault);
         };
         setRestThresholds();
         let resolveSpring;
@@ -1462,11 +1456,16 @@
              * 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.
+             * creep at stiffness / damping. It only applies when reached within
+             * 300ms (a dampedAngularFreq of 1 rad/ms), so it reads as a stiff
+             * spring snapping into place: any later and it cuts off a slow spring
+             * that's visibly still moving (#1207). 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 limit = dampedAngularFreq < 1 || isTimeDefined
+                ? Infinity
+                : 300 / dampedAngularFreq;
+            const decayAt = (rate, t) => Math.exp(t > limit ? (decay - rate) * limit - decay * t : -rate * t);
             const c = { S: 0, F: 0 };
             update = () => {
                 const P = (s.velocity + decay * s.delta) / dampedAngularFreq;
@@ -1521,13 +1520,15 @@
         };
         return generator;
     }
-    spring.applyToOptions = (options) => {
-        const generatorOptions = createGeneratorEasing(options, 100, spring);
-        options.ease = generatorOptions.ease;
-        options.duration = secondsToMilliseconds(generatorOptions.duration);
-        options.type = "keyframes";
-        return options;
-    };
+    const spring = /* @__PURE__ */ Object.assign(springGenerator, {
+        applyToOptions: (options) => {
+            const generatorOptions = createGeneratorEasing(options, 100, springGenerator);
+            options.ease = generatorOptions.ease;
+            options.duration = secondsToMilliseconds(generatorOptions.duration);
+            options.type = "keyframes";
+            return options;
+        },
+    });
 
     function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
         const origin = keyframes[0];
@@ -1545,7 +1546,7 @@
         };
         let amplitude = power * velocity;
         const ideal = origin + amplitude;
-        const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
+        const target = modifyTarget ? modifyTarget(ideal) : ideal;
         /**
          * If the target has changed we need to re-calculate the amplitude, otherwise
          * the animation will start from the wrong position.
@@ -1556,7 +1557,8 @@
         const applyFriction = (t) => {
             const delta = calcDelta(t);
             state.done = Math.abs(delta) <= restDelta;
-            state.value = state.done ? target : target + delta;
+            // target + delta can be off from origin by a float error at t = 0
+            state.value = state.done ? target : t ? target + delta : origin;
         };
         /**
          * Ideally this would resolve for t in a stateless way, we could
@@ -2002,17 +2004,12 @@
             this.generator = generator;
         }
         updateTime(timestamp) {
-            const animationTime = Math.round(timestamp - this.startTime) * this.playbackSpeed;
-            // Update currentTime
-            if (this.holdTime !== null) {
-                this.currentTime = this.holdTime;
-            }
-            else {
-                // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =
-                // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for
-                // example.
-                this.currentTime = animationTime;
-            }
+            // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =
+            // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for
+            // example.
+            this.currentTime =
+                this.holdTime ??
+                    Math.round(timestamp - this.startTime) * this.playbackSpeed;
         }
         tick(timestamp, sample = false) {
             const { generator, totalDuration, calculatedDuration } = this;
@@ -2053,10 +2050,17 @@
             }
             const state = this.generate(this.currentTime, isInDelayPhase);
             let { done } = state;
-            if (!isInDelayPhase && calculatedDuration !== null) {
+            /**
+             * A generator that takes longer than maxGeneratorDuration to finish
+             * has an Infinity duration, so played forwards it finishes when it
+             * says it's done.
+             */
+            if (!isInDelayPhase) {
                 done =
                     this.playbackSpeed >= 0
-                        ? this.currentTime >= totalDuration
+                        ? calculatedDuration < Infinity
+                            ? this.currentTime >= totalDuration
+                            : done
                         : this.currentTime <= 0;
             }
             const isAnimationFinished = this.holdTime === null &&
@@ -2162,20 +2166,11 @@
             }
             return state;
         }
-        /**
-         * Allows the returned animation to be awaited or promise-chained. Currently
-         * resolves when the animation finishes at all but in a future update could/should
-         * reject if its cancels.
-         */
-        then(resolve, reject) {
-            return this.finished.then(resolve, reject);
-        }
         get duration() {
             return millisecondsToSeconds(this.calculatedDuration);
         }
         get iterationDuration() {
-            const { delay = 0 } = this.options || {};
-            return this.duration + millisecondsToSeconds(delay);
+            return this.duration + millisecondsToSeconds(this.options.delay ?? 0);
         }
         get time() {
             return millisecondsToSeconds(this.currentTime);
@@ -2279,14 +2274,9 @@
         }
         teardown() {
             this.state = "idle";
-            this.stopDriver();
-            this.startTime = this.holdTime = null;
-        }
-        stopDriver() {
-            if (!this.driver)
-                return;
-            this.driver.stop();
+            this.driver?.stop();
             this.driver = undefined;
+            this.startTime = this.holdTime = null;
         }
         sample(sampleTime) {
             this.startTime = 0;
@@ -2543,23 +2533,15 @@
         if (!transform || transform === "none") {
             return defaultTransformValue(name);
         }
-        const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
-        let parsers;
-        let match;
-        if (matrix3dMatch) {
-            parsers = matrix3dParsers;
-            match = matrix3dMatch;
-        }
-        else {
-            const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u);
-            parsers = matrix2dParsers;
-            match = matrix2dMatch;
-        }
+        const match = transform.match(/^matrix(3d)?\(([-\d.e\s,]+)\)$/u);
         if (!match) {
             return defaultTransformValue(name);
         }
-        const valueParser = parsers[name];
-        const values = match[1].split(",").map(convertTransformToNumber);
+        const valueParser = (match[1] ? matrix3dParsers : matrix2dParsers)[name];
+        /**
+         * parseFloat skips leading whitespace and stops at trailing whitespace.
+         */
+        const values = match[2].split(",").map((v) => parseFloat(v));
         return typeof valueParser === "function"
             ? valueParser(values)
             : values[valueParser];
@@ -2568,9 +2550,6 @@
         const { transform = "none" } = getComputedStyle(instance);
         return parseValueFromTransform(transform, name);
     };
-    function convertTransformToNumber(value) {
-        return parseFloat(value.trim());
-    }
 
     /**
      * Generate a list of every possible transform key.
@@ -2609,7 +2588,7 @@
 
     const isNumOrPxType = (v) => v === number || v === px;
     const transformKeys = new Set(["x", "y", "z"]);
-    const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
+    const nonTranslationalTransformKeys = /* @__PURE__ */ transformPropOrder.filter((key) => !transformKeys.has(key));
     /**
      * Reset any bounding box-changing transforms so the element can be
      * measured. Returns the values to restore. Values already at their
@@ -2651,6 +2630,8 @@
             ? size
             : size - parseFloat(paddingStart) - parseFloat(paddingEnd);
     }
+    const transformX = ({ transform }) => parseValueFromTransform(transform, "x");
+    const transformY = ({ transform }) => parseValueFromTransform(transform, "y");
     const positionalValues = {
         // Dimensions
         width: ({ width, paddingLeft = "0", paddingRight = "0", boxSizing }, measureBox) => measureDimension(width, measureBox, "x", paddingLeft, paddingRight, boxSizing),
@@ -2665,13 +2646,12 @@
             const { x } = measureBox();
             return parseFloat(left) + (x.max - x.min);
         },
-        // Transform
-        x: ({ transform }) => parseValueFromTransform(transform, "x"),
-        y: ({ transform }) => parseValueFromTransform(transform, "y"),
+        // Transform, including translate longform names
+        x: transformX,
+        y: transformY,
+        translateX: transformX,
+        translateY: transformY,
     };
-    // Alias translate longform names
-    positionalValues.translateX = positionalValues.x;
-    positionalValues.translateY = positionalValues.y;
 
     const toResolve = new Set();
     let isScheduled = false;
@@ -2972,7 +2952,9 @@
             this.isPseudoElement = Boolean(pseudoElement);
             this.allowFlatten = allowFlatten;
             this.options = options;
-            exports.invariant(typeof options.type !== "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring");
+            typeof process !== "undefined" &&
+                "development" !== "production" &&
+                exports.invariant(typeof options.type !== "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring");
             const transition = applyGeneratorOptions(options);
             this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
             if (transition.autoplay === false) {
@@ -2982,9 +2964,7 @@
                 this.finishedTime = this.time;
                 if (!pseudoElement) {
                     const keyframe = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
-                    if (this.updateMotionValue) {
-                        this.updateMotionValue(keyframe);
-                    }
+                    this.updateMotionValue?.(keyframe);
                     /**
                      * If we can, we want to commit the final style as set by the user,
                      * rather than the computed keyframe value supplied by the animation.
@@ -3025,18 +3005,24 @@
             if (this.isStopped)
                 return;
             this.isStopped = true;
-            const { state } = this;
-            if (state === "idle" || state === "finished") {
+            /**
+             * Before its finish event, a finished animation (an instant one is
+             * as soon as it starts) is still showing its end, so it's stopped
+             * like a running one. Otherwise that event would apply its end
+             * over whatever animates the value next.
+             */
+            if (this.state === "idle" || this.finishedTime !== null)
                 return;
-            }
             if (this.updateMotionValue) {
                 this.updateMotionValue();
             }
             else {
                 this.commitStyles();
             }
-            if (!this.isPseudoElement)
+            if (!this.isPseudoElement) {
+                this.animation.onfinish = null;
                 this.cancel();
+            }
         }
         /**
          * WAAPI doesn't natively have any interruption capabilities.
@@ -3299,6 +3285,7 @@
         if (!isOriginAnimatable || !isTargetAnimatable) {
             // Only build the message when we're going to warn
             isOriginAnimatable !== isTargetAnimatable &&
+                "development" !== "production" &&
                 exports.warning(false, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". "${isOriginAnimatable ? targetKeyframe : originKeyframe}" is not an animatable value.`, "value-not-animatable");
             return false;
         }
@@ -3313,13 +3300,16 @@
 
     /**
      * A list of values that can be hardware-accelerated.
+     *
+     * Colors aren't included: WAAPI mixes them in sRGB, but JS animations
+     * (and the sampler that estimates a WAAPI value on interrupt) mix them
+     * in linear color space, so interrupting one would visibly jump.
      */
     const acceleratedValues = new Set([
         "opacity",
         "clipPath",
         "filter",
         "transform",
-        "backgroundColor",
     ]);
 
     const browserColorFunctions = /^(?:oklch|oklab|lab|lch|color|color-mix|light-dark)\(/;
@@ -3345,7 +3335,13 @@
         "borderBottomColor",
         "borderLeftColor",
     ]);
-    const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
+    /**
+     * WAAPI runs on the browser's clock, so on a manual clock every animation
+     * runs in JS where processFrame can drive it. Set the flag before starting
+     * animations: running WAAPI animations stay on the browser's clock.
+     */
+    const supportsWaapi = () => !MotionGlobalConfig.useManualTiming &&
+        Object.hasOwnProperty.call(Element.prototype, "animate");
     function supportsBrowserAnimation(options) {
         const { motionValue, name, repeatDelay, repeatType, damping, type, keyframes, } = options;
         /**
@@ -3405,6 +3401,20 @@
         transformPerspective: "perspective",
     };
     const numTransforms = transformPropOrder.length;
+    /**
+     * Cache of `translateX(`-style openers so each transform function is a few
+     * string concatenations rather than a template.
+     */
+    const openers = {};
+    /**
+     * A transform function, e.g. `translateX(10px)` for `x: 10`.
+     */
+    const transformFunction = (key, value, valueAsType = getValueAsType(value, transformValueTypes[key])) => (openers[key] || (openers[key] = (translateAlias[key] || key) + "(")) + valueAsType + ")";
+    /**
+     * Whether a transform value is at its default, so can be left out.
+     */
+    const isDefaultTransform = (key, value) => (typeof value === "number" ? value : parseFloat(value)) ===
+        (key.startsWith("scale") ? 1 : 0);
     /**
      * Build a CSS transform style from individual x/y/scale etc properties.
      *
@@ -3414,7 +3424,6 @@
     function buildTransform$1(latestValues, transform, transformTemplate) {
         // The transform string we're going to build into.
         let transformString = "";
-        let transformIsDefault = true;
         /**
          * Loop over all possible transforms in order, adding the ones that
          * are present to the transform string.
@@ -3424,24 +3433,11 @@
             const value = latestValues[key];
             if (value === undefined)
                 continue;
-            let valueIsDefault = true;
-            if (typeof value === "number") {
-                valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
-            }
-            else {
-                const parsed = parseFloat(value);
-                valueIsDefault = key.startsWith("scale") ? parsed === 1 : parsed === 0;
-            }
-            if (!valueIsDefault || transformTemplate) {
-                const valueAsType = getValueAsType(value, numberValueTypes[key]);
-                if (!valueIsDefault) {
-                    transformIsDefault = false;
-                    const transformName = translateAlias[key] || key;
-                    transformString += `${transformName}(${valueAsType}) `;
-                }
-                if (transformTemplate) {
-                    transform[key] = valueAsType;
-                }
+            const valueAsType = transformTemplate &&
+                (transform[key] = getValueAsType(value, numberValueTypes[key]));
+            if (!isDefaultTransform(key, value)) {
+                transformString +=
+                    transformFunction(key, value, valueAsType || undefined) + " ";
             }
         }
         // `pathRotation` composes onto `rotate` as a separate additive term so
@@ -3449,19 +3445,14 @@
         // `transformPropOrder`.
         const pathRotation = latestValues.pathRotation;
         if (pathRotation) {
-            transformIsDefault = false;
-            transformString += `rotate(${getValueAsType(pathRotation, numberValueTypes.pathRotation)}) `;
+            transformString += transformFunction("rotate", pathRotation);
         }
         transformString = transformString.trim();
         // If we have a custom `transform` template, pass our transform values and
         // generated transformString to that before returning
-        if (transformTemplate) {
-            transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
-        }
-        else if (transformIsDefault) {
-            transformString = "none";
-        }
-        return transformString;
+        return transformTemplate
+            ? transformTemplate(transform, transformString)
+            : transformString || "none";
     }
 
     const transformGroups = new WeakMap();
@@ -3803,27 +3794,30 @@
             return values;
         };
         /**
-         * Build the transform at a timestamp. Unlike buildTransform, every key
-         * is written, even at its default, so each keyframe has the same list
-         * of functions and the browser interpolates them one by one.
+         * Build a transform from values in transformPropOrder. For a keyframe,
+         * every key is written, even at its default, so each keyframe has the
+         * same list of functions and the browser interpolates them one by one.
+         * As an inline style, defaults are left out, as buildTransform does.
          */
-        const compose = (timestamp, settled) => {
+        const toTransform = (values, isStyle) => {
             let transform = "";
-            const values = valuesAt(timestamp, settled);
             for (const key in values) {
-                transform +=
-                    (translateAlias[key] || key) +
-                        "(" +
-                        getValueAsType(values[key], numberValueTypes[key]) +
-                        ") ";
+                const value = values[key];
+                if (!isStyle || !isDefaultTransform(key, value)) {
+                    transform += transformFunction(key, value) + " ";
+                }
             }
-            return transform || "none";
+            return (isStyle ? transform.trim() : transform) || "none";
         };
+        /**
+         * Build the transform at a timestamp.
+         */
+        const compose = (timestamp, settled) => toTransform(valuesAt(timestamp, settled));
         /**
          * Write the transform as an inline style, as the renderer would.
          */
         const commit = (values = valuesAt()) => {
-            element.style.transform = buildTransform$1(values, {});
+            element.style.transform = toTransform(values, true);
         };
         /**
          * Cancel the WAAPI animations, by default first committing the
@@ -3834,6 +3828,13 @@
             segments.forEach(({ animation }) => animation.cancel());
             segments = [];
         };
+        /**
+         * A WAAPI animation that add() starts by setting its startTime. Playing
+         * it first, as element.animate() does, would leave WebKit holding that
+         * play's ready time once startTime ends the play, and it uses that for
+         * the next updatePlaybackRate(), so the animation would jump.
+         */
+        const create = (keyframes, options) => new Animation(new KeyframeEffect(element, keyframes, options));
         const add = (animation, offset, end = Infinity) => {
             const segment = { animation, offset, end };
             animation.startTime = time.now() + offset;
@@ -4026,7 +4027,7 @@
                 commit(valuesAt(from, settled));
                 keyframes = null;
             }
-            return element.animate(keyframes, {
+            return create(keyframes, {
                 ...options,
                 duration: to - from,
                 easing: easing || "linear",
@@ -4116,9 +4117,7 @@
                      * empty animations that end with them.
                      */
                     ends.forEach((trackEnd) => trackEnd < end - 1 &&
-                        add(element.animate(null, {
-                            duration: trackEnd - now,
-                        }), 0, trackEnd - now));
+                        add(create(null, { duration: trackEnd - now }), 0, trackEnd - now));
                 }
                 if (cycle) {
                     /**
@@ -4192,12 +4191,29 @@
                 if (isDone)
                     continue;
                 const local = elapsed - offset;
-                if (rate) {
+                if (rate &&
+                    animation.updatePlaybackRate &&
+                    animation.playState === "running" &&
+                    Math.abs(Number(animation.currentTime) - local) < 20) {
+                    /**
+                     * Only the speed changed. Setting playbackRate and
+                     * startTime restarts a running compositor animation, which
+                     * can render the underlying value for a frame.
+                     */
+                    animation.playbackRate !== rate &&
+                        animation.updatePlaybackRate(rate);
+                }
+                else if (rate) {
                     animation.playbackRate = rate;
                     animation.startTime = now - local / rate;
                 }
                 else {
-                    animation.pause();
+                    /**
+                     * Hold it without pause(), whose pending pause setting
+                     * currentTime would end at once, leaving WebKit holding its
+                     * ready time (see create()).
+                     */
+                    animation.startTime = null;
                     animation.currentTime = local;
                 }
             }
@@ -4388,9 +4404,8 @@
              * If we can't animate this value with the resolved keyframes
              * then we should complete it immediately.
              */
-            let canAnimateValue = true;
-            if (!canAnimate(keyframes, name, type, velocity)) {
-                canAnimateValue = false;
+            const canAnimateValue = canAnimate(keyframes, name, type, velocity);
+            if (!canAnimateValue) {
                 if (MotionGlobalConfig.instantAnimations || !delay) {
                     onUpdate?.(getFinalKeyframe(keyframes, options, finalKeyframe));
                 }
@@ -4534,9 +4549,7 @@
             this.animation.complete();
         }
         cancel() {
-            if (this._animation) {
-                this.animation.cancel();
-            }
+            this._animation?.cancel();
             this.keyframeResolver?.cancel();
         }
     }
@@ -4719,7 +4732,7 @@
                 this.setCurrent(v);
                 // Update update subscribers
                 if (this.current !== this.prev) {
-                    this.notifyChange();
+                    this.dirty();
                     if (this.dependents) {
                         for (const dependent of this.dependents) {
                             dependent.dirty();
@@ -4857,12 +4870,9 @@
          * @public
          */
         set(v) {
-            if (!this.passiveEffect) {
-                this.updateAndNotify(v);
-            }
-            else {
-                this.passiveEffect(v, this.updateAndNotify);
-            }
+            this.passiveEffect
+                ? this.passiveEffect(v, this.updateAndNotify)
+                : this.updateAndNotify(v);
         }
         setWithVelocity(prev, current, delta) {
             this.set(current);
@@ -4879,13 +4889,9 @@
             this.prev = v;
             this.prevUpdatedAt = this.prevFrameValue = undefined;
             endAnimation && this.stop();
-            if (this.stopPassiveEffect)
-                this.stopPassiveEffect();
+            this.stopPassiveEffect?.();
         }
         dirty() {
-            this.notifyChange();
-        }
-        notifyChange() {
             const { current, changeSubscriber } = this;
             /**
              * One or the other exists. Subscribing during the direct
@@ -4900,15 +4906,10 @@
             }
         }
         addDependent(dependent) {
-            if (!this.dependents) {
-                this.dependents = new Set();
-            }
-            this.dependents.add(dependent);
+            (this.dependents || (this.dependents = new Set())).add(dependent);
         }
         removeDependent(dependent) {
-            if (this.dependents) {
-                this.dependents.delete(dependent);
-            }
+            this.dependents?.delete(dependent);
         }
         /**
          * Returns the latest state of `MotionValue`
@@ -4918,9 +4919,7 @@
          * @public
          */
         get() {
-            if (collectMotionValues.current) {
-                collectMotionValues.current.push(this);
-            }
+            collectMotionValues.current?.push(this);
             /**
              * A value animating on the compositor isn't updated every frame,
              * so read it from its animation.
@@ -4986,7 +4985,7 @@
                     isComplete = true;
                     this.events.animationComplete?.notify();
                     if (this.animation === animation)
-                        this.clearAnimation();
+                        this.animation = undefined;
                     resolve();
                 });
                 if (!isComplete)
@@ -5002,11 +5001,10 @@
         stop() {
             if (this.animation) {
                 this.animation.stop();
-                if (this.events.animationCancel) {
-                    this.events.animationCancel.notify();
-                }
+                this.events.animationCancel?.notify();
             }
-            this.clearAnimation();
+            // Assign rather than delete to keep the object's shape stable
+            this.animation = undefined;
         }
         /**
          * Returns `true` if this value is currently animating.
@@ -5016,10 +5014,6 @@
         isAnimating() {
             return !!this.animation;
         }
-        clearAnimation() {
-            // Assign rather than delete to keep the object's shape stable
-            this.animation = undefined;
-        }
         /**
          * Destroy and clean up subscribers to this `MotionValue`.
          *
@@ -5034,9 +5028,7 @@
             this.events.destroy?.notify();
             this.clearListeners();
             this.stop();
-            if (this.stopPassiveEffect) {
-                this.stopPassiveEffect();
-            }
+            this.stopPassiveEffect?.();
         }
     }
     function motionValue(init, options) {
@@ -5114,6 +5106,7 @@
         "repeatDelay",
         "from",
         "elapsed",
+        "out",
     ]);
     /**
      * Decide whether a transition is defined on a given Transition.
@@ -5536,12 +5529,8 @@
         }
     }
 
-    function camelToDash(str) {
-        return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
-    }
-
     const optimizedAppearDataId = "framerAppearId";
-    const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
+    const optimizedAppearDataAttribute = "data-framer-appear-id";
 
     function getOptimisedAppearId(visualElement) {
         return visualElement.props[optimizedAppearDataAttribute];
@@ -5588,7 +5577,7 @@
             }
             const valueTransition = {
                 delay,
-                ...getValueTransition$1(transition || {}, key),
+                ...getValueTransition$1(animationTypeState?.out[key] || transition || {}, key),
             };
             if (skipAnimations)
                 valueTransition.skipAnimations = true;
@@ -5758,8 +5747,9 @@
     }
 
     class DOMKeyframesResolver extends KeyframeResolver {
-        constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {
-            super(unresolvedKeyframes, onComplete, name, motionValue, element, true);
+        constructor() {
+            super(...arguments);
+            this.isAsync = true;
         }
         /**
          * Keyframes that don't need reading from the DOM, or measuring,
@@ -5787,7 +5777,7 @@
         }
         readKeyframes() {
             const { unresolvedKeyframes, element, name } = this;
-            if (!element || !element.current)
+            if (!element?.current)
                 return;
             super.readKeyframes();
             /**
@@ -5882,11 +5872,10 @@
         }
         measureInitialState() {
             const { element, unresolvedKeyframes, name } = this;
-            if (!element || !element.current)
+            if (!element?.current)
                 return;
-            if (name === "height") {
+            if (name === "height")
                 this.suspendedScrollY = window.pageYOffset;
-            }
             this.measuredOrigin = this.measure();
             unresolvedKeyframes[0] = this.measuredOrigin;
             // Set final key frame to measure after next render
@@ -5897,7 +5886,7 @@
         }
         measureEndState() {
             const { element, unresolvedKeyframes } = this;
-            if (!element || !element.current)
+            if (!element?.current)
                 return;
             this.motionValue?.jump(this.measuredOrigin, false);
             const finalKeyframeIndex = unresolvedKeyframes.length - 1;
@@ -5906,14 +5895,6 @@
             if (finalKeyframe !== null && this.finalKeyframe === undefined) {
                 this.finalKeyframe = finalKeyframe;
             }
-            // If we removed transform values, reapply them before the next render
-            if (this.removedTransforms?.length) {
-                this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
-                    element
-                        .getValue(unsetTransformName)
-                        .set(unsetTransformValue);
-                });
-            }
             this.resolveNoneKeyframes();
         }
     }
@@ -6018,7 +5999,8 @@
      */
     const effects = [];
     function addEffect(effect) {
-        exports.invariant(typeof effect.test === "function" && typeof effect.read === "function", "Effects passed to animate.addEffect() need test() and read().", "effect-missing-test");
+        exports.invariant(typeof effect.test === "function" &&
+                typeof effect.read === "function", "Effects passed to animate.addEffect() need test() and read().", "effect-missing-test");
         removeEffect(effect);
         effects.unshift(effect);
     }
@@ -6345,11 +6327,6 @@
         });
     }
 
-    /**
-     * Cache of `translateX(`-style openers so each render is a few string
-     * concatenations rather than a template per transform.
-     */
-    const openers = {};
     function buildTransform(state) {
         let transform = "";
         const { transformKeys: keys = [], transformValues: values = {} } = state;
@@ -6362,14 +6339,8 @@
             const value = values[key].getCurrent();
             if (value === undefined)
                 continue;
-            const parsed = typeof value === "number" ? value : parseFloat(value);
-            if (parsed !== (key.startsWith("scale") ? 1 : 0)) {
-                transform +=
-                    (transform && " ") +
-                        (openers[key] ||
-                            (openers[key] = (translateAlias[key] || key) + "(")) +
-                        getValueAsType(value, transformValueTypes[key]) +
-                        ")";
+            if (!isDefaultTransform(key, value)) {
+                transform += (transform && " ") + transformFunction(key, value);
             }
         }
         // See build-transform.ts: additive `rotate()` so user `rotate` isn't
@@ -6377,10 +6348,7 @@
         const pathRotation = state.get("pathRotation")?.get();
         if (pathRotation) {
             transform +=
-                (transform && " ") +
-                    "rotate(" +
-                    getValueAsType(pathRotation, transformValueTypes.pathRotation) +
-                    ")";
+                (transform && " ") + transformFunction("rotate", pathRotation);
         }
         return transform || "none";
     }
@@ -6469,6 +6437,10 @@
     const styleEffect = 
     /*@__PURE__*/ createSelectorEffect(styleSubjectEffect);
 
+    function camelToDash(str) {
+        return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+    }
+
     function buildHTMLStyles(state, latestValues, transformTemplate) {
         const { style, vars, transformOrigin } = state;
         // Track whether we encounter any transform or transformOrigin values.
@@ -6779,10 +6751,24 @@
             !isIdentityScale(scaleX) ||
             !isIdentityScale(scaleY));
     }
+    /**
+     * Rotations and skews, which projection can't correct for.
+     */
+    const angleTransforms = [
+        "rotate",
+        "rotateX",
+        "rotateY",
+        "rotateZ",
+        "skewX",
+        "skewY",
+    ];
     function hasTransform(values) {
         return (hasScale(values) ||
             has2DTranslate(values) ||
-            values.z ||
+            hasDistortingTransform(values));
+    }
+    function hasDistortingTransform(values) {
+        return (values.z ||
             values.rotate ||
             values.rotateX ||
             values.rotateY ||
@@ -6835,6 +6821,11 @@
      * in a tree upon our box before then calculating how to project it into our desired viewport-relative box
      *
      * This is the final nested loop within updateLayoutDelta for future refactoring
+     *
+     * isSharedTransition is true for a shared layout animation in page space, which
+     * also applies ancestor scroll and transforms. Or it's the layoutRoot a shared
+     * animation is relative to, so only transforms of ancestors not shared with it
+     * (or above it) are applied.
      */
     function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
         const treeLength = treePath.length;
@@ -6851,13 +6842,10 @@
              * TODO: Prefer to remove this, but currently we have motion components with
              * display: contents in Framer.
              */
-            const { visualElement } = node.options;
-            if (visualElement &&
-                visualElement.props.style &&
-                visualElement.props.style.display === "contents") {
+            if (node.options.visualElement?.props.style?.display === "contents") {
                 continue;
             }
-            if (isSharedTransition &&
+            if (isSharedTransition === true &&
                 node.options.layoutScroll &&
                 node.scroll &&
                 node !== node.root) {
@@ -6871,7 +6859,9 @@
                 // Apply each ancestor's calculated delta into this component's recorded layout box
                 applyBoxDelta(box, delta);
             }
-            if (isSharedTransition && hasTransform(node.latestValues)) {
+            if (isSharedTransition &&
+                (isSharedTransition.path?.[i] || isSharedTransition) !== node &&
+                hasTransform(node.latestValues)) {
                 transformBox(box, node.latestValues, node.layout?.layoutBox);
             }
         }
@@ -7044,6 +7034,41 @@
     const { schedule: microtask, cancel: cancelMicrotask } = 
     /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 
+    /**
+     * Process a frame now, for driving Motion from a loop other than
+     * window.requestAnimationFrame, like an XRSession's during an immersive
+     * WebXR session. Wherever window.requestAnimationFrame does fire, Motion
+     * keeps processing frames from it too.
+     *
+     * `timestamp` defaults to now. For a timeline you control, set
+     * `MotionGlobalConfig.useManualTiming = true` and pass each frame's time in
+     * milliseconds.
+     *
+     * Animations Motion hands to the browser (WAAPI), like `opacity` or
+     * `transform` on an HTML or SVG element, follow the browser's clock. With
+     * `useManualTiming` on, Motion runs those in JS instead, except for
+     * `motion/mini`, view transitions and optimized appear animations, and
+     * colours only the browser can mix, like `oklch()`, which jump to their end.
+     *
+     * Ignored when called inside a frame.
+     */
+    const processFrame = (timestamp = time.now()) => {
+        if (frameData.isProcessing)
+            return;
+        const delta = timestamp - frameData.timestamp;
+        // Clamp like the requestAnimationFrame loop, unless the timeline is ours
+        frameData.delta = MotionGlobalConfig.useManualTiming
+            ? delta
+            : Math.max(Math.min(delta, 40), 1);
+        time.set((frameData.timestamp = timestamp));
+        frameData.isProcessing = true;
+        // frameSteps' keys are in stepsOrder
+        for (const step in frameSteps) {
+            frameSteps[step].process(frameData);
+        }
+        frameData.isProcessing = false;
+    };
+
     function animateSingleValue(value, keyframes, options) {
         const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
         motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
@@ -7103,15 +7128,6 @@
     const asNumber = (v) => typeof v === "number" ? v : parseFloat(v);
 
     const numBorders = cornerRadiusProps.length;
-    const mixedTransforms = [
-        "rotate",
-        "rotateX",
-        "rotateY",
-        "rotateZ",
-        "skewX",
-        "skewY",
-    ];
-    const numMixedTransforms = mixedTransforms.length;
     const isPx = (value) => typeof value === "number" || px.test(value);
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
         if (shouldCrossfadeOpacity) {
@@ -7149,8 +7165,8 @@
          * Mix rotation and skew. These can't be projected, so mix them every
          * frame rather than leaving them frozen at the animation-start snapshot.
          */
-        for (let i = 0; i < numMixedTransforms; i++) {
-            const key = mixedTransforms[i];
+        for (let i = 0; i < angleTransforms.length; i++) {
+            const key = angleTransforms[i];
             if (follow[key] || lead[key]) {
                 target[key] = mixNumber$1(follow[key] || 0, lead[key] || 0, progress);
             }
@@ -7233,8 +7249,8 @@
         }
     }
     function calcBoxDelta(delta, source, target, origin) {
-        calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : undefined);
-        calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : undefined);
+        calcAxisDelta(delta.x, source.x, target.x, origin?.originX);
+        calcAxisDelta(delta.y, source.y, target.y, origin?.originY);
     }
     function calcRelativeAxis(target, relative, parent, anchor = 0) {
         const anchorPoint = anchor
@@ -7304,8 +7320,8 @@
      * and acts as a bridge between motion values and removeAxisDelta
      */
     function removeBoxTransforms(box, transforms, originBox, sourceBox) {
-        removeAxisTransforms(box.x, transforms, xKeys, originBox ? originBox.x : undefined, sourceBox ? sourceBox.x : undefined);
-        removeAxisTransforms(box.y, transforms, yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined);
+        removeAxisTransforms(box.x, transforms, xKeys, originBox?.x, sourceBox?.x);
+        removeAxisTransforms(box.y, transforms, yKeys, originBox?.y, sourceBox?.y);
     }
 
     const createAxisDelta = () => ({
@@ -7503,10 +7519,9 @@
     };
 
     const defaultScaleCorrectors = {
-        borderRadius: {
-            ...correctBorderRadius,
-            applyTo: [...cornerRadiusProps],
-        },
+        borderRadius: /* @__PURE__ */ Object.assign({}, correctBorderRadius, {
+            applyTo: /* @__PURE__ */ cornerRadiusProps.slice(),
+        }),
         borderTopLeftRadius: correctBorderRadius,
         borderTopRightRadius: correctBorderRadius,
         borderBottomLeftRadius: correctBorderRadius,
@@ -7536,24 +7551,18 @@
             transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
         }
         if (latestTransform) {
-            const { transformPerspective, rotate, pathRotation, rotateX, rotateY, rotateZ, skewX, skewY, } = latestTransform;
+            const { transformPerspective } = latestTransform;
             if (transformPerspective)
                 transform = `perspective(${transformPerspective}px) ${transform}`;
-            if (rotate)
-                transform += `rotate(${rotate}deg) `;
-            // Additive `rotate()` so user `rotate` isn't clobbered.
-            if (pathRotation)
-                transform += `rotate(${pathRotation}deg) `;
-            if (rotateX)
-                transform += `rotateX(${rotateX}deg) `;
-            if (rotateY)
-                transform += `rotateY(${rotateY}deg) `;
-            if (rotateZ)
-                transform += `rotateZ(${rotateZ}deg) `;
-            if (skewX)
-                transform += `skewX(${skewX}deg) `;
-            if (skewY)
-                transform += `skewY(${skewY}deg) `;
+            for (let i = 0; i < angleTransforms.length; i++) {
+                const key = angleTransforms[i];
+                const value = latestTransform[key];
+                if (value)
+                    transform += `${key}(${value}deg) `;
+                // Additive `rotate()` so user `rotate` isn't clobbered.
+                if (!i && latestTransform.pathRotation)
+                    transform += `rotate(${latestTransform.pathRotation}deg) `;
+            }
         }
         /**
          * Apply scale to match the size of the element to the size we want it.
@@ -7611,20 +7620,15 @@
         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,
         calculatedProjections: 0,
     };
-    const transformAxes = ["", "X", "Y", "Z"];
+    /**
+     * Transforms that distort an element's layout, so must be reset before measuring.
+     */
+    const distortingTransforms = ["z", "skew", "skewZ"];
     /**
      * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
      * which has a noticeable difference in spring animations
@@ -7661,6 +7665,16 @@
         }
     }
     function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
+        /**
+         * Correctors registered via addScaleCorrector before projection loaded
+         * (e.g. with an async LazyMotion bundle) take precedence over the defaults.
+         * Applied here rather than at module scope so bundlers can drop projection
+         * when it's unused.
+         */
+        Object.assign(scaleCorrectors, {
+            ...defaultScaleCorrectors,
+            ...scaleCorrectors,
+        });
         return class ProjectionNode {
             constructor(latestValues = {}, parent = defaultParent?.()) {
                 /**
@@ -7822,8 +7836,7 @@
                 return this.eventHandlers.get(name).add(handler);
             }
             notifyListeners(name, ...args) {
-                const subscriptionManager = this.eventHandlers.get(name);
-                subscriptionManager && subscriptionManager.notify(...args);
+                this.eventHandlers.get(name)?.notify(...args);
             }
             hasListeners(name) {
                 return this.eventHandlers.has(name);
@@ -7841,7 +7854,7 @@
                     visualElement.mount(instance);
                 }
                 this.root.nodes.add(this);
-                this.parent && this.parent.children.add(this);
+                this.parent?.children.add(this);
                 if (this.root.hasTreeAnimated && (layout || layoutId)) {
                     this.isLayoutDirty = true;
                 }
@@ -7859,7 +7872,7 @@
                             return;
                         innerWidth = newInnerWidth;
                         this.root.updateBlockedByResize = true;
-                        cancelDelay && cancelDelay();
+                        cancelDelay?.();
                         cancelDelay = delay(resizeUnblockUpdate, 250);
                         if (globalProjectionState.hasAnimatedSinceResize) {
                             globalProjectionState.hasAnimatedSinceResize = false;
@@ -7950,9 +7963,7 @@
                         if (!hasLayoutChanged) {
                             finishAnimation(this);
                         }
-                        if (this.isLead() && this.options.onExitComplete) {
-                            this.options.onExitComplete();
-                        }
+                        this.isLead() && this.options.onExitComplete?.();
                     }
                     this.targetLayout = newLayout;
                 });
@@ -7960,9 +7971,8 @@
             unmount() {
                 this.options.layoutId && this.willUpdate();
                 this.root.nodes.remove(this);
-                const stack = this.getStack();
-                stack && stack.remove(this);
-                this.parent && this.parent.children.delete(this);
+                this.getStack()?.remove(this);
+                this.parent?.children.delete(this);
                 this.instance = undefined;
                 this.eventHandlers.clear();
                 this.hasLayoutListener = false;
@@ -7983,7 +7993,7 @@
                 if (this.isUpdateBlocked())
                     return;
                 this.isUpdating = true;
-                this.nodes && this.nodes.forEach(resetSkewAndRotation);
+                this.nodes?.forEach(resetSkewAndRotation);
                 this.animationId++;
             }
             getTransformTemplate() {
@@ -7993,7 +8003,7 @@
             willUpdate(shouldNotifyListeners = true) {
                 this.root.hasTreeAnimated = true;
                 if (this.root.isUpdateBlocked()) {
-                    this.options.onExitComplete && this.options.onExitComplete();
+                    this.options.onExitComplete?.();
                     return;
                 }
                 /**
@@ -8210,24 +8220,23 @@
                 this.projectionDelta = undefined;
                 this.notifyListeners("measure", this.layout.layoutBox);
                 const { visualElement } = this.options;
-                visualElement &&
-                    visualElement.notify("LayoutMeasure", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : undefined);
+                visualElement?.notify("LayoutMeasure", this.layout.layoutBox, prevLayout?.layoutBox);
             }
             updateScroll(phase = "measure") {
-                let needsMeasurement = Boolean(this.options.layoutScroll && this.instance);
-                if (this.scroll &&
-                    this.scroll.animationId === this.root.animationId &&
-                    this.scroll.phase === phase) {
-                    needsMeasurement = false;
-                }
-                if (needsMeasurement && this.instance) {
-                    const isRoot = checkIsScrollRoot(this.instance);
+                const { scroll, instance } = this;
+                const { animationId } = this.root;
+                if (this.options.layoutScroll &&
+                    instance &&
+                    !(scroll &&
+                        scroll.animationId === animationId &&
+                        scroll.phase === phase)) {
+                    const isRoot = checkIsScrollRoot(instance);
                     this.scroll = {
-                        animationId: this.root.animationId,
+                        animationId,
                         phase,
                         isRoot,
-                        offset: measureScroll(this.instance),
-                        wasRoot: this.scroll ? this.scroll.isRoot : isRoot,
+                        offset: measureScroll(instance),
+                        wasRoot: scroll ? scroll.isRoot : isRoot,
                     };
                 }
             }
@@ -8317,10 +8326,10 @@
                 }
                 return boxWithoutScroll;
             }
-            applyTransform(box, transformOnly = false, output) {
+            applyTransform(box, transformOnly = false, output, skipOwnTransform, start = 0) {
                 const withTransforms = output || createBox();
                 copyBoxInto(withTransforms, box);
-                for (let i = 0; i < this.path.length; i++) {
+                for (let i = start; i < this.path.length; i++) {
                     const node = this.path[i];
                     if (!transformOnly &&
                         node.options.layoutScroll &&
@@ -8333,7 +8342,7 @@
                         continue;
                     transformBox(withTransforms, node.latestValues, node.layout?.layoutBox);
                 }
-                if (hasTransform(this.latestValues)) {
+                if (!skipOwnTransform && hasTransform(this.latestValues)) {
                     transformBox(withTransforms, this.latestValues, this.layout?.layoutBox);
                 }
                 return withTransforms;
@@ -8468,7 +8477,11 @@
                 }
                 else if (this.targetDelta) {
                     if (Boolean(this.resumingFrom)) {
-                        this.applyTransform(this.layout.layoutBox, false, this.target);
+                        /**
+                         * Own transforms are applied later, in applyTransformsToTarget,
+                         * so only apply ancestor transforms here or they'd be doubled.
+                         */
+                        this.applyTransform(this.layout.layoutBox, false, this.target, true);
                     }
                     else {
                         copyBoxInto(this.target, this.layout.layoutBox);
@@ -8488,8 +8501,13 @@
                     this.attemptToResolveRelativeTarget = false;
                     if (this.options.layoutAnchor !== false &&
                         relativeParent &&
-                        Boolean(relativeParent.resumingFrom) ===
-                            Boolean(this.resumingFrom) &&
+                        (!relativeParent.resumingFrom === !this.resumingFrom ||
+                            /**
+                             * Shared layout animations within a layoutRoot
+                             * animate relative to it.
+                             */
+                            (relativeParent.options.layoutRoot &&
+                                !relativeParent.resumingFrom)) &&
                         !relativeParent.options.layoutScroll &&
                         relativeParent.target &&
                         this.animationProgress !== 1) {
@@ -8569,7 +8587,7 @@
                  * If this section of the tree isn't animating we can
                  * delete our target sources for the following frame.
                  */
-                this.isTreeAnimating = Boolean((this.parent && this.parent.isTreeAnimating) ||
+                this.isTreeAnimating = Boolean(this.parent?.isTreeAnimating ||
                     this.currentAnimation ||
                     this.pendingAnimation);
                 if (!this.isTreeAnimating) {
@@ -8590,8 +8608,17 @@
                 /**
                  * Apply all the parent deltas to this box to produce the corrected box. This
                  * is the layout box, as it will appear on screen as a result of the transforms of its parents.
+                 *
+                 * A shared target is usually in page space, so ancestor transforms are applied
+                 * too. But a target relative to a parent that isn't itself shared (like a
+                 * layoutRoot) is in that parent's layout space. So the transforms of the
+                 * parent and its ancestors, which move both elements alike, are skipped,
+                 * but those of other ancestors (between it and either element) apply.
                  */
-                applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared);
+                applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared &&
+                    (lead.relativeTarget && !lead.relativeParent.resumingFrom
+                        ? lead.relativeParent
+                        : true));
                 /**
                  * If this layer needs to perform scale correction but doesn't have a target,
                  * use the layout as the target.
@@ -8658,8 +8685,7 @@
             scheduleRender(notifyAll = true) {
                 this.options.visualElement?.scheduleRender();
                 if (notifyAll) {
-                    const stack = this.getStack();
-                    stack && stack.scheduleRender();
+                    this.getStack()?.scheduleRender();
                 }
                 if (this.resumingFrom && !this.resumingFrom.instance) {
                     this.resumingFrom = undefined;
@@ -8681,9 +8707,7 @@
                 }
                 this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
                 const relativeLayout = createBox();
-                const snapshotSource = snapshot ? snapshot.source : undefined;
-                const layoutSource = this.layout ? this.layout.source : undefined;
-                const isSharedLayoutAnimation = snapshotSource !== layoutSource;
+                const isSharedLayoutAnimation = snapshot?.source !== this.layout?.source;
                 const stack = this.getStack();
                 const isOnlyMember = !stack || stack.members.length <= 1;
                 const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&
@@ -8698,19 +8722,11 @@
                 this.mixTargetDelta = (latest) => {
                     const progress = latest / 1000;
                     const point = interpolate?.(progress);
+                    mixAxisDeltaLinear(targetDelta.x, delta.x, progress);
+                    mixAxisDeltaLinear(targetDelta.y, delta.y, progress);
                     if (point) {
                         targetDelta.x.translate = point.x;
-                        targetDelta.x.scale = mixNumber$1(delta.x.scale, 1, progress);
-                        targetDelta.x.origin = delta.x.origin;
-                        targetDelta.x.originPoint = delta.x.originPoint;
                         targetDelta.y.translate = point.y;
-                        targetDelta.y.scale = mixNumber$1(delta.y.scale, 1, progress);
-                        targetDelta.y.origin = delta.y.origin;
-                        targetDelta.y.originPoint = delta.y.originPoint;
-                    }
-                    else {
-                        mixAxisDeltaLinear(targetDelta.x, delta.x, progress);
-                        mixAxisDeltaLinear(targetDelta.y, delta.y, progress);
                     }
                     this.setTargetDelta(targetDelta);
                     if (this.relativeTarget &&
@@ -8736,7 +8752,7 @@
                         this.animationValues = mixedValues;
                         mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember);
                     }
-                    if (point && point.rotate !== undefined) {
+                    if (point?.rotate !== undefined) {
                         // Dedicated `pathRotation` channel, not `rotate`, so an
                         // animating `rotate` is composed with, never clobbered.
                         if (!this.animationValues)
@@ -8801,7 +8817,7 @@
             }
             finishAnimation() {
                 if (this.currentAnimation) {
-                    this.mixTargetDelta && this.mixTargetDelta(animationTarget);
+                    this.mixTargetDelta?.(animationTarget);
                     this.currentAnimation.stop();
                 }
                 this.completeAnimation();
@@ -8821,13 +8837,11 @@
                     this.layout &&
                     layout &&
                     shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {
+                    const { layoutBox } = this.layout;
+                    const leadTarget = target;
                     target = this.target || createBox();
-                    const xLength = calcLength(this.layout.layoutBox.x);
-                    target.x.min = lead.target.x.min;
-                    target.x.max = target.x.min + xLength;
-                    const yLength = calcLength(this.layout.layoutBox.y);
-                    target.y.min = lead.target.y.min;
-                    target.y.max = target.y.min + yLength;
+                    alignAxis(target.x, leadTarget.x, layoutBox.x);
+                    alignAxis(target.y, leadTarget.y, layoutBox.y);
                 }
                 copyBoxInto(targetWithTransforms, target);
                 /**
@@ -8852,8 +8866,8 @@
                 stack.add(node);
                 const config = node.options.initialPromotionConfig;
                 node.promote({
-                    transition: config ? config.transition : undefined,
-                    preserveFollowOpacity: config && config.shouldPreserveFollowOpacity
+                    transition: config?.transition,
+                    preserveFollowOpacity: config?.shouldPreserveFollowOpacity
                         ? config.shouldPreserveFollowOpacity(node)
                         : undefined,
                 });
@@ -8876,9 +8890,7 @@
                     return this.root.sharedNodes.get(layoutId);
             }
             promote({ needsReset, transition, preserveFollowOpacity, } = {}) {
-                const stack = this.getStack();
-                if (stack)
-                    stack.promote(this, preserveFollowOpacity);
+                this.getStack()?.promote(this, preserveFollowOpacity);
                 if (needsReset) {
                     this.projectionDelta = undefined;
                     this.needsReset = true;
@@ -8887,45 +8899,27 @@
                     this.setOptions({ transition });
             }
             relegate() {
-                const stack = this.getStack();
-                if (stack) {
-                    return stack.relegate(this);
-                }
-                else {
-                    return false;
-                }
+                return this.getStack()?.relegate(this) || false;
             }
             resetSkewAndRotation() {
                 const { visualElement } = this.options;
                 if (!visualElement)
                     return;
-                // If there's no detected skew or rotation values, we can early return without a forced render.
-                let hasDistortingTransform = false;
                 /**
                  * An unrolled check for rotation values. Most elements don't have any rotation and
-                 * skipping the nested loop and new object creation is 50% faster.
+                 * skipping the loop and new object creation is 50% faster.
+                 * If there's no distorting values, we don't need to do any more.
                  */
                 const { latestValues } = visualElement;
-                if (latestValues.z ||
-                    latestValues.rotate ||
-                    latestValues.rotateX ||
-                    latestValues.rotateY ||
-                    latestValues.rotateZ ||
-                    latestValues.skewX ||
-                    latestValues.skewY) {
-                    hasDistortingTransform = true;
-                }
-                // If there's no distorting values, we don't need to do any more.
-                if (!hasDistortingTransform)
+                if (!hasDistortingTransform(latestValues))
                     return;
                 const resetValues = {};
-                if (latestValues.z) {
-                    resetDistortingTransform("z", visualElement, resetValues, this.animationValues);
-                }
                 // Check the skew and rotate value of all axes and reset to 0
-                for (let i = 0; i < transformAxes.length; i++) {
-                    resetDistortingTransform(`rotate${transformAxes[i]}`, visualElement, resetValues, this.animationValues);
-                    resetDistortingTransform(`skew${transformAxes[i]}`, visualElement, resetValues, this.animationValues);
+                for (let i = 0; i < distortingTransforms.length; i++) {
+                    resetDistortingTransform(distortingTransforms[i], visualElement, resetValues, this.animationValues);
+                }
+                for (let i = 0; i < angleTransforms.length; i++) {
+                    resetDistortingTransform(angleTransforms[i], visualElement, resetValues, this.animationValues);
                 }
                 // Force a render of this element to apply the transform with all skews and rotations
                 // set to 0.
@@ -8945,7 +8939,13 @@
             styleProp) {
                 if (!this.instance || this.isSVG)
                     return;
-                if (!this.isVisible) {
+                const lead = this.getLead();
+                /**
+                 * Without crossfade, a new lead hides the previous one, as it's
+                 * usually unmounting. One that gave its layoutId away keeps
+                 * rendering, so only hide nodes that follow another.
+                 */
+                if (!this.isVisible && lead !== this) {
                     targetStyle.visibility = "hidden";
                     return;
                 }
@@ -8961,9 +8961,10 @@
                         : "none";
                     return;
                 }
-                const lead = this.getLead();
                 if (!this.projectionDelta || !this.layout || !lead.target) {
-                    if (this.options.layoutId) {
+                    if (this.options.layoutId || this.needsShow) {
+                        this.needsShow = false;
+                        targetStyle.visibility = "";
                         targetStyle.opacity =
                             this.latestValues.opacity !== undefined
                                 ? this.latestValues.opacity
@@ -9097,52 +9098,49 @@
             const isShared = snapshot.source !== node.layout.source;
             // TODO Maybe we want to also resize the layout snapshot so we don't trigger
             // animations for instance if layout="size" and an element has only changed position
-            if (animationType === "size") {
-                eachAxis((axis) => {
-                    const axisSnapshot = isShared
-                        ? snapshot.measuredBox[axis]
-                        : snapshot.layoutBox[axis];
-                    const length = calcLength(axisSnapshot);
-                    axisSnapshot.min = layout[axis].min;
-                    axisSnapshot.max = axisSnapshot.min + length;
-                });
-            }
-            else if (animationType === "x" || animationType === "y") {
-                const snapAxis = animationType === "x" ? "y" : "x";
-                copyAxisInto(isShared
-                    ? snapshot.measuredBox[snapAxis]
-                    : snapshot.layoutBox[snapAxis], layout[snapAxis]);
-            }
-            else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {
-                eachAxis((axis) => {
-                    const axisSnapshot = isShared
-                        ? snapshot.measuredBox[axis]
-                        : snapshot.layoutBox[axis];
-                    const length = calcLength(layout[axis]);
-                    axisSnapshot.max = axisSnapshot.min + length;
-                    /**
-                     * Ensure relative target gets resized and rerendererd
-                     */
-                    if (node.relativeTarget && !node.currentAnimation) {
-                        node.isProjectionDirty = true;
-                        node.relativeTarget[axis].max =
-                            node.relativeTarget[axis].min + length;
-                    }
-                });
-            }
+            const resizeSnapshot = (box, to) => {
+                if (animationType === "size") {
+                    eachAxis((axis) => {
+                        const length = calcLength(box[axis]);
+                        box[axis].min = to[axis].min;
+                        box[axis].max = box[axis].min + length;
+                    });
+                }
+                else if (animationType === "x" || animationType === "y") {
+                    const snapAxis = animationType === "x" ? "y" : "x";
+                    copyAxisInto(box[snapAxis], to[snapAxis]);
+                }
+                else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {
+                    eachAxis((axis) => {
+                        const length = calcLength(to[axis]);
+                        box[axis].max = box[axis].min + length;
+                        /**
+                         * Ensure relative target gets resized and rerendererd
+                         */
+                        if (node.relativeTarget && !node.currentAnimation) {
+                            node.isProjectionDirty = true;
+                            node.relativeTarget[axis].max =
+                                node.relativeTarget[axis].min + length;
+                        }
+                    });
+                }
+            };
+            const snapshotBox = isShared ? snapshot.measuredBox : snapshot.layoutBox;
+            resizeSnapshot(snapshotBox, layout);
             const layoutDelta = createDelta();
             calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);
             const visualDelta = createDelta();
-            if (isShared) {
-                calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);
-            }
-            else {
-                calcBoxDelta(visualDelta, layout, snapshot.layoutBox);
-            }
+            calcBoxDelta(visualDelta, isShared ? node.applyTransform(measuredLayout, true) : layout, snapshotBox);
             const hasLayoutChanged = !isDeltaZero(layoutDelta);
             let hasRelativeLayoutChanged = false;
-            if (!node.resumeFrom) {
-                const relativeParent = node.getClosestProjectingParent();
+            const relativeParent = node.getClosestProjectingParent();
+            /**
+             * A snapshot resumed from another element is only relative to this
+             * node's relativeParent if it's a layoutRoot that contains both.
+             */
+            if (!node.resumeFrom ||
+                (relativeParent?.options.layoutRoot &&
+                    node.resumeFrom.path.includes(relativeParent))) {
                 /**
                  * If the relativeParent is itself resuming from a different element then
                  * the relative snapshot is not relavent
@@ -9151,10 +9149,22 @@
                     const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
                     if (parentSnapshot && parentLayout) {
                         const anchor = node.options.layoutAnchor || undefined;
+                        /**
+                         * A shared snapshot includes the transforms of the old
+                         * element's ancestors below the layoutRoot, as they
+                         * aren't shared with the new element.
+                         */
                         const relativeSnapshot = createBox();
-                        calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox, anchor);
+                        calcRelativePosition(relativeSnapshot, isShared
+                            ? node.resumeFrom.applyTransform(snapshot.layoutBox, true, undefined, true, relativeParent.depth + 1)
+                            : snapshot.layoutBox, parentSnapshot.layoutBox, anchor);
                         const relativeLayout = createBox();
                         calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox, anchor);
+                        /**
+                         * A shared snapshot is resized in page space, above, so
+                         * resize it relative to the layoutRoot too.
+                         */
+                        isShared && resizeSnapshot(relativeSnapshot, relativeLayout);
                         if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {
                             hasRelativeLayoutChanged = true;
                         }
@@ -9176,8 +9186,7 @@
             });
         }
         else if (node.isLead()) {
-            const { onExitComplete } = node.options;
-            onExitComplete && onExitComplete();
+            node.options.onExitComplete?.();
         }
         /**
          * Clearing transition
@@ -9237,10 +9246,13 @@
      * A dragged node doesn't layout animate, so it jumps to its new layout. Shift
      * its descendants' snapshots by the same amount, so they only animate layout
      * changes relative to it, rather than lagging behind.
+     *
+     * If its drag ended since the snapshot (e.g. drag disabled from onDrag), it
+     * layout animates again, so its descendants mustn't follow its jump.
      */
     function followDraggedAncestor(node) {
         const { snapshot, dragAncestor } = node;
-        const to = dragAncestor?.layout;
+        const to = dragAncestor?.isAnimationBlocked && dragAncestor.layout;
         if (!snapshot || !to || node.resumeFrom || node.isAnimationBlocked)
             return;
         const from = dragAncestor.dragSnapshot;
@@ -9280,7 +9292,7 @@
     }
     function resetTransformStyle(node) {
         const { visualElement } = node.options;
-        if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {
+        if (visualElement?.getProps().onBeforeLayoutMeasure) {
             visualElement.notify("BeforeLayoutMeasure");
         }
         node.resetTransform();
@@ -9314,7 +9326,7 @@
         mixAxis(output.y, from.y, to.y, p);
     }
     function hasOpacityCrossfade(node) {
-        return (node.animationValues && node.animationValues.opacityExit !== undefined);
+        return node.animationValues?.opacityExit !== undefined;
     }
     const defaultLayoutTransition = {
         duration: 0.45,
@@ -9340,6 +9352,13 @@
         roundAxis(box.x);
         roundAxis(box.y);
     }
+    /**
+     * Align an axis to the start of another, keeping the length of a layout axis.
+     * The length is read first, as output can be the layout axis itself.
+     */
+    function alignAxis(output, from, layout) {
+        output.max = calcLength(layout) + (output.min = from.min);
+    }
     function shouldAnimatePositionOnly(animationType, snapshot, layout) {
         return (animationType === "position" ||
             (animationType === "preserve-aspect" &&
@@ -9354,11 +9373,16 @@
         return () => target.removeEventListener(eventName, handler, options);
     }
 
-    const DocumentProjectionNode = createProjectionNode({
+    const DocumentProjectionNode = 
+    /* @__PURE__ */ createProjectionNode({
         attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
         measureScroll: () => ({
-            x: document.documentElement.scrollLeft || document.body?.scrollLeft || 0,
-            y: document.documentElement.scrollTop || document.body?.scrollTop || 0,
+            x: document.documentElement.scrollLeft ||
+                document.body?.scrollLeft ||
+                0,
+            y: document.documentElement.scrollTop ||
+                document.body?.scrollTop ||
+                0,
         }),
         checkIsScrollRoot: () => true,
     });
@@ -9366,7 +9390,9 @@
     const rootProjectionNode = {
         current: undefined,
     };
-    const HTMLProjectionNode = createProjectionNode({
+
+    const HTMLProjectionNode = 
+    /* @__PURE__ */ createProjectionNode({
         measureScroll: (instance) => ({
             x: instance.scrollLeft,
             y: instance.scrollTop,
@@ -9383,7 +9409,7 @@
         resetTransform: (instance, value) => {
             instance.style.transform = value !== undefined ? value : "none";
         },
-        checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
+        checkIsScrollRoot: (instance) => window.getComputedStyle(instance).position === "fixed",
     });
 
     const visualElementStore = new WeakMap();
@@ -9410,7 +9436,7 @@
         "whileDrag",
         "exit",
     ];
-    const variantProps = ["initial", ...variantPriorityOrder];
+    const variantProps = /* @__PURE__ */ ["initial"].concat(variantPriorityOrder);
 
     function isControllingVariants(props) {
         if (isAnimationControls(props.animate))
@@ -9669,9 +9695,7 @@
             }
             this.current = instance;
             visualElementStore.set(instance, this);
-            if (this.projection && !this.projection.instance) {
-                this.projection.mount(instance);
-            }
+            this.projection?.instance || this.projection?.mount(instance);
             /**
              * Join the closest variant node above, so its variant changes
              * propagate here, unless inherit={false} cuts the chain.
@@ -9717,12 +9741,12 @@
             this.hasBeenMounted = true;
         }
         unmount() {
-            this.projection && this.projection.unmount();
+            this.projection?.unmount();
             cancelFrame(this.notifyUpdate);
             cancelFrame(this.render);
             this.valueSubscriptions.forEach((remove) => remove());
             this.valueSubscriptions.clear();
-            this.removeFromVariantTree && this.removeFromVariantTree();
+            this.removeFromVariantTree?.();
             this.parent?.removeChild(this);
             for (const key in this.events) {
                 this.events[key].clear();
@@ -9738,17 +9762,14 @@
         }
         addChild(child) {
             this.children.add(child);
-            this.enteringChildren ?? (this.enteringChildren = new Set());
-            this.enteringChildren.add(child);
+            (this.enteringChildren || (this.enteringChildren = new Set())).add(child);
         }
         removeChild(child) {
             this.children.delete(child);
-            this.enteringChildren && this.enteringChildren.delete(child);
+            this.enteringChildren?.delete(child);
         }
         bindToMotionValue(key, value) {
-            if (this.valueSubscriptions.has(key)) {
-                this.valueSubscriptions.get(key)();
-            }
+            this.valueSubscriptions.get(key)?.();
             if (value.accelerate &&
                 acceleratedValues.has(key) &&
                 this.current instanceof HTMLElement) {
@@ -9790,8 +9811,7 @@
             }
             this.valueSubscriptions.set(key, () => {
                 removeOnChange();
-                if (removeSyncCheck)
-                    removeSyncCheck();
+                removeSyncCheck?.();
                 // Defer to MotionValue.on("change") auto-stop so React 19 remounts
                 // can resubscribe before the animation is cancelled (#3315).
             });
@@ -9884,10 +9904,8 @@
              */
             for (let i = 0; i < propEventHandlers.length; i++) {
                 const key = propEventHandlers[i];
-                if (this.propEventSubscriptions[key]) {
-                    this.propEventSubscriptions[key]();
-                    delete this.propEventSubscriptions[key];
-                }
+                this.propEventSubscriptions[key]?.();
+                delete this.propEventSubscriptions[key];
                 const listenerName = ("on" + key);
                 const listener = props[listenerName];
                 if (listener) {
@@ -9895,9 +9913,7 @@
                 }
             }
             this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps || {}, this), this.prevMotionValues);
-            if (this.handleChildMotionValue) {
-                this.handleChildMotionValue();
-            }
+            this.handleChildMotionValue?.();
         }
         getProps() {
             return this.props;
@@ -9906,7 +9922,7 @@
          * Returns the variant definition with a given name.
          */
         getVariant(name) {
-            return this.props.variants ? this.props.variants[name] : undefined;
+            return this.props.variants?.[name];
         }
         /**
          * Returns the defined default transition on this component.
@@ -9944,11 +9960,8 @@
          */
         removeValue(key) {
             this.values.delete(key);
-            const unsubscribe = this.valueSubscriptions.get(key);
-            if (unsubscribe) {
-                unsubscribe();
-                this.valueSubscriptions.delete(key);
-            }
+            this.valueSubscriptions.get(key)?.();
+            this.valueSubscriptions.delete(key);
             delete this.latestValues[key];
             this.removeValueFromRenderState(key, this.renderState);
         }
@@ -9959,10 +9972,10 @@
             return this.values.has(key);
         }
         getValue(key, defaultValue) {
-            if (this.props.values && this.props.values[key]) {
-                return this.props.values[key];
-            }
-            let value = this.values.get(key);
+            let value = this.props.values?.[key];
+            if (value)
+                return value;
+            value = this.values.get(key);
             if (value === undefined && defaultValue !== undefined) {
                 value = motionValue(defaultValue ?? this.getDefaultValue?.(key), {
                     owner: this,
@@ -10012,15 +10025,11 @@
             this.baseTarget[key] = value;
         }
         on(eventName, callback) {
-            if (!this.events[eventName]) {
-                this.events[eventName] = new SubscriptionManager();
-            }
-            return this.events[eventName].add(callback);
+            return (this.events[eventName] ||
+                (this.events[eventName] = new SubscriptionManager())).add(callback);
         }
         notify(eventName, ...args) {
-            if (this.events[eventName]) {
-                this.events[eventName].notify(...args);
-            }
+            this.events[eventName]?.notify(...args);
         }
         scheduleRenderMicrotask() {
             microtask.render(this.render);
@@ -10193,7 +10202,7 @@
         let ancestor = element.parentElement;
         while (ancestor) {
             const node = layoutNodes.get(ancestor);
-            if (node && node.instance)
+            if (node?.instance)
                 return node;
             ancestor = ancestor.parentElement;
         }
@@ -10459,7 +10468,7 @@
                     hasSurvivor &&
                     !newMemberIds.has(layoutId)) {
                     if (restore && restore.parent.isConnected) {
-                        restore.parent.insertBefore(element, restore.next && restore.next.parentNode === restore.parent
+                        restore.parent.insertBefore(element, restore.next?.parentNode === restore.parent
                             ? restore.next
                             : null);
                         node.isPresent = false;
@@ -10664,10 +10673,6 @@
              * Scroll positions of scrollable ancestors and window.
              */
             this.scrollPositions = new Map();
-            /**
-             * Cleanup function for scroll listeners.
-             */
-            this.removeScrollListeners = null;
             this.onElementScroll = (event) => {
                 this.handleScroll(event.target);
             };
@@ -10695,10 +10700,10 @@
                 this.history.push({ ...point, timestamp: time.now() });
                 const { onStart, onMove } = this.handlers;
                 if (!isPanStarted) {
-                    onStart && onStart(this.lastMoveEvent, info);
+                    onStart?.(this.lastMoveEvent, info);
                     this.startEvent = this.lastMoveEvent;
                 }
-                onMove && onMove(this.lastMoveEvent, info);
+                onMove?.(this.lastMoveEvent, info);
             };
             this.handlePointerMove = (event, info) => {
                 /**
@@ -10723,17 +10728,15 @@
                 // Resume animation if dragSnapToOrigin is set OR if no drag started (user just clicked)
                 // This ensures constraint animations continue when interrupted by a click
                 if (this.dragSnapToOrigin || !this.startEvent) {
-                    resumeAnimation && resumeAnimation();
+                    resumeAnimation?.();
                 }
                 if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                     return;
                 const panInfo = getPanInfo(event.type === "pointercancel"
                     ? this.lastMoveEventInfo
                     : transformPoint(info, this.transformPagePoint), this.history);
-                if (this.startEvent && onEnd) {
-                    onEnd(event, panInfo);
-                }
-                onSessionEnd && onSessionEnd(event, panInfo);
+                this.startEvent && onEnd?.(event, panInfo);
+                onSessionEnd?.(event, panInfo);
             };
             // If we have more than one touch, don't start detecting this gesture
             if (!isPrimaryPointer(event))
@@ -10746,8 +10749,13 @@
             const info = extractEventInfo(event);
             const initialInfo = transformPoint(info, this.transformPagePoint);
             const { point } = initialInfo;
-            const { timestamp } = frameData;
-            this.history = [{ ...point, timestamp }];
+            /**
+             * Stamp the origin with time.now(), not frameData.timestamp: when
+             * the frameloop is idle, frameData.timestamp is from the last frame
+             * that ran, which can be seconds old, and a fast flick from a
+             * standstill would then report near-zero velocity. See #1747.
+             */
+            this.history = [{ ...point, timestamp: time.now() }];
             const { onSessionStart } = handlers;
             onSessionStart &&
                 onSessionStart(event, getPanInfo(initialInfo, this.history));
@@ -10771,30 +10779,19 @@
                 const style = getComputedStyle(current);
                 if (overflowStyles.has(style.overflowX) ||
                     overflowStyles.has(style.overflowY)) {
-                    this.scrollPositions.set(current, {
-                        x: current.scrollLeft,
-                        y: current.scrollTop,
-                    });
+                    this.scrollPositions.set(current, getScroll(current));
                 }
                 current = current.parentElement;
             }
             // Track window scroll
-            this.scrollPositions.set(window, {
-                x: window.scrollX,
-                y: window.scrollY,
-            });
+            this.scrollPositions.set(window, getScroll(window));
+            this.removeScrollListeners = pipe(
             // Capture listener catches element scroll events as they bubble
-            window.addEventListener("scroll", this.onElementScroll, {
+            addDomEvent(window, "scroll", this.onElementScroll, {
                 capture: true,
-            });
+            }), 
             // Direct window scroll listener (window scroll doesn't bubble)
-            window.addEventListener("scroll", this.onWindowScroll);
-            this.removeScrollListeners = () => {
-                window.removeEventListener("scroll", this.onElementScroll, {
-                    capture: true,
-                });
-                window.removeEventListener("scroll", this.onWindowScroll);
-            };
+            addDomEvent(window, "scroll", this.onWindowScroll, {}));
         }
         /**
          * Handle scroll compensation during drag.
@@ -10807,12 +10804,7 @@
             if (!initial)
                 return;
             const isWindow = target === window;
-            const current = isWindow
-                ? { x: window.scrollX, y: window.scrollY }
-                : {
-                    x: target.scrollLeft,
-                    y: target.scrollTop,
-                };
+            const current = getScroll(target);
             const delta = { x: current.x - initial.x, y: current.y - initial.y };
             if (delta.x === 0 && delta.y === 0)
                 return;
@@ -10837,12 +10829,18 @@
             this.handlers = handlers;
         }
         end() {
-            this.removeListeners && this.removeListeners();
-            this.removeScrollListeners && this.removeScrollListeners();
+            this.removeListeners?.();
+            this.removeScrollListeners?.();
             this.scrollPositions.clear();
             cancelFrame(this.updatePoint);
         }
     }
+    const getScroll = (target) => target === window
+        ? { x: window.scrollX, y: window.scrollY }
+        : {
+            x: target.scrollLeft,
+            y: target.scrollTop,
+        };
     function transformPoint(info, transformPagePoint) {
         return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
     }
@@ -11099,6 +11097,25 @@
             : dragElastic[label] || 0;
     }
 
+    /**
+     * Re-read the scroll of the projection's ancestors, and return that of the
+     * `layoutScroll` ones as a key that changes when any of them scroll.
+     *
+     * Clear the cached scroll first so `updateScroll` bypasses its
+     * per-animationId cache and re-reads the live value.
+     */
+    function measureScroll(projection) {
+        let key = "";
+        for (const node of projection.path) {
+            node.scroll = undefined;
+            node.updateScroll();
+            const { scroll } = node;
+            if (node !== projection.root && scroll) {
+                key += scroll.offset.x + "," + scroll.offset.y + ",";
+            }
+        }
+        return key;
+    }
     const elementDragControls = new WeakMap();
     class VisualElementDragControls {
         constructor(visualElement, readProps = () => visualElement.getProps()) {
@@ -11130,8 +11147,7 @@
             /**
              * Don't start dragging if this component is exiting
              */
-            const { presenceContext } = this.visualElement;
-            if (presenceContext && presenceContext.isPresent === false)
+            if (this.visualElement.presenceContext?.isPresent === false)
                 return;
             const onSessionStart = (event) => {
                 if (snapToCursor)
@@ -11142,8 +11158,7 @@
                 // Attempt to grab the global drag gesture lock - maybe make this part of PanSession
                 const { drag, dragPropagation, onDragStart } = this.getProps();
                 if (drag && !dragPropagation) {
-                    if (this.openDragLock)
-                        this.openDragLock();
+                    this.openDragLock?.();
                     this.openDragLock = setDragLock(drag);
                     // If we don 't have the lock, don't start dragging
                     if (!this.openDragLock)
@@ -11154,9 +11169,10 @@
                 this.isDragging = true;
                 this.currentDirection = null;
                 this.resolveConstraints();
-                if (this.visualElement.projection) {
-                    this.visualElement.projection.isAnimationBlocked = true;
-                    this.visualElement.projection.target = undefined;
+                const { projection } = this.visualElement;
+                if (projection) {
+                    projection.isAnimationBlocked = true;
+                    projection.target = undefined;
                 }
                 /**
                  * Record gesture origin and pointer offset
@@ -11178,13 +11194,11 @@
                         current = parseFloat(current);
                     }
                     else if (percent.test(current)) {
-                        const { projection } = this.visualElement;
-                        if (projection && projection.layout) {
-                            const measuredAxis = projection.layout.layoutBox[axis];
-                            if (measuredAxis) {
-                                const length = calcLength(measuredAxis);
-                                current = length * (parseFloat(current) / 100);
-                            }
+                        const measuredAxis = projection?.layout?.layoutBox[axis];
+                        if (measuredAxis) {
+                            current =
+                                calcLength(measuredAxis) *
+                                    (parseFloat(current) / 100);
                         }
                     }
                     this.originPoint[axis] = current;
@@ -11194,8 +11208,7 @@
                     frame.update(() => onDragStart(event, info), false, true);
                 }
                 addValueToWillChange(this.visualElement, "transform");
-                const { animationState } = this.visualElement;
-                animationState && animationState.setActive("whileDrag", true);
+                this.visualElement.animationState?.setActive("whileDrag", true);
             };
             const onMove = (event, info) => {
                 this.latestPointerEvent = event;
@@ -11218,8 +11231,8 @@
                     onDirectionLock && onDirectionLock(this.currentDirection);
                 }
                 // Update each point with the latest position
-                this.updateAxis("x", info.point, offset);
-                this.updateAxis("y", info.point, offset);
+                this.updateAxis("x", offset);
+                this.updateAxis("y", offset);
                 /**
                  * Ideally we would leave the renderer to fire naturally at the end of
                  * this frame but if the element is about to change layout as the result
@@ -11263,7 +11276,11 @@
                 element: this.visualElement.current,
             });
         }
-        stop(event, panInfo) {
+        /**
+         * @param dragAxes - The axes to animate on release, if not the `drag`
+         * prop's, e.g. when drag was disabled mid-gesture.
+         */
+        stop(event, panInfo, dragAxes) {
             const finalEvent = event || this.latestPointerEvent;
             const finalPanInfo = panInfo || this.latestPanInfo;
             const isDragging = this.isDragging;
@@ -11271,7 +11288,7 @@
             if (!isDragging || !finalPanInfo || !finalEvent)
                 return;
             const { velocity } = finalPanInfo;
-            this.startAnimation(velocity);
+            this.startAnimation(velocity, dragAxes);
             const { onDragEnd } = this.getProps();
             if (onDragEnd) {
                 frame.postRender(() => onDragEnd(finalEvent, finalPanInfo));
@@ -11284,12 +11301,11 @@
                 projection.isAnimationBlocked = false;
             }
             this.endPanSession();
-            const { dragPropagation } = this.getProps();
-            if (!dragPropagation && this.openDragLock) {
+            if (!this.getProps().dragPropagation && this.openDragLock) {
                 this.openDragLock();
                 this.openDragLock = null;
             }
-            animationState && animationState.setActive("whileDrag", false);
+            animationState?.setActive("whileDrag", false);
         }
         /**
          * Clean up the pan session without modifying other drag state.
@@ -11297,31 +11313,42 @@
          * without affecting projection animations or drag locks.
          */
         endPanSession() {
-            this.panSession && this.panSession.end();
+            this.panSession?.end();
             this.panSession = undefined;
         }
-        updateAxis(axis, _point, offset) {
-            const { drag } = this.getProps();
+        updateAxis(axis, offset) {
+            /**
+             * Read drag per axis: a callback fired while updating the x axis
+             * can synchronously re-render with new props.
+             */
+            const { drag } = this.readProps();
             // If we're not dragging this axis, do an early return.
             if (!offset || !shouldDrag(axis, drag, this.currentDirection))
                 return;
             const axisValue = this.getAxisMotionValue(axis);
             let next = this.originPoint[axis] + offset[axis];
             // Apply constraints
-            if (this.constraints && this.constraints[axis]) {
-                next = applyConstraints(next, this.constraints[axis], this.elastic[axis]);
+            const constraints = this.constraints && this.constraints[axis];
+            if (constraints) {
+                next = applyConstraints(next, constraints, this.elastic[axis]);
             }
             axisValue.set(next);
         }
         resolveConstraints() {
             const { dragConstraints, dragElastic } = this.getProps();
-            const layout = this.visualElement.projection &&
-                !this.visualElement.projection.layout
-                ? this.visualElement.projection.measure(false)
-                : this.visualElement.projection?.layout;
+            const { projection } = this.visualElement;
+            const layout = projection && (projection.layout || projection.measure(false));
             const prevConstraints = this.constraints;
             if (isElementConstraints(dragConstraints)) {
-                if (!this.constraints) {
+                /**
+                 * Ref constraints are measured with the layout. Scrolling a
+                 * `layoutScroll` ancestor since can move the element relative
+                 * to them without a layout measurement, so measure them again
+                 * (#2024). Otherwise keep them: they and the layout can both
+                 * have moved on the page since, e.g. when content above grows.
+                 */
+                if (!this.constraints ||
+                    this.scroll !== measureScroll(projection)) {
                     this.constraints = this.resolveRefConstraints();
                 }
             }
@@ -11364,21 +11391,20 @@
             if (!projection || !projection.layout)
                 return false;
             /**
-             * Refresh the root scroll offset so the constraint's viewport box
-             * translates to correct page coordinates. The scroll captured at
-             * drag mount can be stale if the document was scrolled afterwards —
-             * e.g. via the browser restoring scroll on refresh, or an ancestor
-             * layout effect running after this element's mount (#2829).
-             *
-             * Clear the cached scroll first so `updateScroll` bypasses its
-             * per-animationId cache and re-reads the live value.
+             * Refresh the scroll offsets of the root and `layoutScroll`
+             * ancestors so the constraint's viewport box translates to the
+             * layout's coordinates. The scroll captured when the layout was
+             * measured can be stale if they've scrolled since — e.g. via the
+             * browser restoring scroll on refresh, or an ancestor layout effect
+             * running after this element's mount (#2829).
              */
-            if (projection.root) {
-                projection.root.scroll = undefined;
-                projection.root.updateScroll();
-            }
+            this.scroll = measureScroll(projection);
             const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
-            let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);
+            /**
+             * layoutBox removes the scroll of `layoutScroll` ancestors, so
+             * remove it from the constraints box too.
+             */
+            let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, projection.removeElementScroll(constraintsBox));
             /**
              * If there's an onMeasureDragConstraints listener we call it and
              * if different constraints are returned, set constraints to that
@@ -11392,14 +11418,14 @@
             }
             return measuredConstraints;
         }
-        startAnimation(velocity) {
+        startAnimation(velocity, dragAxes) {
             const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps();
             const constraints = this.constraints || {};
             const momentumAnimations = eachAxis((axis) => {
-                if (!shouldDrag(axis, drag, this.currentDirection)) {
+                if (!shouldDrag(axis, dragAxes || drag, this.currentDirection)) {
                     return;
                 }
-                let transition = (constraints && constraints[axis]) || {};
+                let transition = constraints[axis] || {};
                 if (dragSnapToOrigin === true ||
                     dragSnapToOrigin === axis)
                     transition = { min: 0, max: 0 };
@@ -11505,7 +11531,7 @@
             this.visualElement.current.style.transform = transformTemplate
                 ? transformTemplate({}, "")
                 : "none";
-            projection.root && projection.root.updateScroll();
+            projection.root?.updateScroll();
             projection.updateLayout();
             /**
              * Reset constraints so resolveConstraints() will recalculate them
@@ -11582,8 +11608,8 @@
             };
             const { projection } = this.visualElement;
             const stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints);
-            if (projection && !projection.layout) {
-                projection.root && projection.root.updateScroll();
+            if (!projection.layout) {
+                projection.root?.updateScroll();
                 projection.updateLayout();
             }
             frame.read(measureDragConstraints);
@@ -11599,9 +11625,15 @@
             const stopLayoutUpdateListener = projection.addEventListener("didUpdate", (({ delta, hasLayoutChanged }) => {
                 if (this.isDragging && hasLayoutChanged) {
                     eachAxis((axis) => {
-                        const motionValue = this.getAxisMotionValue(axis);
-                        if (!motionValue)
+                        /**
+                         * Only compensate axes this gesture drags. A
+                         * non-drag axis follows its layout instead, as
+                         * nothing would ever move it back (e.g. snapping
+                         * to origin only animates drag axes).
+                         */
+                        if (!shouldDrag(axis, this.getProps().drag, this.currentDirection))
                             return;
+                        const motionValue = this.getAxisMotionValue(axis);
                         this.originPoint[axis] += delta[axis].translate;
                         motionValue.set(motionValue.get() + delta[axis].translate);
                     });
@@ -11612,22 +11644,14 @@
                 stopResizeListener();
                 stopPointerListener();
                 stopMeasureLayoutListener();
-                stopLayoutUpdateListener && stopLayoutUpdateListener();
-                stopResizeObservers && stopResizeObservers();
+                stopLayoutUpdateListener();
+                stopResizeObservers?.();
             };
         }
         getProps() {
             const props = this.readProps();
-            const { drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, } = props;
-            return {
-                ...props,
-                drag,
-                dragDirectionLock,
-                dragPropagation,
-                dragConstraints,
-                dragElastic,
-                dragMomentum,
-            };
+            const { dragElastic = defaultElastic, dragMomentum = true } = props;
+            return { ...props, dragElastic, dragMomentum };
         }
     }
     /**
@@ -13962,6 +13986,12 @@
     }
 
     const reversePriorityOrder = [...variantPriorityOrder].reverse();
+    /**
+     * The transition a value uses when it leaves a state (#1725): the state's
+     * own transition when `out: true`, or the `out` transition itself.
+     * Value-specific keys are resolved by animateTarget.
+     */
+    const getOutTransition = (transition) => transition?.out === true ? transition : transition?.out;
     /**
      * Diffs the element's animation props (one layer per AnimationType, highest
      * priority wins each value) against the previous call and starts animations
@@ -13983,13 +14013,18 @@
         let wasReset = false;
         function animateChanges(changedActiveType) {
             const { props, parent, manuallyAnimateOnMount } = visualElement;
+            const { initial } = props;
             const isMounting = isInitialRender || wasReset;
             const animations = [];
+            const resolveInitial = (definition = initial) => (typeof definition !== "boolean" &&
+                resolveVariant(visualElement, Array.isArray(definition) ? definition[0] : definition, visualElement.presenceContext?.custom)) ||
+                undefined;
             /**
-             * Values removed from a type. A lower-priority type that defines
-             * them animates them back, otherwise they fall back to a base target.
+             * Values removed from a type, mapped to the out transition of the
+             * state they're leaving. A lower-priority type that defines them
+             * animates them back, otherwise they fall back to a base target.
              */
-            const removedKeys = new Set();
+            const removedKeys = new Map();
             /**
              * Values claimed by active, higher-priority types.
              */
@@ -14007,6 +14042,13 @@
             do
                 source = source.props.inherit !== false && source.parent;
             while (source && !source.isControllingVariants);
+            /**
+             * Mounting leaves initial, so values use its out transition. Like the
+             * other types, variant children inherit initial's label.
+             */
+            const initialOut = isMounting &&
+                getOutTransition(resolveInitial(initial ?? (source && source.props.initial))
+                    ?.transition);
             reversePriorityOrder.forEach((type, i) => {
                 const typeState = state[type];
                 const ownProp = props[type];
@@ -14018,8 +14060,6 @@
                         : undefined;
                 const propIsVariant = isVariantLabel(prop);
                 const activeDelta = type === changedActiveType ? typeState.isActive : null;
-                if (activeDelta === false)
-                    removedVariantIndex = i;
                 /**
                  * Inherited labels are animated by the parent through
                  * variantChildren, unless this element mounted after its parent.
@@ -14034,6 +14074,13 @@
                     typeof prop === "boolean") {
                     return;
                 }
+                /**
+                 * Set after the skip above, so deactivating a type that has nothing
+                 * to animate (e.g. whileTap with no prop) doesn't re-run the variants
+                 * below it.
+                 */
+                if (activeDelta === false)
+                    removedVariantIndex = i;
                 /**
                  * Don't re-resolve a running exit: a changed custom would start
                  * new value animations that stop the originals, leaving the exit
@@ -14053,6 +14100,7 @@
                 let handledRemovedValues = false;
                 const definitionList = Array.isArray(prop) ? prop : [prop];
                 let resolvedValues = {};
+                let out;
                 if (activeDelta !== false) {
                     for (const definition of definitionList) {
                         const { transition, transitionEnd, ...target } = resolveVariant(visualElement, definition, getTypeCustom(visualElement, type)) || {};
@@ -14061,6 +14109,11 @@
                             ...target,
                             ...transitionEnd,
                         };
+                        /**
+                         * One out transition per type. With a list of labels,
+                         * the last one that sets out applies to all its values.
+                         */
+                        out = getOutTransition(transition) || out;
                     }
                 }
                 const { prevResolvedValues } = typeState;
@@ -14076,13 +14129,18 @@
                     const valueHasChanged = Array.isArray(next) && Array.isArray(prev)
                         ? !shallowCompare(next, prev) || variantDidChange
                         : next !== prev;
-                    if (valueHasChanged &&
-                        (next === undefined || next === null)) {
-                        removedKeys.add(key);
+                    let outTransition;
+                    if (valueHasChanged && (next === undefined || next === null)) {
+                        /**
+                         * The highest-priority state a value leaves wins.
+                         */
+                        removedKeys.has(key) ||
+                            removedKeys.set(key, typeState.prevOut);
                     }
                     else if (valueHasChanged ||
                         (next !== undefined && removedKeys.has(key))) {
                         shouldAnimateType = true;
+                        outTransition = removedKeys.get(key) || initialOut;
                         if (removedKeys.delete(key))
                             handledRemovedValues = true;
                         typeState.needsAnimating[key] = true;
@@ -14093,9 +14151,11 @@
                     else {
                         typeState.protectedKeys[key] = true;
                     }
+                    typeState.out[key] = outTransition;
                 }
                 typeState.prevProp = prop;
                 typeState.prevResolvedValues = resolvedValues;
+                typeState.prevOut = out;
                 if (typeState.isActive) {
                     encounteredKeys = { ...encounteredKeys, ...resolvedValues };
                 }
@@ -14126,14 +14186,17 @@
              * longer defines a value it once did, it stays where it is.
              */
             if (removedKeys.size) {
-                const { initial } = props;
                 const fallbackAnimation = {};
-                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 resolvedInitial = resolveInitial();
+                let fallbackTransition = resolvedInitial?.transition;
+                removedKeys.forEach((outTransition, key) => {
+                    if (outTransition) {
+                        fallbackTransition = {
+                            ...(fallbackTransition ||
+                                visualElement.getDefaultTransition()),
+                            [key]: outTransition,
+                        };
+                    }
                     const motionValue = visualElement.getValue(key);
                     if (motionValue)
                         motionValue.liveStyle = true;
@@ -14164,6 +14227,9 @@
                         visualElement.baseTarget[key] = motionValue?.get();
                     }
                 });
+                if (fallbackTransition) {
+                    fallbackAnimation.transition = fallbackTransition;
+                }
                 animations.push({ animation: fallbackAnimation });
             }
             const blockAnimation = (isMounting && visualElement.blockInitialAnimation) ||
@@ -14223,6 +14289,7 @@
                 protectedKeys: {},
                 needsAnimating: {},
                 prevResolvedValues: {},
+                out: {},
             };
         }
         return state;
@@ -14341,6 +14408,18 @@
         return duration * (repeat + 1) + repeatDelay * repeat;
     }
 
+    /**
+     * The time of a label, or a label with an offset like "label+1" or
+     * "label-0.5". An exact label name wins over an offset.
+     */
+    function calcLabelTime(position, labels) {
+        if (labels.has(position))
+            return labels.get(position);
+        const [, name, offset] = position.match(/^(.+?)([+-][\d.]+)$/) || [];
+        return labels.has(name)
+            ? Math.max(0, labels.get(name) + parseFloat(offset))
+            : undefined;
+    }
     /**
      * Given a absolute or relative time definition and current/prev time state of the sequence,
      * calculate an absolute time for the next keyframes.
@@ -14359,7 +14438,7 @@
             return Math.max(0, prev + parseFloat(next.slice(1)));
         }
         else {
-            return labels.get(next) ?? current;
+            return calcLabelTime(next, labels) ?? current;
         }
     }
 
@@ -14420,7 +14499,7 @@
 
     const defaultSegmentEasing = "easeInOut";
     const MAX_REPEAT = 20;
-    function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
+    function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators, info) {
         const defaultDuration = defaultTransition.duration || 0.3;
         const animationDefinitions = new Map();
         const sequences = new Map();
@@ -14433,196 +14512,233 @@
          * Build the timeline by mapping over the sequence array and converting
          * the definitions into keyframes and offsets with absolute time values.
          * These will later get converted into relative offsets in a second pass.
+         *
+         * Nested sequences are resolved recursively. `base` is the absolute
+         * start of the sequence being resolved, so numeric `at` values inside
+         * a nested sequence are relative to where it starts. Returns the time
+         * the sequence ends.
          */
-        for (let i = 0; i < sequence.length; i++) {
-            const segment = sequence[i];
-            /**
-             * If this is a timeline label, mark it and skip the rest of this iteration.
-             */
-            if (typeof segment === "string") {
-                timeLabels.set(segment, currentTime);
-                continue;
-            }
-            else if (!Array.isArray(segment)) {
-                timeLabels.set(segment.name, calcNextTime(currentTime, segment.at, prevTime, timeLabels));
-                continue;
-            }
-            let [subject, keyframes, transition = {}] = segment;
-            /**
-             * If a relative or absolute time value has been specified we need to resolve
-             * it in relation to the currentTime.
-             */
-            if (transition.at !== undefined) {
-                currentTime = calcNextTime(currentTime, transition.at, prevTime, timeLabels);
-            }
-            /**
-             * Keep track of the maximum duration in this definition. This will be
-             * applied to currentTime once the definition has been parsed.
-             */
-            let maxDuration = 0;
-            const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
-                const valueKeyframesAsList = keyframesAsList(valueKeyframes);
-                const { delay = 0, times = defaultOffset$1(valueKeyframesAsList), type = defaultTransition.type || "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
-                let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
-                /**
-                 * Resolve stagger() if defined.
-                 */
-                const calculatedDelay = typeof delay === "function"
-                    ? delay(elementIndex, numSubjects)
-                    : delay;
+        const resolveSequence = (sequence, base) => {
+            let sequenceEnd = base;
+            const resolveTime = (at) => typeof at === "number"
+                ? base + at
+                : calcNextTime(currentTime, at, prevTime, timeLabels);
+            for (let i = 0; i < sequence.length; i++) {
+                const segment = sequence[i];
                 /**
-                 * If this animation should and can use a spring, generate a spring easing function.
+                 * If this is a timeline label, mark it and skip the rest of this iteration.
                  */
-                const numKeyframes = valueKeyframesAsList.length;
-                const createGenerator = isGenerator(type)
-                    ? type
-                    : generators?.[type || "keyframes"];
-                if (numKeyframes <= 2 && createGenerator) {
-                    /**
-                     * As we're creating an easing function from a spring,
-                     * ideally we want to generate it using the real distance
-                     * between the two keyframes. However this isn't always
-                     * possible - in these situations we use 0-100.
-                     */
-                    let absoluteDelta = 100;
-                    if (numKeyframes === 2 &&
-                        isNumberKeyframesArray(valueKeyframesAsList)) {
-                        const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
-                        absoluteDelta = Math.abs(delta);
+                if (typeof segment === "string") {
+                    timeLabels.set(segment, currentTime);
+                    continue;
+                }
+                else if (!Array.isArray(segment)) {
+                    const start = segment.at === undefined
+                        ? currentTime
+                        : resolveTime(segment.at);
+                    if ("sequence" in segment) {
+                        /**
+                         * Resolve the nested sequence from its start. Afterwards
+                         * "<" points at its start and the next segment follows
+                         * its end, as if it were a single segment.
+                         */
+                        prevTime = currentTime = start;
+                        currentTime = resolveSequence(segment.sequence, start);
+                        prevTime = start;
+                        sequenceEnd = Math.max(sequenceEnd, currentTime);
                     }
-                    const springTransition = {
-                        ...defaultTransition,
-                        ...remainingTransition,
-                    };
-                    if (duration !== undefined) {
-                        springTransition.duration = secondsToMilliseconds(duration);
+                    else {
+                        timeLabels.set(segment.name, start);
                     }
-                    const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
-                    ease = springEasing.ease;
-                    duration = springEasing.duration;
+                    continue;
                 }
-                duration ?? (duration = defaultDuration);
-                const startTime = currentTime + calculatedDelay;
+                let [subject, keyframes, transition = {}] = segment;
                 /**
-                 * If there's only one time offset of 0, fill in a second with length 1
+                 * If a relative or absolute time value has been specified we need to resolve
+                 * it in relation to the currentTime.
                  */
-                if (times.length === 1 && times[0] === 0) {
-                    times[1] = 1;
+                if (transition.at !== undefined) {
+                    currentTime = resolveTime(transition.at);
                 }
                 /**
-                 * Fill out if offset if fewer offsets than keyframes
+                 * Keep track of the maximum duration in this definition. This will be
+                 * applied to currentTime once the definition has been parsed.
                  */
-                const remainder = times.length - valueKeyframesAsList.length;
-                remainder > 0 && fillOffset(times, remainder);
-                /**
-                 * If only one value has been set, ie [1], push a null to the start of
-                 * the keyframe array. This will let us mark a keyframe at this point
-                 * that will later be hydrated with the previous value.
-                 */
-                valueKeyframesAsList.length === 1 &&
-                    valueKeyframesAsList.unshift(null);
-                /**
-                 * Segments can't express `repeat: Infinity` or very large
-                 * counts — they'd leave dead time after the segment or
-                 * explode the keyframe array. Ignore with a warning.
-                 */
-                if (repeat) {
-                    exports.warning(repeat < MAX_REPEAT, `Sequence segments can't repeat ${repeat} times — ignoring repeat option. Use a value below ${MAX_REPEAT} or apply repeat at the sequence level instead.`);
-                }
-                if (repeat && repeat < MAX_REPEAT) {
+                let maxDuration = 0;
+                const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
+                    const valueKeyframesAsList = keyframesAsList(valueKeyframes);
+                    const { delay = 0, times = defaultOffset$1(valueKeyframesAsList), type = defaultTransition.type || "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
+                    let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
                     /**
-                     * Express repeatDelay in units of a single iteration's duration
-                     * so it can be added to the per-iteration time offsets below
-                     * before they're normalized to 0-1.
+                     * Resolve stagger() if defined.
                      */
-                    const repeatDelayUnits = duration > 0 ? repeatDelay / duration : 0;
-                    duration = calculateRepeatDuration(duration, repeat, repeatDelay);
-                    const originalKeyframes = [...valueKeyframesAsList];
-                    const originalTimes = [...times];
-                    ease = Array.isArray(ease) ? [...ease] : [ease];
-                    const originalEase = [...ease];
+                    const calculatedDelay = typeof delay === "function"
+                        ? delay(elementIndex, numSubjects)
+                        : delay;
                     /**
-                     * For reverse/mirror, alternate iterations play the segment
-                     * backwards. mirror matches JSAnimation's mirroredGenerator:
-                     * reversed keyframes, easings unchanged. reverse matches
-                     * JSAnimation's iterationProgress = 1 - p: reversed
-                     * keyframes, easing array reversed AND each function easing
-                     * mapped through reverseEasing (string easings unchanged —
-                     * they're resolved later by the keyframes engine).
+                     * If this animation should and can use a spring, generate a spring easing function.
                      */
-                    const isFlipping = repeatType === "reverse" || repeatType === "mirror";
-                    let flippedKeyframes = originalKeyframes;
-                    let flippedEases = originalEase;
-                    if (isFlipping) {
-                        flippedKeyframes = [...originalKeyframes].reverse();
-                        if (repeatType === "reverse") {
-                            flippedEases = [...originalEase]
-                                .reverse()
-                                .map((e) => typeof e === "function"
-                                ? reverseEasing(e)
-                                : e);
+                    const numKeyframes = valueKeyframesAsList.length;
+                    const createGenerator = isGenerator(type)
+                        ? type
+                        : generators?.[type || "keyframes"];
+                    if (numKeyframes <= 2 && createGenerator) {
+                        /**
+                         * As we're creating an easing function from a spring,
+                         * ideally we want to generate it using the real distance
+                         * between the two keyframes. However this isn't always
+                         * possible - in these situations we use 0-100.
+                         */
+                        let absoluteDelta = 100;
+                        if (numKeyframes === 2 &&
+                            isNumberKeyframesArray(valueKeyframesAsList)) {
+                            const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
+                            absoluteDelta = Math.abs(delta);
+                        }
+                        const springTransition = {
+                            ...defaultTransition,
+                            ...remainingTransition,
+                        };
+                        if (duration !== undefined) {
+                            springTransition.duration =
+                                secondsToMilliseconds(duration);
                         }
+                        const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
+                        ease = springEasing.ease;
+                        duration = springEasing.duration;
                     }
-                    for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
-                        const isFlipped = isFlipping && repeatIndex % 2 === 0;
-                        const iterKeyframes = isFlipped
-                            ? flippedKeyframes
-                            : originalKeyframes;
-                        const iterEase = isFlipped ? flippedEases : originalEase;
-                        const iterStartOffset = (repeatIndex + 1) * (1 + repeatDelayUnits);
+                    duration ?? (duration = defaultDuration);
+                    const startTime = currentTime + calculatedDelay;
+                    /**
+                     * If there's only one time offset of 0, fill in a second with length 1
+                     */
+                    if (times.length === 1 && times[0] === 0) {
+                        times[1] = 1;
+                    }
+                    /**
+                     * Fill out if offset if fewer offsets than keyframes
+                     */
+                    const remainder = times.length - valueKeyframesAsList.length;
+                    remainder > 0 && fillOffset(times, remainder);
+                    /**
+                     * If only one value has been set, ie [1], push a null to the start of
+                     * the keyframe array. This will let us mark a keyframe at this point
+                     * that will later be hydrated with the previous value.
+                     */
+                    valueKeyframesAsList.length === 1 &&
+                        valueKeyframesAsList.unshift(null);
+                    /**
+                     * Segments can't express `repeat: Infinity` or very large
+                     * counts — they'd leave dead time after the segment or
+                     * explode the keyframe array. Ignore with a warning.
+                     */
+                    if (repeat) {
+                        typeof process !== "undefined" &&
+                            "development" !== "production" &&
+                            exports.warning(repeat < MAX_REPEAT, `Sequence segments can't repeat ${repeat} times — ignoring repeat option. Use a value below ${MAX_REPEAT} or apply repeat at the sequence level instead.`);
+                    }
+                    if (repeat && repeat < MAX_REPEAT) {
+                        /**
+                         * Express repeatDelay in units of a single iteration's duration
+                         * so it can be added to the per-iteration time offsets below
+                         * before they're normalized to 0-1.
+                         */
+                        const repeatDelayUnits = duration > 0 ? repeatDelay / duration : 0;
+                        duration = calculateRepeatDuration(duration, repeat, repeatDelay);
+                        const originalKeyframes = [...valueKeyframesAsList];
+                        const originalTimes = [...times];
+                        ease = Array.isArray(ease) ? [...ease] : [ease];
+                        const originalEase = [...ease];
                         /**
-                         * If repeatDelay is set, hold the previous iteration's
-                         * final value through the delay by inserting a keyframe
-                         * at the moment the next iteration begins.
+                         * For reverse/mirror, alternate iterations play the segment
+                         * backwards. mirror matches JSAnimation's mirroredGenerator:
+                         * reversed keyframes, easings unchanged. reverse matches
+                         * JSAnimation's iterationProgress = 1 - p: reversed
+                         * keyframes, easing array reversed AND each function easing
+                         * mapped through reverseEasing (string easings unchanged —
+                         * they're resolved later by the keyframes engine).
                          */
-                        if (repeatDelayUnits > 0) {
-                            valueKeyframesAsList.push(valueKeyframesAsList[valueKeyframesAsList.length - 1]);
-                            times.push(iterStartOffset);
-                            ease.push("linear");
+                        const isFlipping = repeatType === "reverse" || repeatType === "mirror";
+                        let flippedKeyframes = originalKeyframes;
+                        let flippedEases = originalEase;
+                        if (isFlipping) {
+                            flippedKeyframes = [...originalKeyframes].reverse();
+                            if (repeatType === "reverse") {
+                                flippedEases = [...originalEase]
+                                    .reverse()
+                                    .map((e) => typeof e === "function"
+                                    ? reverseEasing(e)
+                                    : e);
+                            }
                         }
-                        valueKeyframesAsList.push(...iterKeyframes);
-                        for (let keyframeIndex = 0; keyframeIndex < iterKeyframes.length; keyframeIndex++) {
-                            times.push(originalTimes[keyframeIndex] + iterStartOffset);
-                            ease.push(keyframeIndex === 0
-                                ? "linear"
-                                : getEasingForSegment(iterEase, keyframeIndex - 1));
+                        for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
+                            const isFlipped = isFlipping && repeatIndex % 2 === 0;
+                            const iterKeyframes = isFlipped
+                                ? flippedKeyframes
+                                : originalKeyframes;
+                            const iterEase = isFlipped ? flippedEases : originalEase;
+                            const iterStartOffset = (repeatIndex + 1) * (1 + repeatDelayUnits);
+                            /**
+                             * If repeatDelay is set, hold the previous iteration's
+                             * final value through the delay by inserting a keyframe
+                             * at the moment the next iteration begins.
+                             */
+                            if (repeatDelayUnits > 0) {
+                                valueKeyframesAsList.push(valueKeyframesAsList[valueKeyframesAsList.length - 1]);
+                                times.push(iterStartOffset);
+                                ease.push("linear");
+                            }
+                            valueKeyframesAsList.push(...iterKeyframes);
+                            for (let keyframeIndex = 0; keyframeIndex < iterKeyframes.length; keyframeIndex++) {
+                                times.push(originalTimes[keyframeIndex] + iterStartOffset);
+                                ease.push(keyframeIndex === 0
+                                    ? "linear"
+                                    : getEasingForSegment(iterEase, keyframeIndex - 1));
+                            }
                         }
+                        normalizeTimes(times, repeat, repeatDelayUnits);
                     }
-                    normalizeTimes(times, repeat, repeatDelayUnits);
+                    const targetTime = startTime + duration;
+                    /**
+                     * Add keyframes, mapping offsets to absolute time.
+                     */
+                    addKeyframes(valueSequence, valueKeyframesAsList, ease, times, startTime, targetTime);
+                    maxDuration = Math.max(calculatedDelay + duration, maxDuration);
+                    totalDuration = Math.max(targetTime, totalDuration);
+                };
+                if (isMotionValue(subject)) {
+                    const subjectSequence = getSubjectSequence(subject, sequences);
+                    resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
                 }
-                const targetTime = startTime + duration;
-                /**
-                 * Add keyframes, mapping offsets to absolute time.
-                 */
-                addKeyframes(valueSequence, valueKeyframesAsList, ease, times, startTime, targetTime);
-                maxDuration = Math.max(calculatedDelay + duration, maxDuration);
-                totalDuration = Math.max(targetTime, totalDuration);
-            };
-            if (isMotionValue(subject)) {
-                const subjectSequence = getSubjectSequence(subject, sequences);
-                resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
-            }
-            else {
-                const subjects = resolveSubjects(subject, keyframes, scope, elementCache);
-                const numSubjects = subjects.length;
-                /**
-                 * For every element in this segment, process the defined values.
-                 */
-                for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
+                else {
+                    const subjects = resolveSubjects(subject, keyframes, scope, elementCache);
+                    const numSubjects = subjects.length;
                     /**
-                     * Cast necessary, but we know these are of this type
+                     * For every element in this segment, process the defined values.
                      */
-                    keyframes = keyframes;
-                    transition = transition;
-                    const thisSubject = subjects[subjectIndex];
-                    const subjectSequence = getSubjectSequence(thisSubject, sequences);
-                    for (const key in keyframes) {
-                        resolveValueSequence(keyframes[key], getValueTransition(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
+                    for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
+                        /**
+                         * Cast necessary, but we know these are of this type
+                         */
+                        keyframes = keyframes;
+                        transition = transition;
+                        const thisSubject = subjects[subjectIndex];
+                        const subjectSequence = getSubjectSequence(thisSubject, sequences);
+                        for (const key in keyframes) {
+                            resolveValueSequence(keyframes[key], getValueTransition(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
+                        }
                     }
                 }
+                prevTime = currentTime;
+                currentTime += maxDuration;
+                sequenceEnd = Math.max(sequenceEnd, currentTime);
             }
-            prevTime = currentTime;
-            currentTime += maxDuration;
+            return sequenceEnd;
+        };
+        resolveSequence(sequence, 0);
+        if (info) {
+            info.duration = totalDuration;
+            info.labels = timeLabels;
         }
         /**
          * For every element and value combination create a new animation.
@@ -14770,7 +14886,7 @@
         return animations;
     }
 
-    function animateSequence(sequence, options, scope) {
+    function animateSequence(sequence, options, scope, info) {
         const animations = [];
         /**
          * Pre-process: replace function segments with MotionValue segments,
@@ -14793,13 +14909,515 @@
             }
             return segment;
         });
-        const animationDefinitions = createAnimationsFromSequence(processedSequence, options, scope, { spring });
+        const animationDefinitions = createAnimationsFromSequence(processedSequence, options, scope, { spring }, info);
         animationDefinitions.forEach(({ keyframes, transition }, subject) => {
             animations.push(...animateSubject(subject, keyframes, transition));
         });
         return animations;
     }
 
+    let markerId = 0;
+    /**
+     * Copy a segment with a new `at`, adding a transition if it has none.
+     */
+    function withAt(segment, at) {
+        const copy = [...segment];
+        const i = typeof copy[0] === "function" ? Math.max(1, copy.length - 1) : 2;
+        copy[i] = { ...copy[i], at };
+        return copy;
+    }
+    const label = (name, at) => at === undefined ? name : { name, at };
+    /**
+     * Rewind to the start and stop, so every value is back at the value it
+     * started from and the next build reads those values as its origin.
+     */
+    function rewind(animation) {
+        animation.pause();
+        animation.time = 0;
+        animation.stop();
+    }
+    /**
+     * A sequence that can be changed after it's created. Segments, labels,
+     * callbacks, pauses and other timelines can be added, moved and removed
+     * at any point, including while it plays.
+     *
+     * Changes are batched and applied once per microtask. Each change
+     * rebuilds the underlying animations from the timeline's starting
+     * values, then restores the playhead, speed and play state, so changes
+     * made while playing take effect without a jump.
+     */
+    class Timeline {
+        /**
+         * `animations` are already running animations of `items`, as
+         * animate() makes them. The timeline plays these until it's first
+         * changed, so it costs nothing over the animations themselves until
+         * then.
+         */
+        constructor(items = [], options = {}, animations) {
+            this.options = options;
+            this.entries = [];
+            /**
+             * The repeat the playhead is in, to detect when it starts another.
+             */
+            this.repeatIndex = 0;
+            this.prevTime = 0;
+            this.markers = [];
+            this.labels = new Map();
+            this.totalDuration = 0;
+            this.isDirty = false;
+            this.isDone = false;
+            this.isRebuilding = false;
+            this.playbackSpeed = 1;
+            /**
+             * True while this plays the animations it was created with, before
+             * any change compiles it as a sequence.
+             */
+            this.isWrapped = false;
+            this.stop = () => {
+                this.flush();
+                this.group?.stop();
+            };
+            this.isPaused = options.autoplay === false;
+            this.newFinished();
+            items.forEach((item) => this.add(item));
+            if (animations) {
+                this.isDirty = false;
+                this.isWrapped = true;
+                this.group = new GroupAnimationWithThen(animations);
+                this.watch();
+            }
+            else {
+                /**
+                 * Build now, like animate(), so selectors resolve while a
+                 * scope is attached. Later changes are batched.
+                 */
+                this.invalidate();
+                this.flush();
+            }
+            /**
+             * Register with the scope (for instance from useAnimate()) so it
+             * stops when the scope is torn down.
+             */
+            const { scope } = options;
+            if (scope) {
+                scope.animations.push(this);
+                this.finished.then(() => removeItem(scope.animations, this));
+            }
+        }
+        /**
+         * Add a segment, label or timeline. `at` overrides any `at` already
+         * on the segment. The item itself is the handle for `move()` and
+         * `remove()`.
+         */
+        add(item, at) {
+            if (item instanceof Timeline)
+                item.adopt(this);
+            return this.push({ item, at });
+        }
+        /**
+         * Fire a callback when the playhead crosses `at`, in either direction.
+         * It receives the direction: 1 forwards, -1 backwards.
+         */
+        call(callback, at) {
+            return this.push({
+                item: callback,
+                at,
+                marker: { name: "_m" + markerId++, time: 0, callback },
+            });
+        }
+        /**
+         * Pause when the playhead reaches `at`.
+         */
+        addPause(at, callback) {
+            return this.push({
+                item: callback || {},
+                at,
+                marker: { name: "_m" + markerId++, time: 0, callback, pause: true },
+            });
+        }
+        /**
+         * Change where an item starts.
+         */
+        move(item, at) {
+            this.entries.forEach((entry) => {
+                if (entry.item === item)
+                    entry.at = at;
+            });
+            return this.invalidate();
+        }
+        /**
+         * Remove a segment, label, callback or timeline.
+         */
+        remove(item) {
+            if (item instanceof Timeline)
+                item.parent = undefined;
+            this.entries = this.entries.filter((entry) => entry.item !== item);
+            return this.invalidate();
+        }
+        clear() {
+            this.entries = [];
+            return this.invalidate();
+        }
+        /**
+         * The time of a label in seconds, or `undefined` if there's no label
+         * with this name.
+         */
+        getLabelTime(name) {
+            this.flush();
+            return this.labels.get(name);
+        }
+        /**
+         * Jump to a time in seconds or a label.
+         */
+        seek(position) {
+            this.time = this.resolve(position);
+            return this;
+        }
+        /**
+         * Play forwards or backwards to a time or label, then pause there.
+         */
+        playTo(position) {
+            const target = this.resolve(position);
+            const speed = Math.abs(this.speed);
+            this.speed = target < this.time ? -speed : speed;
+            this.stopAt = target;
+            this.clock || this.invalidate();
+            this.play();
+            return this;
+        }
+        reverse() {
+            this.speed = -this.speed;
+            this.play();
+            return this;
+        }
+        get progress() {
+            return this.duration ? this.time / this.duration : 0;
+        }
+        set progress(progress) {
+            this.time = progress * this.duration;
+        }
+        get time() {
+            return this.active()?.time ?? 0;
+        }
+        set time(time) {
+            this.flush();
+            this.prevTime = time;
+            this.group && (this.group.time = time);
+            this.repeatIndex = this.currentRepeat();
+        }
+        get speed() {
+            return this.playbackSpeed;
+        }
+        set speed(speed) {
+            this.playbackSpeed = speed;
+            this.group && (this.group.speed = speed);
+        }
+        get duration() {
+            this.flush();
+            return this.isWrapped ? this.group.duration : this.totalDuration;
+        }
+        get iterationDuration() {
+            this.flush();
+            return this.isWrapped
+                ? this.group.iterationDuration
+                : this.totalDuration;
+        }
+        get state() {
+            return this.active()?.state ?? "idle";
+        }
+        get startTime() {
+            return this.active()?.startTime ?? null;
+        }
+        play() {
+            this.flush();
+            this.isPaused = false;
+            this.group?.play();
+            /**
+             * Watch after playing, so it waits for the restarted animations
+             * rather than the ones that already finished.
+             */
+            if (this.isDone) {
+                this.newFinished();
+                this.watch();
+            }
+        }
+        pause() {
+            this.flush();
+            this.isPaused = true;
+            this.group?.pause();
+        }
+        cancel() {
+            this.flush();
+            this.group?.cancel();
+        }
+        complete() {
+            this.flush();
+            this.group?.complete();
+        }
+        attachTimeline(timeline) {
+            this.flush();
+            this.scrollTimeline = timeline;
+            this.detachScroll = this.group?.attachTimeline(timeline);
+            return () => {
+                this.scrollTimeline = undefined;
+                this.detachScroll?.();
+            };
+        }
+        then(onResolve, onReject) {
+            return this.finished.then(onResolve, onReject);
+        }
+        /**
+         * The current animations, if any are running. Skipped animations
+         * (skipAnimations, reduced motion) can leave the group empty.
+         */
+        active() {
+            this.flush();
+            return this.group?.animations.length ? this.group : undefined;
+        }
+        push(entry) {
+            this.entries.push(entry);
+            return this.invalidate();
+        }
+        /**
+         * Schedule a rebuild. A nested timeline passes changes up, as it's
+         * built as part of its parent.
+         */
+        invalidate() {
+            if (this.parent) {
+                this.parent.invalidate();
+            }
+            else if (!this.isDirty) {
+                this.isDirty = true;
+                queueMicrotask(() => this.flush());
+            }
+            return this;
+        }
+        /**
+         * Apply pending changes now, so reads straight after a change
+         * reflect it.
+         */
+        flush() {
+            this.isDirty && !this.parent && this.build();
+        }
+        adopt(parent) {
+            if (this.group) {
+                rewind(this.group);
+                this.group = undefined;
+            }
+            this.isDirty = false;
+            this.parent = parent;
+        }
+        build() {
+            this.isDirty = false;
+            this.isWrapped = false;
+            const prev = this.group;
+            let time = 0;
+            if (prev) {
+                this.isRebuilding = true;
+                if (this.scrollTimeline) {
+                    /**
+                     * Scroll-linked animations can't be seeked in seconds.
+                     * Cancelling also returns them to their starting values,
+                     * and the new build is attached to scroll instead.
+                     */
+                    this.detachScroll?.();
+                    prev.cancel();
+                }
+                else {
+                    time = prev.animations.length ? prev.time : 0;
+                    rewind(prev);
+                }
+                this.isRebuilding = false;
+            }
+            const { defaultTransition, onComplete, onUpdate, onRepeat, onReverseComplete, autoplay, scope, ...options } = this.options;
+            /**
+             * Inherit MotionConfig settings from a useAnimate() scope.
+             */
+            const playback = {};
+            if (scope?.reduceMotion !== undefined) {
+                playback.reduceMotion = scope.reduceMotion;
+            }
+            if (scope?.skipAnimations !== undefined) {
+                playback.skipAnimations = scope.skipAnimations;
+            }
+            Object.assign(playback, options);
+            const markers = new Map();
+            const info = {};
+            const animations = animateSequence(this.toSequence(markers), { defaultTransition, ...playback }, scope, info);
+            const labels = info.labels;
+            let duration = playback.duration ?? info.duration;
+            /**
+             * A `duration` option stretches every animation to fit, so scale
+             * label and marker times to match.
+             */
+            const scale = info.duration ? duration / info.duration : 1;
+            labels.forEach((time, name) => labels.set(name, time * scale));
+            /**
+             * Markers are resolved as labels. Move them out of the label map
+             * and extend the duration to reach any marker past the end.
+             */
+            this.markers = [];
+            markers.forEach((marker, name) => {
+                marker.time = labels.get(name);
+                labels.delete(name);
+                duration = Math.max(duration, marker.time);
+                this.markers.push(marker);
+            });
+            this.markers.sort((a, b) => a.time - b.time);
+            this.labels = labels;
+            this.totalDuration = duration;
+            /**
+             * Callbacks, pauses and playTo() watch a linear clock. Without
+             * them, the timeline is only its animations.
+             */
+            this.clock = this.clockAnimation = undefined;
+            if (this.markers.length ||
+                this.stopAt !== undefined ||
+                onUpdate ||
+                onRepeat) {
+                const clock = (this.clock = motionValue(0));
+                clock.on("change", (t) => clock === this.clock && this.onClock(t));
+                animations.unshift((this.clockAnimation = animateSingleValue(clock, [0, duration], {
+                    ...playback,
+                    duration,
+                    ease: "linear",
+                })));
+            }
+            const group = (this.group = new GroupAnimationWithThen(animations));
+            time = Math.min(time, duration);
+            if (this.isDone && time < duration)
+                this.newFinished();
+            if (this.scrollTimeline) {
+                this.detachScroll = group.attachTimeline(this.scrollTimeline);
+            }
+            else {
+                group.speed = this.playbackSpeed;
+                if (this.isPaused)
+                    group.pause();
+                if (time)
+                    group.time = time;
+            }
+            this.repeatIndex = this.currentRepeat();
+            /**
+             * Treat a start from 0 as coming from just before it, so markers
+             * at 0 fire.
+             */
+            this.prevTime = time || -1;
+            this.watch();
+        }
+        toSequence(markers) {
+            return this.entries.map(({ item, at, marker }) => {
+                if (marker) {
+                    markers.set(marker.name, marker);
+                    return label(marker.name, at);
+                }
+                if (item instanceof Timeline) {
+                    return { sequence: item.toSequence(markers), at };
+                }
+                if (typeof item === "string")
+                    return label(item, at);
+                if (at === undefined)
+                    return item;
+                return Array.isArray(item)
+                    ? withAt(item, at)
+                    : { ...item, at };
+            });
+        }
+        resolve(position) {
+            this.flush();
+            return typeof position === "number"
+                ? position
+                : calcLabelTime(position, this.labels) ?? this.time;
+        }
+        /**
+         * The repeat the clock is in, from its time across all repeats.
+         */
+        currentRepeat() {
+            const { repeat = 0, repeatDelay = 0, delay = 0 } = this.options;
+            const cycle = this.totalDuration + repeatDelay;
+            const time = (this.clockAnimation?.time ?? 0) - delay;
+            return cycle && time > 0
+                ? Math.min(repeat, Math.floor(time / cycle))
+                : 0;
+        }
+        onClock(time) {
+            let prevTime = this.prevTime;
+            this.prevTime = time;
+            if (this.isRebuilding)
+                return;
+            const { onUpdate, onRepeat, repeatType = "loop" } = this.options;
+            onUpdate?.(time);
+            const repeatIndex = this.currentRepeat();
+            if (repeatIndex !== this.repeatIndex) {
+                this.repeatIndex = repeatIndex;
+                onRepeat?.();
+                /**
+                 * A loop jumps the playhead back to the start, or to the
+                 * end when playing backwards. Finish crossing the repeat
+                 * that ended, then cross the new one from its edge.
+                 */
+                if (repeatType === "loop") {
+                    const isForward = this.speed > 0;
+                    if (this.cross(prevTime, isForward ? this.totalDuration : 0)) {
+                        return;
+                    }
+                    prevTime = isForward ? -1 : Infinity;
+                }
+            }
+            this.cross(prevTime, time);
+        }
+        /**
+         * Fire markers between two playhead times. Returns `true` if it
+         * paused.
+         */
+        cross(from, to) {
+            if (from === to)
+                return;
+            const isForward = to > from;
+            const crossed = (t) => isForward ? t > from && t <= to : t < from && t >= to;
+            const markers = isForward ? this.markers : [...this.markers].reverse();
+            for (const marker of markers) {
+                if (!crossed(marker.time))
+                    continue;
+                marker.callback?.(isForward ? 1 : -1);
+                if (marker.pause)
+                    return this.pauseAt(marker.time);
+            }
+            if (this.stopAt !== undefined && crossed(this.stopAt)) {
+                this.pauseAt(this.stopAt);
+                this.stopAt = undefined;
+                return true;
+            }
+        }
+        pauseAt(time) {
+            this.pause();
+            this.time = time;
+            return true;
+        }
+        watch() {
+            const group = this.group;
+            group.finished.then(() => {
+                if (group !== this.group || this.isDone)
+                    return;
+                this.isDone = true;
+                const { onComplete, onReverseComplete } = this.options;
+                /**
+                 * Without onReverseComplete, onComplete fires in either
+                 * direction, as it does for a single animation.
+                 */
+                const callback = (this.speed < 0 && onReverseComplete) || onComplete;
+                callback?.();
+                this.resolveFinished();
+            });
+        }
+        newFinished() {
+            this.isDone = false;
+            this.finished = new Promise((resolve) => {
+                this.resolveFinished = resolve;
+            });
+        }
+    }
+
     function isSequence(value) {
         return Array.isArray(value) && value.some(Array.isArray);
     }
@@ -14813,8 +15431,6 @@
          * Implementation
          */
         function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
-            let animations = [];
-            let animationOnComplete;
             const motionScope = activeScope.current;
             const scopeTransition = motionScope?.transition;
             const inherited = {};
@@ -14822,49 +15438,58 @@
                 inherited.reduceMotion = reduceMotion;
             if (skipAnimations !== undefined)
                 inherited.skipAnimations = skipAnimations;
+            let timeline;
             if (isSequence(subjectOrSequence)) {
-                const { onComplete, ...sequenceOptions } = optionsOrKeyframes || {};
-                if (typeof onComplete === "function") {
-                    animationOnComplete = onComplete;
-                }
+                const sequenceOptions = {
+                    ...inherited,
+                    ...optionsOrKeyframes,
+                    scope,
+                };
                 if (scopeTransition) {
                     sequenceOptions.defaultTransition = {
                         ...scopeTransition,
                         ...sequenceOptions.defaultTransition,
                     };
                 }
-                animations = animateSequence(subjectOrSequence, { ...inherited, ...sequenceOptions }, scope);
+                timeline = new Timeline(subjectOrSequence, sequenceOptions);
             }
             else {
                 // Extract top-level onComplete so it doesn't get applied per-value
                 const { onComplete, ...rest } = options || {};
-                if (typeof onComplete === "function") {
-                    animationOnComplete = onComplete;
-                }
-                animations = animateSubject(subjectOrSequence, optionsOrKeyframes, {
+                const transition = {
                     ...inherited,
                     ...scopeTransition,
                     ...rest,
-                }, scope);
-            }
-            const animation = new GroupAnimationWithThen(animations);
-            if (animationOnComplete) {
-                animation.finished.then(animationOnComplete);
+                };
+                /**
+                 * Play the animations directly, and only compile them as a
+                 * sequence if the timeline is changed. Values animated from a
+                 * number are animated via their onUpdate callback instead.
+                 */
+                const { onUpdate } = rest;
+                const segment = (typeof subjectOrSequence === "number" ||
+                    (typeof subjectOrSequence === "string" &&
+                        (typeof optionsOrKeyframes === "string" ||
+                            Array.isArray(optionsOrKeyframes)))
+                    ? [
+                        onUpdate || (() => { }),
+                        Array.isArray(optionsOrKeyframes)
+                            ? optionsOrKeyframes
+                            : [subjectOrSequence, optionsOrKeyframes],
+                        { ...transition, onUpdate: undefined },
+                    ]
+                    : [subjectOrSequence, optionsOrKeyframes, transition]);
+                timeline = new Timeline([segment], { ...inherited, onComplete, scope }, animateSubject(subjectOrSequence, optionsOrKeyframes, transition, scope));
             }
             if (motionScope) {
-                animation.finished.then(motionScope.add(() => animation.stop()));
+                timeline.finished.then(motionScope.add(() => timeline.stop()));
             }
-            if (scope) {
-                scope.animations.push(animation);
-                animation.finished.then(() => {
-                    removeItem(scope.animations, animation);
-                });
-            }
-            return animation;
+            return timeline;
         }
         return scopedAnimate;
     }
-    const animate = Object.assign(createScopedAnimate(), {
+    const animate = /* @__PURE__ */ Object.assign(
+    /* @__PURE__ */ createScopedAnimate(), {
         /**
          * Register an effect so `animate()` can animate the subjects it
          * claims, for instance `animate.addEffect(threeEffect)`. The most
@@ -14882,7 +15507,9 @@
         }
         const elements = resolveElements(elementOrSelector, scope);
         const numElements = elements.length;
-        exports.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
+        typeof process !== "undefined" &&
+            "development" !== "production" &&
+            exports.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
         /**
          * WAAPI doesn't support interrupting animations.
          *
@@ -15191,22 +15818,26 @@
         const p = (i + progress(at(i), at(i + 1), v)) / n;
         return reverse ? 1 - p : p;
     }
-    function resolveOffsets(info, options) {
-        const { offset: offsetDefinition = ScrollOffset.All, axis = "y" } = options;
-        const axisInfo = info[axis];
-        /**
-         * Reset the length of the resolved offset array rather than creating a new one.
-         */
-        axisInfo.offset.length = 0;
-        /**
-         * Populate the offset array by resolving the user's offset definition into
-         * a list of pixel scroll offsets.
-         */
-        const numOffsets = offsetDefinition.length;
-        for (let i = 0; i < numOffsets; i++) {
-            axisInfo.offset[i] = resolveOffset(offsetDefinition[i], axisInfo.containerLength, axisInfo.targetLength, axisInfo.targetOffset);
+    /**
+     * Resolves offsets on both axes, as useScroll reports the target's progress
+     * on each (#2546). `axis` only picks which progress scroll() reports.
+     */
+    function resolveOffsets(info, { offset: offsetDefinition = ScrollOffset.All }) {
+        for (const axis in axisKeys) {
+            const axisInfo = info[axis];
+            /**
+             * Reset the length of the resolved offset array rather than creating a new one.
+             */
+            axisInfo.offset.length = 0;
+            /**
+             * Populate the offset array by resolving the user's offset definition into
+             * a list of pixel scroll offsets.
+             */
+            for (let i = 0; i < offsetDefinition.length; i++) {
+                axisInfo.offset[i] = resolveOffset(offsetDefinition[i], axisInfo.containerLength, axisInfo.targetLength, axisInfo.targetOffset);
+            }
+            axisInfo.progress = clamp(0, 1, offsetsToProgress(axisInfo.offset, axisInfo.current));
         }
-        axisInfo.progress = clamp(0, 1, offsetsToProgress(axisInfo.offset, axisInfo.current));
     }
 
     function calcInset(element, container) {
@@ -15712,6 +16343,7 @@
     exports.buildSVGAttrs = buildSVGAttrs;
     exports.buildSVGPath = buildSVGPath;
     exports.buildTransform = buildTransform$1;
+    exports.buildTransformer = buildTransformer;
     exports.calcAxisDelta = calcAxisDelta;
     exports.calcBoxDelta = calcBoxDelta;
     exports.calcChildStagger = calcChildStagger;
@@ -15890,6 +16522,7 @@
     exports.positionalKeys = positionalKeys;
     exports.prefersReducedMotion = prefersReducedMotion;
     exports.press = press;
+    exports.processFrame = processFrame;
     exports.progress = progress;
     exports.progressPercentage = progressPercentage;
     exports.propEffect = propEffect;