motion 14.1.1 → 14.3.0

package/dist/motion.dev.js

@@ -556,8 +556,9 @@
     const VAR_TOKEN = "var";
     const VAR_FUNCTION_TOKEN = "var(";
     const SPLIT_TOKEN = "${}";
-    // this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex`
-    const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
+    // this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex`.
+    // The lookahead skips digits in function names, like the 3 in matrix3d(.
+    const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)(?![a-z]*\()/giu;
     /**
      * Whether analyseComplexValue(value) would find any values, without
      * tokenising the string. CSS variables are resolved before this is
@@ -1906,6 +1907,7 @@
     }
 
     const percentToProgress = (percent) => percent / 100;
+    const round = (value) => Math.round(value * 10000) / 10000;
     class JSAnimation extends WithPromise {
         constructor(options) {
             super();
@@ -2013,10 +2015,10 @@
             }
         }
         tick(timestamp, sample = false) {
-            const { generator, totalDuration, mixKeyframes, mirroredGenerator, resolvedDuration, calculatedDuration, } = this;
+            const { generator, totalDuration, calculatedDuration } = this;
             if (this.startTime === null)
                 return generator.next(0);
-            const { delay = 0, keyframes, repeat, repeatType, repeatDelay, type, onUpdate, finalKeyframe, } = this.options;
+            const { delay = 0, keyframes, type, onUpdate, finalKeyframe, } = this.options;
             if (this.startTime === this.pendingStartTime) {
                 this.startTime = resolveStartTime(this.startTime, timestamp);
             }
@@ -2049,7 +2051,55 @@
             if (this.state === "finished" && this.holdTime === null) {
                 this.currentTime = totalDuration;
             }
-            let elapsed = this.currentTime;
+            const state = this.generate(this.currentTime, isInDelayPhase);
+            let { done } = state;
+            if (!isInDelayPhase && calculatedDuration !== null) {
+                done =
+                    this.playbackSpeed >= 0
+                        ? this.currentTime >= totalDuration
+                        : this.currentTime <= 0;
+            }
+            const isAnimationFinished = this.holdTime === null &&
+                (this.state === "finished" || (this.state === "running" && done));
+            // TODO: The exception for inertia could be cleaner here
+            if (isAnimationFinished && type !== inertia) {
+                state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
+            }
+            if (onUpdate) {
+                onUpdate(state.value);
+            }
+            if (isAnimationFinished) {
+                this.finish();
+            }
+            return state;
+        }
+        /**
+         * This animation's time, including delay, at a timestamp.
+         */
+        at(timestamp) {
+            return (this.holdTime ??
+                round((timestamp - this.startTime) * this.playbackSpeed));
+        }
+        /**
+         * The value at a timestamp, without changing this animation's state.
+         * If resolved, it ends at the last resolved keyframe, which is in the
+         * same unit as the others, rather than at finalKeyframe.
+         */
+        sampleAt(timestamp, resolved) {
+            const { options, totalDuration } = this;
+            const t = this.at(timestamp) - (options.delay || 0);
+            return t >= totalDuration && options.type !== inertia
+                ? getFinalKeyframe(options.keyframes, options, resolved ? undefined : options.finalKeyframe)
+                : this.generate(Math.max(t, 0), t < 0).value;
+        }
+        /**
+         * The generator's state `currentTime` ms after the delay, without
+         * changing the animation's own state.
+         */
+        generate(currentTime, isInDelayPhase) {
+            const { generator, totalDuration, mixKeyframes, mirroredGenerator, resolvedDuration, } = this;
+            const { keyframes, repeat, repeatType, repeatDelay } = this.options;
+            let elapsed = currentTime;
             let frameGenerator = generator;
             if (repeat) {
                 /**
@@ -2057,7 +2107,7 @@
                  * than duration we'll get values like 2.5 (midway through the
                  * third iteration)
                  */
-                const progress = Math.min(this.currentTime, totalDuration) / resolvedDuration;
+                const progress = Math.min(currentTime, totalDuration) / resolvedDuration;
                 /**
                  * Get the current iteration (0 indexed). For instance the floor of
                  * 2.5 is 2.
@@ -2110,25 +2160,6 @@
             if (mixKeyframes && !isInDelayPhase) {
                 state.value = mixKeyframes(state.value);
             }
-            let { done } = state;
-            if (!isInDelayPhase && calculatedDuration !== null) {
-                done =
-                    this.playbackSpeed >= 0
-                        ? this.currentTime >= totalDuration
-                        : this.currentTime <= 0;
-            }
-            const isAnimationFinished = this.holdTime === null &&
-                (this.state === "finished" || (this.state === "running" && done));
-            // TODO: The exception for inertia could be cleaner here
-            if (isAnimationFinished && type !== inertia) {
-                state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
-            }
-            if (onUpdate) {
-                onUpdate(state.value);
-            }
-            if (isAnimationFinished) {
-                this.finish();
-            }
             return state;
         }
         /**
@@ -2469,6 +2500,7 @@
         translateY: 5,
         scaleX: 0,
         scaleY: 3,
+        scaleZ: () => 1,
         scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
         rotate,
         rotateZ: rotate,
@@ -2483,8 +2515,8 @@
         return angle;
     };
     const rotateZ = rotate;
-    const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);
-    const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);
+    const scaleX = (v) => Math.hypot(v[0], v[1]);
+    const scaleY = (v) => Math.hypot(v[4], v[5]);
     const matrix3dParsers = {
         x: 12,
         y: 13,
@@ -2494,6 +2526,7 @@
         translateZ: 14,
         scaleX,
         scaleY,
+        scaleZ: (v) => Math.hypot(v[8], v[9], v[10]),
         scale: (v) => (scaleX(v) + scaleY(v)) / 2,
         rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
         rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
@@ -2553,6 +2586,7 @@
         "scale",
         "scaleX",
         "scaleY",
+        "scaleZ",
         "rotate",
         "rotateX",
         "rotateY",
@@ -3137,44 +3171,71 @@
             }
             this.options = options;
         }
+        /**
+         * The animation's time now, in ms. Wall-clock rather than WAAPI's
+         * currentTime while running, as under CPU load currentTime may not
+         * reflect the actual elapsed time, causing incorrect sampling and
+         * visual jumps.
+         */
+        elapsed() {
+            return this.state === "running"
+                ? (time.now() - this.startTime) * this.speed
+                : this.time * 1000;
+        }
+        /**
+         * The value at a time, from a renderless JS animation.
+         */
+        sample(sampleTime) {
+            if (!this.sampler) {
+                const { motionValue, onUpdate, onComplete, onPlay, onStop, element, ...options } = this.options;
+                /**
+                 * Stop it straight away so its driver doesn't run every frame.
+                 * It can still be sampled.
+                 */
+                this.sampler = new JSAnimation({ ...options, autoplay: false });
+                this.sampler.stop();
+            }
+            return this.sampler.sample(Math.max(0, sampleTime)).value;
+        }
+        /**
+         * The value now, as WAAPI doesn't set the motion value while it runs.
+         */
+        liveValue() {
+            const { state } = this;
+            if (state === "running" || state === "paused") {
+                return this.sample(this.elapsed());
+            }
+        }
         /**
          * WAAPI doesn't natively have any interruption capabilities.
          *
          * Rather than read committed styles back out of the DOM, we can
-         * create a renderless JS animation and sample it twice to calculate
-         * its current value, "previous" value, and therefore allow
-         * Motion to calculate velocity for any subsequent animation.
+         * sample a renderless JS animation twice to calculate its current
+         * value, "previous" value, and therefore allow Motion to calculate
+         * velocity for any subsequent animation.
          */
         updateMotionValue(value) {
-            const { motionValue, onUpdate, onComplete, element, ...options } = this.options;
+            const { motionValue, element, name } = this.options;
             if (!motionValue)
                 return;
             if (value !== undefined) {
                 motionValue.set(value);
                 return;
             }
-            const sampleAnimation = new JSAnimation({
-                ...options,
-                autoplay: false,
-            });
-            /**
-             * Use wall-clock elapsed time for sampling.
-             * Under CPU load, WAAPI's currentTime may not reflect actual
-             * elapsed time, causing incorrect sampling and visual jumps.
-             */
-            const sampleTime = Math.max(sampleDelta, time.now() - this.startTime);
-            const delta = clamp(0, sampleDelta, sampleTime - sampleDelta);
-            const current = sampleAnimation.sample(sampleTime).value;
+            const { speed } = this;
+            const sampleTime = this.elapsed();
+            const delta = this.state === "running" && speed
+                ? clamp(0, sampleDelta, sampleTime)
+                : 0;
+            const current = this.sample(sampleTime);
             /**
              * Write the estimated value to inline style so it persists
              * after cancel(), covering the async gap before the next
              * animation starts.
              */
-            const { name } = this.options;
             if (element && name)
                 setStyle(element, name, current);
-            motionValue.setWithVelocity(sampleAnimation.sample(Math.max(0, sampleTime - delta)).value, current, delta);
-            sampleAnimation.stop();
+            motionValue.setWithVelocity(this.sample(sampleTime - delta * Math.sign(speed)), current, delta / Math.abs(speed || 1));
         }
     }
 
@@ -3288,44 +3349,953 @@
     function supportsBrowserAnimation(options) {
         const { motionValue, name, repeatDelay, repeatType, damping, type, keyframes, } = options;
         /**
-         * Most values can't be accelerated at all, so check the name before
-         * looking at the element or its props.
+         * Most values can't be accelerated at all, so check the name before
+         * looking at the element or its props.
+         */
+        if (!name ||
+            !(acceleratedValues.has(name) || colorProperties.has(name))) {
+            return false;
+        }
+        const subject = motionValue?.owner?.current;
+        /**
+         * We use instanceof checks instead of isHTMLElement()/isSVGElement()
+         * because we explicitly **don't** want elements in different timing
+         * contexts (i.e. popups) to be accelerated, as it's not possible to sync
+         * these animations properly with those driven from the main window
+         * frameloop.
+         */
+        if (!(subject instanceof HTMLElement) &&
+            !(subject instanceof SVGElement)) {
+            return false;
+        }
+        const { onUpdate, transformTemplate } = motionValue.owner.getProps();
+        return (supportsWaapi() &&
+            /**
+             * Force WAAPI for color properties with browser-only color formats
+             * (oklch, oklab, lab, lch, etc.) that the JS animation path can't parse.
+             */
+            (acceleratedValues.has(name) ||
+                (colorProperties.has(name) &&
+                    hasBrowserOnlyColors(keyframes))) &&
+            (name !== "transform" || !transformTemplate) &&
+            /**
+             * If we're outputting values to onUpdate then we can't use WAAPI as there's
+             * no way to read the value from WAAPI every frame.
+             */
+            !onUpdate &&
+            !repeatDelay &&
+            repeatType !== "mirror" &&
+            damping !== 0 &&
+            type !== "inertia");
+    }
+
+    /**
+     * Provided a value and a ValueType, returns the value as that value type.
+     */
+    const getValueAsType = (value, type) => {
+        return type && typeof value === "number"
+            ? type.transform(value)
+            : value;
+    };
+
+    const translateAlias = {
+        x: "translateX",
+        y: "translateY",
+        z: "translateZ",
+        transformPerspective: "perspective",
+    };
+    const numTransforms = transformPropOrder.length;
+    /**
+     * Build a CSS transform style from individual x/y/scale etc properties.
+     *
+     * This outputs with a default order of transforms/scales/rotations, this can be customised by
+     * providing a transformTemplate function.
+     */
+    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.
+         */
+        for (let i = 0; i < numTransforms; i++) {
+            const key = transformPropOrder[i];
+            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;
+                }
+            }
+        }
+        // `pathRotation` composes onto `rotate` as a separate additive term so
+        // the user's `rotate` is never clobbered. Deliberately not a slot in
+        // `transformPropOrder`.
+        const pathRotation = latestValues.pathRotation;
+        if (pathRotation) {
+            transformIsDefault = false;
+            transformString += `rotate(${getValueAsType(pathRotation, numberValueTypes.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;
+    }
+
+    const transformGroups = new WeakMap();
+
+    /**
+     * Sample at the interruption sampling rate, up to a cap for long
+     * animations.
+     */
+    const maxSamples = 200;
+    /**
+     * How far values may stray from the WAAPI animation: as a fraction of
+     * each value's change when they share an easing, otherwise in px or deg,
+     * or for scale.
+     */
+    const easingTolerance = 0.001;
+    const sampleTolerance = 0.1;
+    const scaleTolerance = 0.001;
+    /**
+     * If an outside write, or a seek the WAAPI animation can't follow,
+     * happens again within this window, the group is being driven every
+     * frame (scrubbing, drag), which is cheaper on the main thread than
+     * rebuilding the WAAPI animation every frame.
+     */
+    const churnWindow = 100;
+    /**
+     * Named easings that are the same cubic-bezier in JS and CSS.
+     */
+    const isNativeEasing = (ease) => /^(linear|ease(In|Out|InOut))$/.test(ease);
+    const byTime = (a, b) => a - b;
+    /**
+     * n + 1 evenly spaced timestamps, from one timestamp to another.
+     */
+    const spread = (from, to, n) => {
+        const result = [];
+        for (let i = 0; i <= n; i++)
+            result.push(mixNumber$1(from, to, i / n));
+        return result;
+    };
+    const getOwner = (options) => options.motionValue.owner;
+    const getGroup = (element) => transformGroups.get(element);
+    const read = (owner, key) => owner.latestValues ? owner.latestValues[key] : owner.getValue(key)?.get();
+    /**
+     * Whether this animation should join its element's transform group.
+     * Animations that can't be accelerated still join, so the group knows
+     * to stay on the main thread while they run. Browsers without linear()
+     * easing stay on the main thread.
+     */
+    const canGroupTransform = ({ name, motionValue, }) => name &&
+        transformPropOrder.includes(name) &&
+        motionValue?.owner?.current instanceof HTMLElement &&
+        supportsWaapi() &&
+        supportsLinearEasing();
+    function canAccelerateTransform(options) {
+        const owner = getOwner(options);
+        const { onUpdate, transformTemplate } = owner.getProps();
+        return (
+        /**
+         * A handoff from an optimised appear animation is already running
+         * on its own WAAPI animation. onUpdate needs every value, every
+         * frame.
+         */
+        !options.isHandoff &&
+            !onUpdate &&
+            !options.hasOnUpdate &&
+            /**
+             * transformTemplate could output anything.
+             */
+            !transformTemplate &&
+            options.type !== "inertia" &&
+            /**
+             * A literal transform, or pathRotation, replaces or adds to the
+             * transform we'd build. styleEffect builds its own as "none".
+             */
+            (read(owner, "transform") || "none") === "none" &&
+            !read(owner, "pathRotation") &&
+            /**
+             * Layout animations write transform every frame.
+             */
+            !owner.projection?.isProjecting());
+    }
+    class TransformAnimation extends JSAnimation {
+        constructor(options) {
+            const element = getOwner(options).current;
+            const { driver = frameloopDriver } = options;
+            /**
+             * Before JSAnimation replaces the type with its generator.
+             */
+            const canAccelerate = canAccelerateTransform(options);
+            /**
+             * The driver ticks on the main thread only once the group has
+             * moved there. Until then, starting or stopping tells the group to
+             * update its WAAPI animation.
+             */
+            options.driver = (update) => {
+                const js = driver(update);
+                return {
+                    js,
+                    now: js.now,
+                    start: (keepAlive = true) => {
+                        const group = getGroup(element);
+                        const isJS = !group || group.isJS;
+                        /**
+                         * keepAlive is false when seeking. Seeking the WAAPI
+                         * animation is free, but if a seek needs a rebuild and
+                         * keeps happening, the group moves to the main thread.
+                         */
+                        isJS
+                            ? js.start(keepAlive)
+                            : group.schedule(false, !keepAlive);
+                    },
+                    stop: () => {
+                        js.stop();
+                        const group = getGroup(element);
+                        group?.schedule(!group.isFinishing);
+                    },
+                };
+            };
+            super(options);
+            this.canAccelerate = canAccelerate;
+            /**
+             * stop is bound in JSAnimation, so wrap it rather than override.
+             * Before stopping, set the motion value to where the WAAPI
+             * animation is now, with velocity, for the next animation to
+             * start from.
+             */
+            const { stop } = this;
+            this.stop = () => {
+                this.isAccelerated() && this.sync();
+                stop();
+            };
+        }
+        get group() {
+            return getGroup(getOwner(this.options).current);
+        }
+        get js() {
+            return this.driver?.js;
+        }
+        get name() {
+            return this.options.name;
+        }
+        /**
+         * When this stops moving, or, if it repeats forever, when it starts
+         * repeating, and how long each repeat takes. Held (paused, or at
+         * speed 0) animations never stop moving.
+         */
+        timing() {
+            const { startTime, speed, totalDuration } = this;
+            const { delay = 0, repeatType } = this.options;
+            return this.holdTime !== null
+                ? [Infinity, 0]
+                : totalDuration === Infinity
+                    ? [
+                        startTime + delay / speed,
+                        (this.resolvedDuration * (repeatType === "loop" ? 1 : 2)) /
+                            speed || 1,
+                    ]
+                    : [startTime + (delay + totalDuration) / speed, 0];
+        }
+        /**
+         * Whether this is running, or paused, on the compositor.
+         */
+        isAccelerated() {
+            const { group, state } = this;
+            return (group?.tracks.has(this) &&
+                !group.isJS &&
+                this.canAccelerate &&
+                (state === "running" || state === "paused"));
+        }
+        /**
+         * The value now, while this runs on the compositor and so doesn't
+         * set its motion value every frame.
+         */
+        liveValue() {
+            return this.isAccelerated() ? this.sampleAt(time.now()) : undefined;
+        }
+        /**
+         * If this is a two-keyframe tween whose easing WAAPI runs exactly,
+         * when it starts and stops moving, and that easing.
+         */
+        tween() {
+            const { keyframes: keyframes$1, type, ease, times, repeat, delay = 0 } = this.options;
+            const easing = isBezierDefinition(ease)
+                ? cubicBezierAsString(ease)
+                : isNativeEasing(ease) && supportedWaapiEasing[ease];
+            if (easing &&
+                !repeat &&
+                !times &&
+                keyframes$1.length === 2 &&
+                type === keyframes &&
+                this.holdTime === null) {
+                const start = this.startTime + delay / this.speed;
+                return [start, start + this.resolvedDuration / this.speed, easing];
+            }
+        }
+        /**
+         * The timestamps between two timestamps where this reaches a
+         * keyframe or starts a repeat, where it can turn or jump.
+         */
+        boundaries(from, to) {
+            const { startTime, speed, resolvedDuration, options } = this;
+            const { delay = 0, repeat = 0, repeatDelay = 0, repeatType, times, keyframes: keyframes$1, type, } = options;
+            const offsets = (type || keyframes) === keyframes
+                ? times || defaultOffset$1(keyframes$1)
+                : [0, 1];
+            const start = startTime + delay / speed;
+            const result = [];
+            if (this.holdTime !== null || !(resolvedDuration > 0))
+                return result;
+            for (let i = Math.max(0, Math.floor(((from - start) * speed) / resolvedDuration)); i <= repeat; i++) {
+                const iterationStart = start + (i * resolvedDuration) / speed;
+                if (iterationStart > to)
+                    break;
+                for (const offset of offsets) {
+                    const t = iterationStart +
+                        ((i % 2 && repeatType && repeatType !== "loop"
+                            ? 1 - offset
+                            : offset) *
+                            (resolvedDuration - repeatDelay)) /
+                            speed;
+                    t > from && t < to && result.push(t);
+                }
+            }
+            return result;
+        }
+        /**
+         * The value at a timestamp, as a number.
+         */
+        numberAt(timestamp) {
+            return parseFloat(this.sampleAt(timestamp, true));
+        }
+        /**
+         * Write the current value, and velocity, to the motion value.
+         */
+        sync() {
+            const now = time.now();
+            this.options.motionValue.setWithVelocity(this.sampleAt(now - sampleDelta, true), this.sampleAt(now, true), sampleDelta);
+        }
+        play() {
+            /**
+             * A stopped animation (one that was interrupted) can't play again,
+             * so it mustn't join the group.
+             */
+            if (this.isStopped)
+                return;
+            (this.group || createGroup(getOwner(this.options))).tracks.add(this);
+            super.play();
+        }
+        pause() {
+            super.pause();
+            if (this.isAccelerated()) {
+                this.sync();
+                this.group.schedule(false);
+            }
+        }
+        /**
+         * JSAnimation finishes on its next tick, which only happens on the
+         * main thread, so finish now.
+         */
+        complete() {
+            super.complete();
+            const { group } = this;
+            group && !group.isJS && this.canAccelerate && this.tick(time.now());
+        }
+        /**
+         * Without a tick to rebase it, a held time still includes the delay,
+         * so take it off here, as a JS animation does on its next tick.
+         */
+        get time() {
+            if (this.isAccelerated()) {
+                return millisecondsToSeconds(clamp(0, this.totalDuration, this.at(time.now()) - (this.options.delay || 0)));
+            }
+            return super.time;
+        }
+        set time(newTime) {
+            super.time = newTime;
+        }
+        /**
+         * Scroll timelines set time every frame, so run these on the main
+         * thread.
+         */
+        attachTimeline(timeline) {
+            this.canAccelerate = false;
+            this.group?.demote(true);
+            return super.attachTimeline(timeline);
+        }
+    }
+    function createGroup(owner) {
+        const element = owner.current;
+        const tracks = new Set();
+        const byKey = new Map();
+        /**
+         * Transforms that aren't animating, as built into the WAAPI animation.
+         */
+        let statics = {};
+        /**
+         * The transforms in the WAAPI animation, in order.
+         */
+        let keys = [];
+        let built = new Map();
+        let segments = [];
+        let needsBuild = false;
+        let isScheduled = false;
+        let hasChurned = false;
+        let lastChurn = -Infinity;
+        const has = (key) => {
+            for (const track of tracks)
+                if (track.name === key)
+                    return true;
+        };
+        /**
+         * The transform values at a timestamp or, without one, from the
+         * motion values. Animations that don't repeat forever are sampled no
+         * earlier than settled, so a loop that starts from an earlier cycle
+         * boundary holds them at their end.
+         */
+        const valuesAt = (timestamp, settled) => {
+            const values = {};
+            for (const key of timestamp === undefined ? transformPropOrder : keys) {
+                const track = byKey.get(key);
+                const value = timestamp === undefined
+                    ? read(owner, key)
+                    : track
+                        ? track.sampleAt(settled > timestamp && !track.timing()[1]
+                            ? settled
+                            : timestamp)
+                        : statics[key];
+                if (value !== undefined)
+                    values[key] = value;
+            }
+            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.
+         */
+        const compose = (timestamp, settled) => {
+            let transform = "";
+            const values = valuesAt(timestamp, settled);
+            for (const key in values) {
+                transform +=
+                    (translateAlias[key] || key) +
+                        "(" +
+                        getValueAsType(values[key], numberValueTypes[key]) +
+                        ") ";
+            }
+            return transform || "none";
+        };
+        /**
+         * Write the transform as an inline style, as the renderer would.
+         */
+        const commit = (values = valuesAt()) => {
+            element.style.transform = buildTransform$1(values, {});
+        };
+        /**
+         * Cancel the WAAPI animations, by default first committing the
+         * transform. The renderer writes its own version on its next render.
+         */
+        const stop = (shouldCommit = true) => {
+            shouldCommit && commit();
+            segments.forEach(({ animation }) => animation.cancel());
+            segments = [];
+        };
+        const add = (animation, offset, end = Infinity) => {
+            const segment = { animation, offset, end };
+            animation.startTime = time.now() + offset;
+            /**
+             * Animations finish when the WAAPI animation reaches their end.
+             * Once a loop has taken over, the finished animation isn't needed.
+             */
+            if (end < Infinity) {
+                animation.onfinish = () => {
+                    segment.isDone = true;
+                    if (segments.some((s) => s.end === Infinity)) {
+                        animation.cancel();
+                        segments = segments.filter((s) => s !== segment);
+                    }
+                    group.schedule(false);
+                };
+            }
+            /**
+             * Something else cancelled it, so carry on on the main thread.
+             */
+            animation.oncancel = () => segments.includes(segment) && group.demote();
+            segments.push(segment);
+        };
+        /**
+         * Where a value jumps between two timestamps, as when a repeat starts
+         * again: the timestamps either side of the jump, or none if it moves
+         * there continuously.
+         */
+        const jumpAt = (value, a, b) => {
+            const change = (x, y) => Math.abs(value(y) - value(x));
+            const size = change(a, b);
+            while (b - a > 0.01) {
+                const mid = (a + b) / 2;
+                change(a, mid) > change(mid, b) ? (b = mid) : (a = mid);
+            }
+            return change(a, b) > size / 2 ? [a, b] : [];
+        };
+        /**
+         * If every moving animation follows the same eased progress between
+         * two timestamps, the easing that describes it.
+         */
+        const getEasing = (moving, from, to, bounds) => {
+            const samples = Math.min(maxSamples, Math.max(2, Math.ceil((to - from) / sampleDelta)));
+            /**
+             * Too many keyframes or repeats to follow with this many samples.
+             */
+            if (bounds.length * 4 > samples)
+                return;
+            const at = spread(from, to, samples).concat(bounds).sort(byTime);
+            const position = (t) => progress(from, to, t);
+            let shared;
+            let progressAt;
+            for (const track of moving) {
+                const values = at.map((t) => track.numberAt(t));
+                const [first] = values;
+                const range = values[values.length - 1] - first;
+                const progress = values.map((value) => range ? (value - first) / range : value - first);
+                /**
+                 * A value that doesn't change, like one still in its delay,
+                 * fits any easing. One that changes but ends where it started
+                 * fits none.
+                 */
+                if (!range) {
+                    if (progress.some((p) => !(Math.abs(p) <= easingTolerance))) {
+                        return;
+                    }
+                }
+                else if (!shared) {
+                    shared = progress;
+                    progressAt = (t) => (track.numberAt(t) - first) / range;
+                }
+                else if (progress.some((p, i) => !(Math.abs(p - shared[i]) <= easingTolerance))) {
+                    return;
+                }
+            }
+            if (!shared ||
+                shared.every((p, i) => Math.abs(p - position(at[i])) <= easingTolerance)) {
+                return "linear";
+            }
+            /**
+             * A repeat that starts again jumps back, which takes two points at
+             * the same position.
+             */
+            const points = [];
+            const point = (t, p = progressAt(t)) => points.push(round(p) + " " + round(position(t) * 100) + "%");
+            shared.forEach((p, i) => {
+                i &&
+                    Math.abs(p - shared[i - 1]) > 0.2 &&
+                    jumpAt(progressAt, at[i - 1], at[i]).forEach((t) => point(t));
+                point(at[i], p);
+            });
+            return "linear(" + points + ")";
+        };
+        /**
+         * Sample timestamps between two timestamps, closer together where the
+         * moving animations curve.
+         */
+        const sample = (moving, from, to, bounds) => {
+            const times = [from];
+            /**
+             * Values that aren't numbers, like calc(), are left to the
+             * browser to interpolate.
+             */
+            const isStraight = (a, b) => moving.every((track) => !(Math.abs(track.numberAt((a + b) / 2) -
+                (track.numberAt(a) + track.numberAt(b)) / 2) >
+                (track.name.startsWith("scale")
+                    ? scaleTolerance
+                    : sampleTolerance)));
+            const split = (a, b, depth) => {
+                if (b - a < 1 || isStraight(a, b)) {
+                    times.push(b);
+                }
+                else if (depth < 4) {
+                    split(a, (a + b) / 2, depth + 1);
+                    split((a + b) / 2, b, depth + 1);
+                }
+                else {
+                    /**
+                     * Keyframes either side of a jump, like a repeat starting
+                     * again, so it doesn't play as a quick sweep.
+                     */
+                    for (const track of moving) {
+                        times.push(...jumpAt((t) => track.numberAt(t), a, b));
+                    }
+                    times.push(b);
+                }
+            };
+            /**
+             * Split at least every 100ms, and at every keyframe and repeat,
+             * either side of where a value can jump.
+             */
+            const ends = spread(from, to, Math.ceil((to - from) / 100));
+            for (const t of bounds)
+                ends.push(t, Math.min(t + 0.01, to));
+            let start = from;
+            for (const end of ends.sort(byTime)) {
+                end > start && split(start, end, 0);
+                start = end;
+            }
+            return times.sort(byTime);
+        };
+        /**
+         * If every moving animation is the same tween, started together, as
+         * happens for the values of one animate() call or transition, when
+         * they move and their native easing.
+         */
+        const getTween = (moving) => {
+            let shared;
+            for (const track of moving) {
+                const tween = track.tween();
+                if (!tween ||
+                    shared?.some((v, i) => i < 2
+                        ? Math.abs(tween[i] - v) > 1
+                        : tween[i] !== v)) {
+                    return;
+                }
+                shared = tween;
+            }
+            return shared;
+        };
+        /**
+         * A WAAPI animation of the composed transform between two timestamps.
          */
-        if (!name ||
-            !(acceleratedValues.has(name) || colorProperties.has(name))) {
-            return false;
-        }
-        const subject = motionValue?.owner?.current;
+        const run = (moving, from, to, options = { fill: "both" }, settled, nativeEasing) => {
+            const bounds = moving.flatMap((track) => track.boundaries(from, to));
+            const easing = nativeEasing || getEasing(moving, from, to, bounds);
+            const times = easing ? [from, to] : sample(moving, from, to, bounds);
+            const transform = times.map((t) => compose(t, settled));
+            let keyframes = { transform };
+            if (!easing) {
+                keyframes.offset = times.map((t) => progress(from, to, t));
+            }
+            /**
+             * If nothing moves, don't hold a transform, which, even at its
+             * default, would make the element a containing block. The empty
+             * animation still finishes the animations.
+             */
+            if (transform.every((t) => t === transform[0])) {
+                commit(valuesAt(from, settled));
+                keyframes = null;
+            }
+            return element.animate(keyframes, {
+                ...options,
+                duration: to - from,
+                easing: easing || "linear",
+            });
+        };
         /**
-         * We use instanceof checks instead of isHTMLElement()/isSVGElement()
-         * because we explicitly **don't** want elements in different timing
-         * contexts (i.e. popups) to be accelerated, as it's not possible to sync
-         * these animations properly with those driven from the main window
-         * frameloop.
+         * Replace the WAAPI animations with ones built from now. Returns
+         * undefined if the animations can't be composed.
          */
-        if (!(subject instanceof HTMLElement) &&
-            !(subject instanceof SVGElement)) {
-            return false;
-        }
-        const { onUpdate, transformTemplate } = motionValue.owner.getProps();
-        return (supportsWaapi() &&
+        const animate = (now) => {
             /**
-             * Force WAAPI for color properties with browser-only color formats
-             * (oklch, oklab, lab, lch, etc.) that the JS animation path can't parse.
+             * The finite part runs until the last finite animation (or the
+             * last delay) ends. Infinitely repeating animations then continue
+             * as one looping WAAPI animation, which needs them to share a
+             * cycle.
              */
-            (acceleratedValues.has(name) ||
-                (colorProperties.has(name) &&
-                    hasBrowserOnlyColors(keyframes))) &&
-            (name !== "transform" || !transformTemplate) &&
+            let end = now;
+            let cycle = 0;
+            let cycleStart = 0;
+            const moving = [];
+            const looping = [];
+            const ends = new Set();
+            byKey.clear();
+            built = new Map();
+            for (const track of tracks) {
+                byKey.set(track.name, track);
+                const [trackEnd, trackCycle] = track.timing();
+                const isHeld = trackEnd === Infinity;
+                built.set(track, [track.at(now), track.speed, isHeld]);
+                /**
+                 * Held animations don't move, so keep their motion values up
+                 * to date, as a JSAnimation would on a seek.
+                 */
+                if (isHeld) {
+                    track.sync();
+                    continue;
+                }
+                if (track.speed < 0)
+                    return;
+                if (trackCycle) {
+                    if (cycle) {
+                        const phase = (trackEnd - cycleStart) / trackCycle;
+                        if (Math.abs(trackCycle - cycle) > 1 ||
+                            Math.abs(phase - Math.round(phase)) * cycle > 1) {
+                            return;
+                        }
+                    }
+                    else {
+                        cycle = trackCycle;
+                        cycleStart = trackEnd;
+                    }
+                    looping.push(track);
+                }
+                else {
+                    ends.add(trackEnd);
+                }
+                moving.push(track);
+                end = Math.max(end, trackEnd);
+            }
+            statics = {};
             /**
-             * If we're outputting values to onUpdate then we can't use WAAPI as there's
-             * no way to read the value from WAAPI every frame.
+             * Transforms that aren't animating are left out at their default.
              */
-            !onUpdate &&
-            !repeatDelay &&
-            repeatType !== "mirror" &&
-            damping !== 0 &&
-            type !== "inertia");
+            keys = transformPropOrder.filter((key) => {
+                if (byKey.has(key))
+                    return true;
+                const value = (statics[key] = read(owner, key));
+                return (value !== undefined &&
+                    parseFloat(value) !==
+                        (key.startsWith("scale") ? 1 : 0));
+            });
+            stop(false);
+            /**
+             * Values that share one tween are one WAAPI animation of it, with
+             * two keyframes and its own easing, from when they started.
+             */
+            const tween = !cycle && getTween(moving);
+            try {
+                if (tween && tween[1] > now) {
+                    const [from, to, easing] = tween;
+                    add(run(moving, from, to, undefined, undefined, easing), from - now, to - from);
+                }
+                else if (end > now) {
+                    add(run(moving, now, end), 0, end - now);
+                    /**
+                     * Animations that end sooner finish on the events of
+                     * empty animations that end with them.
+                     */
+                    ends.forEach((trackEnd) => trackEnd < end - 1 &&
+                        add(element.animate(null, {
+                            duration: trackEnd - now,
+                        }), 0, trackEnd - now));
+                }
+                if (cycle) {
+                    /**
+                     * Build one cycle from a cycle boundary, so it repeats
+                     * seamlessly, and start it part way through.
+                     */
+                    const from = cycleStart + Math.floor((end - cycleStart) / cycle) * cycle;
+                    add(run(looping, from, from + cycle, {
+                        iterations: Infinity,
+                        iterationStart: (end - from) / cycle,
+                        /**
+                         * It must not fill backwards over the finite part
+                         * that runs before it.
+                         */
+                        fill: "forwards",
+                    }, end), end - now);
+                }
+            }
+            catch {
+                return;
+            }
+            /**
+             * Everything is held, so hold it with an inline style instead.
+             */
+            segments.length || stop();
+            return true;
+        };
+        /**
+         * If every animation has been paused, played, seeked or sped up
+         * together since the WAAPI animation was built, do the same to it.
+         * Returns false if it needs rebuilding instead.
+         */
+        const retime = (now) => {
+            let elapsed;
+            let rate = 0;
+            for (const track of tracks) {
+                const state = built.get(track);
+                if (!state)
+                    return false;
+                const [builtTime, builtSpeed, wasHeld] = state;
+                const trackTime = track.at(now);
+                const isHeld = track.timing()[0] === Infinity;
+                if (wasHeld) {
+                    if (isHeld && trackTime === builtTime)
+                        continue;
+                    return false;
+                }
+                const trackElapsed = (trackTime - builtTime) / builtSpeed;
+                const trackRate = isHeld ? 0 : track.speed / builtSpeed;
+                if (elapsed === undefined) {
+                    elapsed = trackElapsed;
+                    rate = trackRate;
+                }
+                else if (Math.abs(trackElapsed - elapsed) > 1 ||
+                    trackRate !== rate) {
+                    return false;
+                }
+            }
+            if (elapsed === undefined)
+                return true;
+            if (!segments.length)
+                return false;
+            for (const { offset, end, isDone } of segments) {
+                const local = elapsed - offset;
+                if (end < Infinity &&
+                    (isDone ? local < end - 1 : local < 0 || local >= end)) {
+                    return false;
+                }
+            }
+            for (const { animation, offset, isDone } of segments) {
+                if (isDone)
+                    continue;
+                const local = elapsed - offset;
+                if (rate) {
+                    animation.playbackRate = rate;
+                    animation.startTime = now - local / rate;
+                }
+                else {
+                    animation.pause();
+                    animation.currentTime = local;
+                }
+            }
+            return true;
+        };
+        const build = () => {
+            const now = time.now();
+            /**
+             * Finish the animations that have reached their end, which the
+             * WAAPI animation has already rendered.
+             */
+            if (!group.isJS) {
+                group.isFinishing = true;
+                tracks.forEach((track) => {
+                    const [trackEnd, trackCycle] = track.timing();
+                    if (track.state === "running" &&
+                        track.speed > 0 &&
+                        !trackCycle &&
+                        trackEnd <= now + 1) {
+                        track.complete();
+                        /**
+                         * From now it's checked for outside writes like any
+                         * other static transform. If the WAAPI animation never
+                         * rendered it (it was instant), rebuild with its value.
+                         */
+                        statics[track.name] = read(owner, track.name);
+                        built.has(track) || (needsBuild = true);
+                    }
+                });
+                group.isFinishing = false;
+            }
+            isScheduled = false;
+            tracks.forEach(({ state }, track) => {
+                if (state === "idle" || state === "finished")
+                    tracks.delete(track);
+            });
+            if (!tracks.size) {
+                transformGroups.delete(element);
+                group.isJS || stop();
+                return;
+            }
+            for (const track of tracks) {
+                if (!track.canAccelerate)
+                    return group.demote(true);
+            }
+            /**
+             * Everything that kept the group on the main thread has finished,
+             * so move the remaining animations back to the compositor.
+             */
+            if (group.isJS) {
+                group.isJS = false;
+                needsBuild = true;
+                tracks.forEach((track) => track.js?.stop());
+            }
+            const shouldBuild = needsBuild;
+            const churned = hasChurned;
+            needsBuild = hasChurned = false;
+            if (shouldBuild || !retime(now)) {
+                if (churned) {
+                    if (now - lastChurn < churnWindow)
+                        return group.demote();
+                    lastChurn = now;
+                }
+                if (!animate(now))
+                    return group.demote();
+            }
+        };
+        const group = {
+            tracks,
+            isJS: false,
+            isFinishing: false,
+            schedule(build_, isChurn) {
+                needsBuild || (needsBuild = build_);
+                hasChurned || (hasChurned = !!isChurn);
+                /**
+                 * Build in this frame's render step, so it's in place before
+                 * anything reads the DOM in postRender, or straight after the
+                 * current task outside of a frame.
+                 */
+                if (!isScheduled) {
+                    isScheduled = true;
+                    frameData.isProcessing
+                        ? frame.render(build, false, true)
+                        : queueMicrotask(build);
+                }
+            },
+            /**
+             * An outside write. Rebuild once, but if it keeps happening, move
+             * to the main thread.
+             */
+            check() {
+                if (group.isJS)
+                    return;
+                for (const key in statics) {
+                    if (read(owner, key) !== statics[key] && !has(key)) {
+                        return group.schedule(true, true);
+                    }
+                }
+            },
+            demote(canReturn) {
+                if (group.isJS)
+                    return;
+                /**
+                 * Unless only another animation is holding the group on the
+                 * main thread, these animations stay there until they end.
+                 */
+                tracks.forEach((track) => {
+                    track.isAccelerated() && track.sync();
+                    canReturn || (track.canAccelerate = false);
+                });
+                group.isJS = true;
+                built = new Map();
+                stop();
+                tracks.forEach((track) => track.state === "running" && track.js?.start());
+            },
+        };
+        transformGroups.set(element, group);
+        return group;
     }
 
     class AsyncMotionValueAnimation extends WithPromise {
@@ -3397,6 +4367,11 @@
              * values may not be valid CSS and would trigger browser warnings.
              */
             const useWaapi = canAnimateValue && !isHandoff && supportsBrowserAnimation(options);
+            /**
+             * Independent transforms (x, scale etc) on an HTML element are
+             * composed into one WAAPI transform animation per element.
+             */
+            const isGroupedTransform = !useWaapi && canGroupTransform(options);
             /**
              * Resolve startTime for the animation. A startTime passed in options
              * (an optimised appear handoff syncing to its WAAPI animation) takes
@@ -3412,7 +4387,10 @@
              * animation started in that moment stays in sync. WAAPI has no frame
              * of ours to do that on.
              */
-            if (sync && (useWaapi || this.resolvedAt !== this.createdAt)) {
+            if (sync &&
+                (useWaapi ||
+                    isGroupedTransform ||
+                    this.resolvedAt !== this.createdAt)) {
                 options.startTime ?? (options.startTime = resolveStartTime(this.createdAt, this.resolvedAt));
             }
             let animation;
@@ -3430,6 +4408,9 @@
                     animation = new JSAnimation(options);
                 }
             }
+            else if (isGroupedTransform) {
+                animation = new TransformAnimation(options);
+            }
             else {
                 animation = new JSAnimation(options);
             }
@@ -3445,6 +4426,12 @@
         then(onResolve, _onReject) {
             return this.finished.finally(onResolve).then(() => { });
         }
+        /**
+         * The value now, if the animation runs on the compositor.
+         */
+        liveValue() {
+            return this._animation?.liveValue?.();
+        }
         get animation() {
             if (!this._animation) {
                 this.keyframeResolver?.resume();
@@ -3882,6 +4869,18 @@
             if (collectMotionValues.current) {
                 collectMotionValues.current.push(this);
             }
+            /**
+             * A value animating on the compositor isn't updated every frame,
+             * so read it from its animation.
+             */
+            const sampled = this.animation?.liveValue?.();
+            return sampled === undefined ? this.current : sampled;
+        }
+        /**
+         * The value as last set. Unlike get(), this doesn't read an animation
+         * running on the compositor, which renders the value itself.
+         */
+        getCurrent() {
             return this.current;
         }
         /**
@@ -4108,6 +5107,7 @@
             name,
             motionValue: value,
             element: isHandoff ? undefined : element,
+            hasOnUpdate: !!valueTransition.onUpdate,
         };
         /**
          * If there's no transition defined for this value, we can generate
@@ -4707,6 +5707,30 @@
         constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {
             super(unresolvedKeyframes, onComplete, name, motionValue, element, true);
         }
+        /**
+         * Keyframes that don't need reading from the DOM, or measuring,
+         * resolve straight away rather than in the frame loop's batched read.
+         */
+        scheduleResolve() {
+            if (this.canReadNow()) {
+                this.readKeyframes();
+                if (!this.needsMeasurement)
+                    return this.complete();
+            }
+            super.scheduleResolve();
+        }
+        canReadNow() {
+            const { unresolvedKeyframes, element, motionValue } = this;
+            const origin = unresolvedKeyframes[0] ?? motionValue?.get();
+            if (!element?.current || origin === undefined)
+                return false;
+            for (let i = 0; i < unresolvedKeyframes.length; i++) {
+                if (containsCSSVariable(i ? unresolvedKeyframes[i] : origin)) {
+                    return false;
+                }
+            }
+            return true;
+        }
         readKeyframes() {
             const { unresolvedKeyframes, element, name } = this;
             if (!element || !element.current)
@@ -5050,15 +6074,6 @@
         return isObject(element) && "ownerSVGElement" in element;
     }
 
-    /**
-     * Provided a value and a ValueType, returns the value as that value type.
-     */
-    const getValueAsType = (value, type) => {
-        return type && typeof value === "number"
-            ? type.transform(value)
-            : value;
-    };
-
     function resolveElements(elementOrSelector, scope, selectorCache) {
         if (elementOrSelector == null) {
             return [];
@@ -5232,18 +6247,12 @@
         });
     }
 
-    const translateAlias$1 = {
-        x: "translateX",
-        y: "translateY",
-        z: "translateZ",
-        transformPerspective: "perspective",
-    };
     /**
      * Cache of `translateX(`-style openers so each render is a few string
      * concatenations rather than a template per transform.
      */
     const openers = {};
-    function buildTransform$1(state) {
+    function buildTransform(state) {
         let transform = "";
         const { transformKeys: keys = [], transformValues: values = {} } = state;
         /**
@@ -5252,7 +6261,7 @@
          */
         for (let i = 0; i < keys.length; i++) {
             const key = keys[i];
-            const value = values[key].get();
+            const value = values[key].getCurrent();
             if (value === undefined)
                 continue;
             const parsed = typeof value === "number" ? value : parseFloat(value);
@@ -5260,7 +6269,7 @@
                 transform +=
                     (transform && " ") +
                         (openers[key] ||
-                            (openers[key] = (translateAlias$1[key] || key) + "(")) +
+                            (openers[key] = (translateAlias[key] || key) + "(")) +
                         getValueAsType(value, transformValueTypes[key]) +
                         ")";
             }
@@ -5303,7 +6312,8 @@
                     addStyleValue(element, state, "transformBox", new MotionValue("fill-box"));
                 }
                 state.set("transform", new MotionValue("none"), () => {
-                    element.style.transform = buildTransform$1(state);
+                    transformGroups.get(element)?.check();
+                    element.style.transform = buildTransform(state);
                 });
             }
             computed = state.get("transform");
@@ -5321,12 +6331,12 @@
         }
         else if (isCSSVar(key)) {
             render = () => {
-                element.style.setProperty(key, value.get());
+                element.style.setProperty(key, value.getCurrent());
             };
         }
         else {
             render = () => {
-                element.style[key] = getValueAsType(value.get(), numberValueTypes[key]);
+                element.style[key] = getValueAsType(value.getCurrent(), numberValueTypes[key]);
             };
         }
         return state.set(key, value, render, computed);
@@ -5358,73 +6368,8 @@
         test: isStyleSubject,
         read: readStyleValue,
     });
-    const styleEffect = /*@__PURE__*/ createSelectorEffect(styleSubjectEffect);
-
-    const translateAlias = {
-        x: "translateX",
-        y: "translateY",
-        z: "translateZ",
-        transformPerspective: "perspective",
-    };
-    const numTransforms = transformPropOrder.length;
-    /**
-     * Build a CSS transform style from individual x/y/scale etc properties.
-     *
-     * This outputs with a default order of transforms/scales/rotations, this can be customised by
-     * providing a transformTemplate function.
-     */
-    function buildTransform(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.
-         */
-        for (let i = 0; i < numTransforms; i++) {
-            const key = transformPropOrder[i];
-            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;
-                }
-            }
-        }
-        // `pathRotation` composes onto `rotate` as a separate additive term so
-        // the user's `rotate` is never clobbered. Deliberately not a slot in
-        // `transformPropOrder`.
-        const pathRotation = latestValues.pathRotation;
-        if (pathRotation) {
-            transformIsDefault = false;
-            transformString += `rotate(${getValueAsType(pathRotation, numberValueTypes.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;
-    }
+    const styleEffect = 
+    /*@__PURE__*/ createSelectorEffect(styleSubjectEffect);
 
     function buildHTMLStyles(state, latestValues, transformTemplate) {
         const { style, vars, transformOrigin } = state;
@@ -5464,7 +6409,7 @@
         }
         if (!latestValues.transform) {
             if (hasTransform || transformTemplate) {
-                style.transform = buildTransform(latestValues, state.transform, transformTemplate);
+                style.transform = buildTransform$1(latestValues, state.transform, transformTemplate);
             }
             else if (style.transform) {
                 /**
@@ -6426,13 +7371,46 @@
             return from === "last" ? lastIndex : lastIndex / 2;
         }
     }
-    function stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {
+    function stagger(duration = 0.1, { startDelay = 0, from = 0, ease, grid } = {}) {
+        /**
+         * Distances from the origin for each element count. The final entry
+         * holds the distance used to normalise easing.
+         */
+        const cache = {};
         return (i, total) => {
-            const fromIndex = typeof from === "number" ? from : getOriginIndex(from, total);
-            const distance = Math.abs(fromIndex - i);
-            let delay = duration * distance;
-            if (ease) {
-                const maxDelay = total * duration;
+            let distances = cache[total];
+            if (!distances) {
+                const [columns, rows] = grid || [Infinity, 1];
+                const lastX = Math.min(columns, total) - 1;
+                const lastY = Math.max(rows, Math.ceil(total / columns)) - 1;
+                const isIndex = typeof from === "number";
+                const scale = from === "first" ? 0 : from === "last" ? 1 : 0.5;
+                const originX = isIndex ? from % columns : lastX * scale;
+                const originY = isIndex ? Math.floor(from / columns) : lastY * scale;
+                distances = cache[total] = [];
+                for (let j = 0; j < total; j++) {
+                    const x = j % columns;
+                    const y = Math.floor(j / columns);
+                    const edgeX = Math.min(x, lastX - x);
+                    const edgeY = Math.min(y, lastY - y);
+                    if (from === "random") {
+                        // Inside-out shuffle, so each element gets a distinct step
+                        const k = (Math.random() * (j + 1)) | 0;
+                        distances[j] = distances[k];
+                        distances[k] = j;
+                    }
+                    else {
+                        distances[j] =
+                            from === "edges"
+                                ? Math.min(lastX ? edgeX : edgeY, lastY ? edgeY : edgeX)
+                                : Math.hypot(x - originX, y - originY);
+                    }
+                }
+                distances.push(grid ? Math.max(...distances) : total);
+            }
+            let delay = duration * distances[i];
+            const maxDelay = duration * distances[total];
+            if (ease && maxDelay) {
                 const easingFunction = easingDefinitionToFunction(ease);
                 delay = easingFunction(delay / maxDelay) * maxDelay;
             }
@@ -6666,7 +7644,7 @@
         }, stopAnimation);
         if (isMotionValue(source)) {
             let skipNextAnimation = options.skipInitialAnimation === true;
-            const removeSourceOnChange = source.on("change", (v) => {
+            const onSourceChange = (v) => {
                 if (skipNextAnimation) {
                     skipNextAnimation = false;
                     value.jump(parseValue(v, unit), false);
@@ -6674,11 +7652,28 @@
                 else {
                     value.set(parseValue(v, unit));
                 }
-            });
+            };
+            const removeSourceOnChange = source.on("change", onSourceChange);
+            /**
+             * Catch up on a change made before we subscribed, for instance
+             * between a React render reading the source and the effect
+             * attaching to it. Subtracting is falsy for equal or non-numeric
+             * (NaN) values.
+             */
+            const latest = source.get();
+            if (asNumber(latest) - asNumber(value.get()))
+                onSourceChange(latest);
             const removeValueOnDestroy = value.on("destroy", removeSourceOnChange);
+            /**
+             * Stop our animation on detach, otherwise a re-attach (new
+             * options, Strict Mode) starts a second animation that fights
+             * this orphaned one. The catch-up above resumes from the
+             * current value and velocity.
+             */
             return () => {
                 removeSourceOnChange();
                 removeValueOnDestroy();
+                stopAnimation();
             };
         }
         return stopAnimation;
@@ -8368,8 +9363,11 @@
             const removeOnChange = value.on("change", (latestValue) => {
                 this.latestValues[key] = latestValue;
                 this.props.onUpdate && frame.preRender(this.notifyUpdate);
-                if (valueIsTransform && this.projection) {
-                    this.projection.isTransformDirty = true;
+                if (valueIsTransform) {
+                    if (this.projection) {
+                        this.projection.isTransformDirty = true;
+                    }
+                    transformGroups.get(this.current)?.check();
                 }
                 this.scheduleRender();
             });
@@ -8453,9 +9451,18 @@
          * added to our map, old ones removed, and listeners updated.
          */
         update(props, presenceContext) {
-            if (props.transformTemplate || this.props.transformTemplate) {
+            const { transformTemplate, onUpdate } = this.props;
+            if (props.transformTemplate || transformTemplate) {
                 this.scheduleRender();
             }
+            /**
+             * Transforms on the compositor can't use a new transformTemplate
+             * or onUpdate, so move them to the main thread.
+             */
+            if ((props.transformTemplate && !transformTemplate) ||
+                (props.onUpdate && !onUpdate)) {
+                transformGroups.get(this.current)?.demote();
+            }
             this.prevProps = this.props;
             this.props = props;
             this.prevPresenceContext = this.presenceContext;
@@ -8829,8 +9836,13 @@
     function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
         for (const key in props) {
-            if (isMotionValue(props[key]) ||
-                isMotionValue(prevProps[key])) {
+            /**
+             * A MotionValue child is rendered as text content by
+             * DOMVisualElement, so it mustn't also be written as an attribute.
+             */
+            if (key !== "children" &&
+                (isMotionValue(props[key]) ||
+                    isMotionValue(prevProps[key]))) {
                 const targetKey = transformPropOrder.indexOf(key) !== -1
                     ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
                     : key;
@@ -9750,6 +10762,7 @@
             }
         }
     }
+    const demoteTransforms = ({ instance }) => instance && transformGroups.get(instance)?.demote();
     function cancelTreeOptimisedTransformAnimations(projectionNode) {
         projectionNode.hasCheckedOptimisedAppear = true;
         if (projectionNode.root === projectionNode)
@@ -10111,10 +11124,17 @@
                 !this.root.isUpdating && this.root.startUpdate();
                 if (this.isLayoutDirty)
                     return;
+                /**
+                 * Accelerated transforms aren't reflected in latestValues or
+                 * removed by resetTransform, so move them back to the main
+                 * thread before this node, or its ancestors, are measured.
+                 */
+                demoteTransforms(this);
                 this.isLayoutDirty = true;
                 for (let i = 0; i < this.path.length; i++) {
                     const node = this.path[i];
                     node.shouldResetTransform = true;
+                    demoteTransforms(node);
                     /**
                      * Percentage translates resolve against layoutBox dimensions,
                      * so ancestors with them must be re-measured after transform reset.
@@ -10317,6 +11337,7 @@
                 const isResetRequested = this.isLayoutDirty ||
                     this.shouldResetTransform ||
                     this.options.alwaysMeasureLayout;
+                isResetRequested && demoteTransforms(this);
                 const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
                 const transformTemplate = this.getTransformTemplate();
                 const transformTemplateValue = transformTemplate
@@ -13242,7 +14263,7 @@
     exports.buildProjectionTransform = buildProjectionTransform;
     exports.buildSVGAttrs = buildSVGAttrs;
     exports.buildSVGPath = buildSVGPath;
-    exports.buildTransform = buildTransform;
+    exports.buildTransform = buildTransform$1;
     exports.calcAxisDelta = calcAxisDelta;
     exports.calcBoxDelta = calcBoxDelta;
     exports.calcChildStagger = calcChildStagger;
@@ -13444,6 +14465,8 @@
     exports.rgbUnit = rgbUnit;
     exports.rgba = rgba;
     exports.rootProjectionNode = rootProjectionNode;
+    exports.round = round;
+    exports.sampleDelta = sampleDelta;
     exports.scale = scale;
     exports.scaleCorrectors = scaleCorrectors;
     exports.scalePoint = scalePoint;
@@ -13471,6 +14494,7 @@
     exports.supportsPartialKeyframes = supportsPartialKeyframes;
     exports.supportsScrollTimeline = supportsScrollTimeline;
     exports.supportsViewTimeline = supportsViewTimeline;
+    exports.supportsWaapi = supportsWaapi;
     exports.svgEffect = svgEffect;
     exports.svgSubjectEffect = svgSubjectEffect;
     exports.sync = sync;