framer-motion 12.42.0 → 12.42.2

package/dist/framer-motion.dev.js

@@ -4595,6 +4595,19 @@
         }
     }
 
+    /**
+     * The four corner-radius longhands. Shared so the projection mixer, scale
+     * corrector, WAAPI px-value set and view-transition crop pass don't each carry
+     * their own copy. Order is irrelevant - every consumer mixes/corrects/animates
+     * each corner independently.
+     */
+    const cornerRadiusProps = [
+        "borderTopLeftRadius",
+        "borderTopRightRadius",
+        "borderBottomRightRadius",
+        "borderBottomLeftRadius",
+    ];
+
     const pxValues = new Set([
         // Border props
         "borderWidth",
@@ -4603,10 +4616,7 @@
         "borderBottomWidth",
         "borderLeftWidth",
         "borderRadius",
-        "borderTopLeftRadius",
-        "borderTopRightRadius",
-        "borderBottomRightRadius",
-        "borderBottomLeftRadius",
+        ...cornerRadiusProps,
         // Positioning props
         "width",
         "maxWidth",
@@ -5897,6 +5907,12 @@
     }
 
     const definitionNames = ["layout", "enter", "exit", "new", "old"];
+    /**
+     * Whether a computed border-radius is square (every component zero). Splitting
+     * on whitespace handles two-value/elliptical radii like "0px 20px" - a leading
+     * `parseFloat` alone would misread the non-zero vertical radius as square.
+     */
+    const isSquareRadius = (radius) => radius.split(" ").every((value) => parseFloat(value) === 0);
     /**
      * The `ViewTransitionTarget` buckets driving each generated layer type, in
      * priority order - the inverse of `chooseLayerType`. The new view is driven by
@@ -6083,16 +6099,48 @@
             return transition;
         };
         /**
-         * Each layer's box size per snapshot, so `finalizeCrop` can tell whether a
-         * morph's aspect ratio changed (the only case worth cropping).
+         * Resolve a layer's group (`layout`) timing to plain WAAPI values: native
+         * ms `delay`/`duration` and a baked `ease`. The single source of group
+         * timing, shared by the generated-group retiming and the crop corner-radius
+         * pass so the rounded clip animates on exactly the box's timing. It returns
+         * no generator `type` (the WAAPI-only `NativeAnimation` rejects a string
+         * type) nor `repeat`/`times` (which the group's `updateTiming` ignores), so
+         * none of them can leak into the radius animation and desync it.
+         */
+        const resolveGroupTiming = (name) => {
+            const [index, total] = staggerPosition(name, "group");
+            const transition = resolveLayerTransition(layerTargets.get(name), "group", "layout", index === -1 ? 0 : index, total);
+            transition.duration && (transition.duration = secondsToMilliseconds(transition.duration));
+            const { delay = 0, duration, ease } = applyGeneratorOptions(transition);
+            return { delay: secondsToMilliseconds(delay), duration, ease };
+        };
+        /**
+         * Each layer's measured box + corner radii per snapshot. The box lets
+         * `finalizeCrop` tell whether a morph's aspect ratio changed (the only case
+         * worth cropping); the radii let a cropped morph's group clip animate each
+         * corner from the old element's radius to the new element's, keeping it
+         * rounded where `overflow: clip` would otherwise square the corners.
+         *
+         * We never flatten the source for capture (a snapshot is a paint of the live
+         * DOM, so squaring an element just for its capture would flash one real
+         * square frame). For an aspect-changing morph `object-fit: cover` crops each
+         * snapshot's own baked corners off-screen mid-morph, so the animated clip is
+         * the only visible corner; a near-same-aspect forced crop (`.crop(true)`)
+         * can't hide the outgoing snapshot's silhouette, but the endpoints coincide.
          */
-        const cropBox = new Map();
+        const cropMeasurements = new Map();
         const measureLayers = (phase) => nameRegistry.forEach((name, element) => {
-            const rect = element.getBoundingClientRect?.();
+            const el = element;
+            const rect = el.getBoundingClientRect?.();
             if (rect && rect.height) {
-                const entry = cropBox.get(name) ?? {};
-                entry[phase] = { width: rect.width, height: rect.height };
-                cropBox.set(name, entry);
+                const style = getComputedStyle(el);
+                const radii = {};
+                for (const corner of cornerRadiusProps) {
+                    radii[corner] = style[corner];
+                }
+                const entry = cropMeasurements.get(name) ?? {};
+                entry[phase] = { width: rect.width, height: rect.height, radii };
+                cropMeasurements.set(name, entry);
             }
         });
         /**
@@ -6122,7 +6170,7 @@
          * never "changed".
          */
         const aspectChanged = (name) => {
-            const box = cropBox.get(name);
+            const box = cropMeasurements.get(name);
             if (!box?.old || !box?.new || !box.old.height || !box.new.height) {
                 return false;
             }
@@ -6366,6 +6414,31 @@
                         }
                         continue;
                     }
