motion 14.3.0 → 14.3.1

package/dist/motion.dev.js

@@ -3546,6 +3546,7 @@
         constructor(options) {
             const element = getOwner(options).current;
             const { driver = frameloopDriver } = options;
+            let animation;
             /**
              * Before JSAnimation replaces the type with its generator.
              */
@@ -3575,11 +3576,12 @@
                     stop: () => {
                         js.stop();
                         const group = getGroup(element);
-                        group?.schedule(!group.isFinishing);
+                        group && !group.isFinishing && group.release(animation);
                     },
                 };
             };
             super(options);
+            animation = this;
             this.canAccelerate = canAccelerate;
             /**
              * stop is bound in JSAnimation, so wrap it rather than override.
@@ -3735,8 +3737,14 @@
             }
             return super.time;
         }
+        /**
+         * A JS animation sets its motion value from a seek on its next tick.
+         * This doesn't tick, so set it now, rather than leave it to be set
+         * when this next stops.
+         */
         set time(newTime) {
             super.time = newTime;
+            this.isAccelerated() && this.sync();
         }
         /**
          * Scroll timelines set time every frame, so run these on the main
@@ -3764,6 +3772,7 @@
         let segments = [];
         let needsBuild = false;
         let isScheduled = false;
+        let isEnded = false;
         let hasChurned = false;
         let lastChurn = -Infinity;
         const has = (key) => {
@@ -3880,8 +3889,19 @@
             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);
+                const changes = values.map((value) => value - first);
+                const end = changes[changes.length - 1];
+                /**
+                 * A value that ends only a tiny way from where it started, as
+                 * a round trip does if it's built just after it starts, or
+                 * from a float residue, ends where it started. Dividing by
+                 * that tiny range would stretch the easing to values the
+                 * compositor can't render.
+                 */
+                const range = changes.some((change) => Math.abs(change) * easingTolerance > Math.abs(end))
+                    ? 0
+                    : end;
+                const progress = changes.map((change) => range ? change / range : change);
                 /**
                  * A value that doesn't change, like one still in its delay,
                  * fits any easing. One that changes but ends where it started
@@ -4183,6 +4203,18 @@
             }
             return true;
         };
+        /**
+         * If no animations are left, write where they got to and cancel the
+         * WAAPI animations. Returns whether the group ended.
+         */
+        const end = () => {
+            if (tracks.size)
+                return false;
+            isEnded = true;
+            transformGroups.delete(element);
+            group.isJS || stop();
+            return true;
+        };
         const build = () => {
             const now = time.now();
             /**
@@ -4210,15 +4242,14 @@
                 group.isFinishing = false;
             }
             isScheduled = false;
+            if (isEnded)
+                return;
             tracks.forEach(({ state }, track) => {
                 if (state === "idle" || state === "finished")
                     tracks.delete(track);
             });
-            if (!tracks.size) {
-                transformGroups.delete(element);
-                group.isJS || stop();
+            if (end())
                 return;
-            }
             for (const track of tracks) {
                 if (!track.canAccelerate)
                     return group.demote(true);
@@ -4250,6 +4281,8 @@
             isJS: false,
             isFinishing: false,
             schedule(build_, isChurn) {
+                if (isEnded)
+                    return;
                 needsBuild || (needsBuild = build_);
                 hasChurned || (hasChurned = !!isChurn);
                 /**
@@ -4264,6 +4297,21 @@
                         : queueMicrotask(build);
                 }
             },
+            /**
+             * End the group now, rather than when it next builds, so the
+             * element's transform is the caller's again as soon as its last
+             * animation is stopped.
+             */
+            release(track) {
+                /**
+                 * Only drop the stopped animation. Others can be idle because
+                 * they're part way through play(), and are about to run.
+                 */
+                const { state } = track;
+                if (state === "idle" || state === "finished")
+                    tracks.delete(track);
+                end() || group.schedule(true);
+            },
             /**
              * An outside write. Rebuild once, but if it keeps happening, move
              * to the main thread.
@@ -4278,7 +4326,7 @@
                 }
             },
             demote(canReturn) {
-                if (group.isJS)
+                if (group.isJS || isEnded)
                     return;
                 /**
                  * Unless only another animation is holding the group on the
@@ -5285,11 +5333,11 @@
                 }
                 return sample({ x: tx, y: ty }, { x: 0, y: 0 });
             },
-            animateVisualElement(visualElement, target, transition, delay, animations) {
+            animateValues(getValue, target, transition, delay, animations) {
                 if (!("x" in target || "y" in target))
                     return;
-                const xValue = visualElement.getValue("x", visualElement.latestValues["x"] ?? 0);
-                const yValue = visualElement.getValue("y", visualElement.latestValues["y"] ?? 0);
+                const xValue = getValue("x");
+                const yValue = getValue("y");
                 const xRaw = target.x;
                 const yRaw = target.y;
                 const xFrom = (Array.isArray(xRaw) && xRaw[0] != null
@@ -5312,7 +5360,7 @@
                 // concurrent rotate animation composes and nothing accumulates
                 // on interrupt.
                 const pathRotationValue = interpolate(0).rotate !== undefined
-                    ? visualElement.getValue("pathRotation", 0)
+                    ? getValue("pathRotation")
                     : undefined;
                 const pathTransition = {
                     delay,
@@ -5522,7 +5570,9 @@
         const path = transition?.path;
         if (path) {
             // path mutates `target` to claim x/y; loop below skips them.
-            path.animateVisualElement(visualElement, target, transition, delay, animations);
+            path.animateValues
+                ? path.animateValues((key) => visualElement.getValue(key, visualElement.latestValues[key] ?? 0), target, transition, delay, animations)
+                : path.animateVisualElement?.(visualElement, target, transition, delay, animations);
         }
         for (const key in target) {
             const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
@@ -5981,8 +6031,16 @@
      */
     function animateValues(getValue, keyframes, transition = {}, element) {
         const animations = [];
-        const { velocity } = transition;
+        const { velocity, path } = transition;
         const reduceMotion = transition.reduceMotion ?? element?.shouldReduceMotion;
+        /**
+         * Only elements have x/y to move along a path. path claims them by
+         * deleting them, so hand it a copy.
+         */
+        if (path?.animateValues && element) {
+            keyframes = { ...keyframes };
+            path.animateValues(getValue, keyframes, transition, 0, animations);
+        }
         for (const key in keyframes) {
             if (key === "transition" || key === "transitionEnd")
                 continue;
@@ -6587,7 +6645,7 @@
         }
     }
     const addSVGValue = (element, state, key, value) => {
-        if (key.startsWith("path")) {
+        if (key.startsWith("path") && !transformProps.has(key)) {
             return addSVGPathValue(element, state, key, value);
         }
         else if (key.startsWith("attr")) {
@@ -6688,6 +6746,7 @@
             values.rotate ||
             values.rotateX ||
             values.rotateY ||
+            values.rotateZ ||
             values.skewX ||
             values.skewY);
     }
@@ -10473,7 +10532,7 @@
             transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
         }
         if (latestTransform) {
-            const { transformPerspective, rotate, pathRotation, rotateX, rotateY, skewX, skewY, } = latestTransform;
+            const { transformPerspective, rotate, pathRotation, rotateX, rotateY, rotateZ, skewX, skewY, } = latestTransform;
             if (transformPerspective)
                 transform = `perspective(${transformPerspective}px) ${transform}`;
             if (rotate)
@@ -10485,6 +10544,8 @@
                 transform += `rotateX(${rotateX}deg) `;
             if (rotateY)
                 transform += `rotateY(${rotateY}deg) `;
+            if (rotateZ)
+                transform += `rotateZ(${rotateZ}deg) `;
             if (skewX)
                 transform += `skewX(${skewX}deg) `;
             if (skewY)
@@ -10503,6 +10564,15 @@
     }
 
     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) {
@@ -10537,10 +10607,14 @@
             }
         }
         /**
-         * Mix rotation
+         * Mix rotation and skew. These can't be projected, so mix them every
+         * frame rather than leaving them frozen at the animation-start snapshot.
          */
