framer-motion 12.23.24 → 12.23.26

package/dist/framer-motion.dev.js

@@ -6228,7 +6228,91 @@
         }
     }
 
-    const scaleCorrectors = {};
+    function pixelsToPercent(pixels, axis) {
+        if (axis.max === axis.min)
+            return 0;
+        return (pixels / (axis.max - axis.min)) * 100;
+    }
+    /**
+     * We always correct borderRadius as a percentage rather than pixels to reduce paints.
+     * For example, if you are projecting a box that is 100px wide with a 10px borderRadius
+     * into a box that is 200px wide with a 20px borderRadius, that is actually a 10%
+     * borderRadius in both states. If we animate between the two in pixels that will trigger
+     * a paint each time. If we animate between the two in percentage we'll avoid a paint.
+     */
+    const correctBorderRadius = {
+        correct: (latest, node) => {
+            if (!node.target)
+                return latest;
+            /**
+             * If latest is a string, if it's a percentage we can return immediately as it's
+             * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
+             */
+            if (typeof latest === "string") {
+                if (px.test(latest)) {
+                    latest = parseFloat(latest);
+                }
+                else {
+                    return latest;
+                }
+            }
+            /**
+             * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that
+             * pixel value as a percentage of each axis
+             */
+            const x = pixelsToPercent(latest, node.target.x);
+            const y = pixelsToPercent(latest, node.target.y);
+            return `${x}% ${y}%`;
+        },
+    };
+
+    const correctBoxShadow = {
+        correct: (latest, { treeScale, projectionDelta }) => {
+            const original = latest;
+            const shadow = complex.parse(latest);
+            // TODO: Doesn't support multiple shadows
+            if (shadow.length > 5)
+                return original;
+            const template = complex.createTransformer(latest);
+            const offset = typeof shadow[0] !== "number" ? 1 : 0;
+            // Calculate the overall context scale
+            const xScale = projectionDelta.x.scale * treeScale.x;
+            const yScale = projectionDelta.y.scale * treeScale.y;
+            shadow[0 + offset] /= xScale;
+            shadow[1 + offset] /= yScale;
+            /**
+             * Ideally we'd correct x and y scales individually, but because blur and
+             * spread apply to both we have to take a scale average and apply that instead.
+             * We could potentially improve the outcome of this by incorporating the ratio between
+             * the two scales.
+             */
+            const averageScale = mixNumber$1(xScale, yScale, 0.5);
+            // Blur
+            if (typeof shadow[2 + offset] === "number")
+                shadow[2 + offset] /= averageScale;
+            // Spread
+            if (typeof shadow[3 + offset] === "number")
+                shadow[3 + offset] /= averageScale;
+            return template(shadow);
+        },
+    };
+
+    const scaleCorrectors = {
+        borderRadius: {
+            ...correctBorderRadius,
+            applyTo: [
+                "borderTopLeftRadius",
+                "borderTopRightRadius",
+                "borderBottomLeftRadius",
+                "borderBottomRightRadius",
+            ],
+        },
+        borderTopLeftRadius: correctBorderRadius,
+        borderTopRightRadius: correctBorderRadius,
+        borderBottomLeftRadius: correctBorderRadius,
+        borderBottomRightRadius: correctBorderRadius,
+        boxShadow: correctBoxShadow,
+    };
     function addScaleCorrector(correctors) {
         for (const key in correctors) {
             scaleCorrectors[key] = correctors[key];
@@ -6445,6 +6529,7 @@
                  */
                 this.eventHandlers = new Map();
                 this.hasTreeAnimated = false;
+                this.layoutVersion = 0;
                 // Note: Currently only running on root node
                 this.updateScheduled = false;
                 this.scheduleUpdate = () => this.update();
@@ -6484,6 +6569,7 @@
                  * Frame calculations
                  */
                 this.resolvedRelativeTargetAt = 0.0;
+                this.linkedParentVersion = 0;
                 this.hasProjected = false;
                 this.isVisible = true;
                 this.animationProgress = 0;
@@ -6837,6 +6923,7 @@
                 }
                 const prevLayout = this.layout;
                 this.layout = this.measure(false);
+                this.layoutVersion++;
                 this.layoutCorrected = createBox();
                 this.isLayoutDirty = false;
                 this.projectionDelta = undefined;
@@ -7056,25 +7143,23 @@
                 if (!this.layout || !(layout || layoutId))
                     return;
                 this.resolvedRelativeTargetAt = frameData.timestamp;
+                const relativeParent = this.getClosestProjectingParent();
+                if (relativeParent &&
+                    this.linkedParentVersion !== relativeParent.layoutVersion &&
+                    !relativeParent.options.layoutRoot) {
+                    this.removeRelativeTarget();
+                }
                 /**
                  * If we don't have a targetDelta but do have a layout, we can attempt to resolve
                  * a relativeParent. This will allow a component to perform scale correction
                  * even if no animation has started.
                  */
                 if (!this.targetDelta && !this.relativeTarget) {
-                    const relativeParent = this.getClosestProjectingParent();
-                    if (relativeParent &&
-                        relativeParent.layout &&
-                        this.animationProgress !== 1) {
-                        this.relativeParent = relativeParent;
-                        this.forceRelativeParentToResolveTarget();
-                        this.relativeTarget = createBox();
-                        this.relativeTargetOrigin = createBox();
-                        calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
-                        copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+                    if (relativeParent && relativeParent.layout) {
+                        this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox);
                     }
                     else {
-                        this.relativeParent = this.relativeTarget = undefined;
+                        this.removeRelativeTarget();
                     }
                 }
                 /**
@@ -7124,19 +7209,13 @@
                  */
                 if (this.attemptToResolveRelativeTarget) {
                     this.attemptToResolveRelativeTarget = false;
-                    const relativeParent = this.getClosestProjectingParent();
                     if (relativeParent &&
                         Boolean(relativeParent.resumingFrom) ===
                             Boolean(this.resumingFrom) &&
                         !relativeParent.options.layoutScroll &&
                         relativeParent.target &&
                         this.animationProgress !== 1) {
-                        this.relativeParent = relativeParent;
-                        this.forceRelativeParentToResolveTarget();
-                        this.relativeTarget = createBox();
-                        this.relativeTargetOrigin = createBox();
-                        calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
-                        copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+                        this.createRelativeTarget(relativeParent, this.target, relativeParent.target);
                     }
                     else {
                         this.relativeParent = this.relativeTarget = undefined;
@@ -7168,6 +7247,18 @@
                     this.options.layoutRoot) &&
                     this.layout);
             }