+                    /**
+                     * Drop the orphaned half of the default crossfade. The UA
+                     * fades old out and new in as a *pair*; if the opposing half
+                     * was explicitly overridden with something other than an
+                     * opacity fade (a clip or transform reveal), this side's
+                     * default opacity fade has no partner - left to run it would
+                     * dissolve what should be a static backdrop (e.g.
+                     * `.new({ clipPath })` should reveal over a still old view,
+                     * not fade the old out around the growing clip). Cancel it -
+                     * and its `plus-lighter` sibling on the same pseudo, which
+                     * would otherwise flash bright where the two opaque layers
+                     * overlap. A genuine crossfade (the opposing side also fading
+                     * opacity) keeps both halves and is handled above.
+                     */
+                    const opposite = name.type === "old"
+                        ? "new"
+                        : name.type === "new"
+                            ? "old"
+                            : undefined;
+                    if (opposite &&
+                        explicitlyAnimated.has(`${name.layer}:${opposite}`) &&
+                        !opacityAnimated.has(`${name.layer}:${opposite}`)) {
+                        animation.cancel();
+                        continue;
+                    }
                     /**
                      * Otherwise retime the browser-generated animation to
                      * Motion's timing. This auto-enables the layout (group)
@@ -6390,36 +6463,85 @@
                     const isMorphCrossfade = (name.type === "old" || name.type === "new") &&
                         !!stagger?.old &&
                         !!stagger?.new;
-                    const timingType = name.type.startsWith("group") || isMorphCrossfade
-                        ? "group"
-                        : name.type;
-                    const [index, total] = staggerPosition(name.layer, timingType);
-                    const transitionName = timingType === "group" ? "layout" : "";
-                    let animationTransition = resolveLayerTransition(targetDefinition, timingType, transitionName, index === -1 ? 0 : index, total);
-                    /**
-                     * The crossfade should resolve at the spring's *perceptual*
-                     * (visual) duration - the geometry can keep bouncing, but the
-                     * opacity shouldn't drag through the settle. So capture
-                     * `visualDuration` before `applyGeneratorOptions` replaces it
-                     * with the full overshoot duration, and use it for the fade.
-                     */
-                    const visualDuration = animationTransition.visualDuration;
-                    animationTransition.duration && (animationTransition.duration = secondsToMilliseconds(animationTransition.duration));
-                    animationTransition =
-                        applyGeneratorOptions(animationTransition);
-                    const duration = isMorphCrossfade && visualDuration !== undefined
-                        ? secondsToMilliseconds(visualDuration)
-                        : animationTransition.duration;
-                    const easing = isMorphCrossfade
-                        ? "linear"
-                        : mapEasingToNativeEasing(animationTransition.ease, animationTransition.duration);
-                    effect.updateTiming({
-                        delay: secondsToMilliseconds(animationTransition.delay ?? 0),
-                        duration,
-                        easing,
-                    });
+                    let timing;
+                    if (name.type.startsWith("group")) {
+                        // group + group-children follow the resolved group
+                        // timing - the single source shared with the crop
+                        // corner-radius pass below.
+                        const { delay, duration, ease } = resolveGroupTiming(name.layer);
+                        timing = {
+                            delay,
+                            duration,
+                            easing: mapEasingToNativeEasing(ease, duration),
+                        };
+                    }
+                    else {
+                        const timingType = isMorphCrossfade ? "group" : name.type;
+                        const [index, total] = staggerPosition(name.layer, timingType);
+                        const transitionName = timingType === "group" ? "layout" : "";
+                        let animationTransition = resolveLayerTransition(targetDefinition, timingType, transitionName, index === -1 ? 0 : index, total);
+                        /**
+                         * The crossfade should resolve at the spring's
+                         * *perceptual* (visual) duration - the geometry can keep
+                         * bouncing, but the opacity shouldn't drag through the
+                         * settle. So capture `visualDuration` before
+                         * `applyGeneratorOptions` replaces it with the full
+                         * overshoot duration, and use it for the fade.
+                         */
+                        const visualDuration = animationTransition.visualDuration;
+                        animationTransition.duration && (animationTransition.duration = secondsToMilliseconds(animationTransition.duration));
+                        animationTransition =
+                            applyGeneratorOptions(animationTransition);
+                        timing = {
+                            delay: secondsToMilliseconds(animationTransition.delay ?? 0),
+                            duration: isMorphCrossfade && visualDuration !== undefined
+                                ? secondsToMilliseconds(visualDuration)
+                                : animationTransition.duration,
+                            easing: isMorphCrossfade
+                                ? "linear"
+                                : mapEasingToNativeEasing(animationTransition.ease, animationTransition.duration),
+                        };
+                    }
+                    effect.updateTiming(timing);
                     animations.push(new NativeAnimationWrapper(animation));
                 }