-        if (follow.rotate || lead.rotate) {
-            target.rotate = mixNumber$1(follow.rotate || 0, lead.rotate || 0, progress);
+        for (let i = 0; i < numMixedTransforms; i++) {
+            const key = mixedTransforms[i];
+            if (follow[key] || lead[key]) {
+                target[key] = mixNumber$1(follow[key] || 0, lead[key] || 0, progress);
+            }
         }
     }
     function getRadius(values, radiusName) {
@@ -10990,82 +11064,92 @@
                 if (layoutId) {
                     this.root.registerSharedNode(layoutId, this);
                 }
-                // Only register the handler if it requires layout animation
-                if (this.options.animate !== false &&
-                    visualElement &&
-                    (layoutId || layout)) {
-                    this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeLayoutChanged, layout: newLayout, }) => {
-                        if (this.isAnimationBlocked) {
-                            this.target = undefined;
-                            this.relativeTarget = undefined;
-                            return;
+                this.addLayoutListener();
+            }
+            /**
+             * Only register the layout animation handler if this node requires
+             * layout animation. This is called on mount, and again whenever options
+             * change, as `layout` or `layoutId` may be enabled after mount.
+             */
+            addLayoutListener() {
+                const { layoutId, layout, visualElement, animate } = this.options;
+                if (!this.instance ||
+                    this.hasLayoutListener ||
+                    animate === false ||
+                    !visualElement ||
+                    !(layoutId || layout))
+                    return;
+                this.hasLayoutListener = true;
+                this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeLayoutChanged, layout: newLayout, }) => {
+                    if (this.isAnimationBlocked) {
+                        this.target = undefined;
+                        this.relativeTarget = undefined;
+                        return;
+                    }
+                    // TODO: Check here if an animation exists
+                    const layoutTransition = this.options.transition ||
+                        visualElement.getDefaultTransition() ||
+                        defaultLayoutTransition;
+                    const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();
+                    /**
+                     * The target layout of the element might stay the same,
+                     * but its position relative to its parent has changed.
+                     */
+                    const hasTargetChanged = !this.targetLayout ||
+                        !boxEqualsRounded(this.targetLayout, newLayout);
+                    /*
+                     * Note: Disabled to fix relative animations always triggering new
+                     * layout animations. If this causes further issues, we can try
+                     * a different approach to detecting relative target changes.
+                     */
+                    // || hasRelativeLayoutChanged
+                    /**
+                     * If the layout hasn't seemed to have changed, it might be that the
+                     * element is visually in the same place in the document but its position
+                     * relative to its parent has indeed changed. So here we check for that.
+                     */
+                    const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeLayoutChanged;
+                    if (this.options.layoutRoot ||
+                        this.resumeFrom ||
+                        hasOnlyRelativeTargetChanged ||
+                        (hasLayoutChanged &&
+                            (hasTargetChanged || !this.currentAnimation))) {
+                        if (this.resumeFrom) {
+                            this.resumingFrom = this.resumeFrom;
+                            this.resumingFrom.resumingFrom = undefined;
+                        }
+                        const animationOptions = {
+                            ...getValueTransition$1(layoutTransition, "layout"),
+                            onPlay: onLayoutAnimationStart,
+                            onComplete: onLayoutAnimationComplete,
+                        };
+                        if (visualElement.shouldReduceMotion ||
+                            this.options.layoutRoot) {
+                            animationOptions.delay = 0;
+                            animationOptions.type = false;
                         }
-                        // TODO: Check here if an animation exists
-                        const layoutTransition = this.options.transition ||
-                            visualElement.getDefaultTransition() ||
-                            defaultLayoutTransition;
-                        const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();
+                        this.startAnimation(animationOptions);
                         /**
-                         * The target layout of the element might stay the same,
-                         * but its position relative to its parent has changed.
-                         */
-                        const hasTargetChanged = !this.targetLayout ||
-                            !boxEqualsRounded(this.targetLayout, newLayout);
-                        /*
-                         * Note: Disabled to fix relative animations always triggering new
-                         * layout animations. If this causes further issues, we can try
-                         * a different approach to detecting relative target changes.
+                         * Set animation origin after starting animation to avoid layout jump
+                         * caused by stopping previous layout animation
                          */
-                        // || hasRelativeLayoutChanged
+                        this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged, animationOptions.path);
+                    }
+                    else {
                         /**
-                         * If the layout hasn't seemed to have changed, it might be that the
-                         * element is visually in the same place in the document but its position
-                         * relative to its parent has indeed changed. So here we check for that.
+                         * If the layout hasn't changed and we have an animation that hasn't started yet,
+                         * finish it immediately. Otherwise it will be animating from a location
+                         * that was probably never committed to screen and look like a jumpy box.
                          */
-                        const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeLayoutChanged;
-                        if (this.options.layoutRoot ||
-                            this.resumeFrom ||
-                            hasOnlyRelativeTargetChanged ||
-                            (hasLayoutChanged &&
-                                (hasTargetChanged || !this.currentAnimation))) {
-                            if (this.resumeFrom) {
-                                this.resumingFrom = this.resumeFrom;
-                                this.resumingFrom.resumingFrom = undefined;
-                            }
-                            const animationOptions = {
-                                ...getValueTransition$1(layoutTransition, "layout"),
-                                onPlay: onLayoutAnimationStart,
-                                onComplete: onLayoutAnimationComplete,
-                            };
-                            if (visualElement.shouldReduceMotion ||
-                                this.options.layoutRoot) {
-                                animationOptions.delay = 0;
-                                animationOptions.type = false;
-                            }
-                            this.startAnimation(animationOptions);
-                            /**
-                             * Set animation origin after starting animation to avoid layout jump
-                             * caused by stopping previous layout animation
-                             */
-                            this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged, animationOptions
-                                .path);
+                        if (!hasLayoutChanged) {
+                            finishAnimation(this);
                         }
-                        else {
-                            /**
-                             * If the layout hasn't changed and we have an animation that hasn't started yet,
-                             * finish it immediately. Otherwise it will be animating from a location
-                             * that was probably never committed to screen and look like a jumpy box.
-                             */
-                            if (!hasLayoutChanged) {
-                                finishAnimation(this);
-                            }
-                            if (this.isLead() && this.options.onExitComplete) {
-                                this.options.onExitComplete();
-                            }
+                        if (this.isLead() && this.options.onExitComplete) {
+                            this.options.onExitComplete();
                         }
-                        this.targetLayout = newLayout;
-                    });
-                }
+                    }
+                    this.targetLayout = newLayout;
+                });
             }
             unmount() {
                 this.options.layoutId && this.willUpdate();
@@ -11075,6 +11159,7 @@
                 this.parent && this.parent.children.delete(this);
                 this.instance = undefined;
                 this.eventHandlers.clear();
+                this.hasLayoutListener = false;
                 cancelFrame(this.updateProjection);
             }
             // only on the root