+            createRelativeTarget(relativeParent, layout, parentLayout) {
+                this.relativeParent = relativeParent;
+                this.linkedParentVersion = relativeParent.layoutVersion;
+                this.forceRelativeParentToResolveTarget();
+                this.relativeTarget = createBox();
+                this.relativeTargetOrigin = createBox();
+                calcRelativePosition(this.relativeTargetOrigin, layout, parentLayout);
+                copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+            }
+            removeRelativeTarget() {
+                this.relativeParent = this.relativeTarget = undefined;
+            }
             calcProjection() {
                 const lead = this.getLead();
                 const isShared = Boolean(this.resumingFrom) || this !== lead;
@@ -7935,75 +8026,6 @@
         checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
     });
 
-    function pixelsToPercent(pixels, axis) {
-        if (axis.max === axis.min)
-            return 0;
-        return (pixels / (axis.max - axis.min)) * 100;
-    }
-    /**
-     * We always correct borderRadius as a percentage rather than pixels to reduce paints.
-     * For example, if you are projecting a box that is 100px wide with a 10px borderRadius
-     * into a box that is 200px wide with a 20px borderRadius, that is actually a 10%
-     * borderRadius in both states. If we animate between the two in pixels that will trigger
-     * a paint each time. If we animate between the two in percentage we'll avoid a paint.
-     */
-    const correctBorderRadius = {
-        correct: (latest, node) => {
-            if (!node.target)
-                return latest;
-            /**
-             * If latest is a string, if it's a percentage we can return immediately as it's
-             * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
-             */
-            if (typeof latest === "string") {
-                if (px.test(latest)) {
-                    latest = parseFloat(latest);
-                }
-                else {
-                    return latest;
-                }
-            }
-            /**
-             * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that
-             * pixel value as a percentage of each axis
-             */
-            const x = pixelsToPercent(latest, node.target.x);
-            const y = pixelsToPercent(latest, node.target.y);
-            return `${x}% ${y}%`;
-        },
-    };
-
-    const correctBoxShadow = {
-        correct: (latest, { treeScale, projectionDelta }) => {
-            const original = latest;
-            const shadow = complex.parse(latest);
-            // TODO: Doesn't support multiple shadows
-            if (shadow.length > 5)
-                return original;
-            const template = complex.createTransformer(latest);
-            const offset = typeof shadow[0] !== "number" ? 1 : 0;
-            // Calculate the overall context scale
-            const xScale = projectionDelta.x.scale * treeScale.x;
-            const yScale = projectionDelta.y.scale * treeScale.y;
-            shadow[0 + offset] /= xScale;
-            shadow[1 + offset] /= yScale;
-            /**
-             * Ideally we'd correct x and y scales individually, but because blur and
-             * spread apply to both we have to take a scale average and apply that instead.
-             * We could potentially improve the outcome of this by incorporating the ratio between
-             * the two scales.
-             */
-            const averageScale = mixNumber$1(xScale, yScale, 0.5);
-            // Blur
-            if (typeof shadow[2 + offset] === "number")
-                shadow[2 + offset] /= averageScale;
-            // Spread
-            if (typeof shadow[3 + offset] === "number")
-                shadow[3 + offset] /= averageScale;
-            return template(shadow);
-        },
-    };
-
     /**
      * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
      * it's easier to consider each axis individually. This function returns a bounding box
@@ -11466,7 +11488,6 @@
         componentDidMount() {
             const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props;
             const { projection } = visualElement;
-            addScaleCorrector(defaultScaleCorrectors);
             if (projection) {
                 if (layoutGroup.group)
                     layoutGroup.group.add(projection);
@@ -11565,22 +11586,6 @@
         const layoutGroup = React$1.useContext(LayoutGroupContext);
         return (jsx(MeasureLayoutWithContext, { ...props, layoutGroup: layoutGroup, switchLayoutGroup: React$1.useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove }));
     }
-    const defaultScaleCorrectors = {
-        borderRadius: {
-            ...correctBorderRadius,
-            applyTo: [
-                "borderTopLeftRadius",
-                "borderTopRightRadius",
-                "borderBottomLeftRadius",
-                "borderBottomRightRadius",
-            ],
-        },
-        borderTopLeftRadius: correctBorderRadius,
-        borderTopRightRadius: correctBorderRadius,
-        borderBottomLeftRadius: correctBorderRadius,
-        borderBottomRightRadius: correctBorderRadius,
-        boxShadow: correctBoxShadow,
-    };
 
     const drag = {
         pan: {