+                /**
+                 * Round each cropped layer's clip. Its `::view-transition-group`
+                 * has `overflow: clip`, which would otherwise square the corners
+                 * mid-morph; animate each corner from the old element's radius to
+                 * the new element's so the crop stays rounded. Timed as the group
+                 * (`layout`) so the radius tracks the morphing box.
+                 */
+                cropMeasurements.forEach((entry, name) => {
+                    if (!croppedNames.has(name))
+                        return;
+                    // Reuse the group's resolved timing - native ms delay/
+                    // duration + a baked ease, with no generator `type` or
+                    // repeat/times to leak into (or throw inside) NativeAnimation.
+                    const { delay, duration, ease } = resolveGroupTiming(name);
+                    for (const corner of cornerRadiusProps) {
+                        // `||` (not `??`) so an empty measurement falls back to
+                        // the other snapshot rather than an invalid keyframe.
+                        const from = entry.old?.radii[corner] ||
+                            entry.new?.radii[corner] ||
+                            "0px";
+                        const to = entry.new?.radii[corner] ||
+                            entry.old?.radii[corner] ||
+                            "0px";
+                        // Nothing to round if the corner is square at both ends.
+                        if (isSquareRadius(from) && isSquareRadius(to))
+                            continue;
+                        animations.push(new NativeAnimation({
+                            element: document.documentElement,
+                            name: corner,
+                            pseudoElement: `::view-transition-group(${name})`,
+                            keyframes: [from, to],
+                            delay,
+                            duration,
+                            ease,
+                        }));
+                    }
+                });
                 resolve(new GroupAnimation(animations));
             })
                 .catch(() => 
@@ -7799,12 +7921,7 @@
     const scaleCorrectors = {
         borderRadius: {
             ...correctBorderRadius,
-            applyTo: [
-                "borderTopLeftRadius",
-                "borderTopRightRadius",
-                "borderBottomLeftRadius",
-                "borderBottomRightRadius",
-            ],
+            applyTo: [...cornerRadiusProps],
         },
         borderTopLeftRadius: correctBorderRadius,
         borderTopRightRadius: correctBorderRadius,
@@ -8732,13 +8849,7 @@
         return transform || "none";
     }
 
-    const borderLabels = [
-        "borderTopLeftRadius",
-        "borderTopRightRadius",
-        "borderBottomLeftRadius",
-        "borderBottomRightRadius",
-    ];
-    const numBorders = borderLabels.length;
+    const numBorders = cornerRadiusProps.length;
     const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
     const isPx = (value) => typeof value === "number" || px.test(value);
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
@@ -8753,7 +8864,7 @@
          * Mix border radius
          */
         for (let i = 0; i < numBorders; i++) {
-            const borderLabel = borderLabels[i];
+            const borderLabel = cornerRadiusProps[i];
             let followRadius = getRadius(follow, borderLabel);
             let leadRadius = getRadius(lead, borderLabel);
             if (followRadius === undefined && leadRadius === undefined)