@@ -11245,7 +11330,16 @@
             }
             clearAllSnapshots() {
                 this.nodes.forEach(clearSnapshot);
-                this.sharedNodes.forEach(removeLeadSnapshots);
+                /**
+                 * A stack's last member can unmount while a replacement with the
+                 * same layoutId mounts in the same commit, so the stack (and its
+                 * lead) must outlive the unmount for the replacement to resume
+                 * from it. By now that handoff has happened, so stacks that are
+                 * still empty only retain unmounted nodes and can be released.
+                 */
+                this.sharedNodes.forEach((stack, layoutId) => stack.members.length
+                    ? stack.removeLeadSnapshot()
+                    : this.sharedNodes.delete(layoutId));
             }
             scheduleUpdateProjection() {
                 if (!this.projectionUpdateScheduled) {
@@ -11469,6 +11563,7 @@
                     ...options,
                     crossfade: options.crossfade !== undefined ? options.crossfade : true,
                 };
+                this.addLayoutListener();
             }
             clearMeasurements() {
                 this.scroll = undefined;
@@ -12398,9 +12493,6 @@
     function resetSkewAndRotation(node) {
         node.resetSkewAndRotation();
     }
-    function removeLeadSnapshots(stack) {
-        stack.removeLeadSnapshot();
-    }
     function mixAxisDeltaLinear(output, delta, p) {
         output.translate = mixNumber$1(delta.translate, 0, p);
         output.scale = mixNumber$1(delta.scale, 1, p);