framer-motion 12.20.4 → 12.20.5

package/dist/framer-motion.dev.js

@@ -6200,7 +6200,6 @@
         calculatedProjections: 0,
     };
     const transformAxes = ["", "X", "Y", "Z"];
-    const hiddenVisibility = { visibility: "hidden" };
     /**
      * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
      * which has a noticeable difference in spring animations
@@ -6422,8 +6421,17 @@
                 }
                 if (attachResizeListener) {
                     let cancelDelay;
+                    let innerWidth = 0;
                     const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);
+                    // Set initial innerWidth in a frame.read callback to batch the read
+                    frame.read(() => {
+                        innerWidth = window.innerWidth;
+                    });
                     attachResizeListener(instance, () => {
+                        const newInnerWidth = window.innerWidth;
+                        if (newInnerWidth === innerWidth)
+                            return;
+                        innerWidth = newInnerWidth;
                         this.root.updateBlockedByResize = true;
                         cancelDelay && cancelDelay();
                         cancelDelay = delay(resizeUnblockUpdate, 250);
@@ -7430,59 +7438,60 @@
                 // see the element with the reset rotate value applied.
                 visualElement.scheduleRender();
             }
-            getProjectionStyles(styleProp) {
+            applyProjectionStyles(targetStyle, // CSSStyleDeclaration - doesn't allow numbers to be assigned to properties
+            styleProp) {
                 if (!this.instance || this.isSVG)
-                    return undefined;
+                    return;
                 if (!this.isVisible) {
-                    return hiddenVisibility;
+                    targetStyle.visibility = "hidden";
+                    return;
                 }
-                const styles = {
-                    visibility: "",
-                };
                 const transformTemplate = this.getTransformTemplate();
                 if (this.needsReset) {
                     this.needsReset = false;
-                    styles.opacity = "";
-                    styles.pointerEvents =
+                    targetStyle.visibility = "";
+                    targetStyle.opacity = "";
+                    targetStyle.pointerEvents =
                         resolveMotionValue(styleProp?.pointerEvents) || "";
-                    styles.transform = transformTemplate
+                    targetStyle.transform = transformTemplate
                         ? transformTemplate(this.latestValues, "")
                         : "none";
-                    return styles;
+                    return;
                 }
                 const lead = this.getLead();
                 if (!this.projectionDelta || !this.layout || !lead.target) {
-                    const emptyStyles = {};
                     if (this.options.layoutId) {
-                        emptyStyles.opacity =
+                        targetStyle.opacity =
                             this.latestValues.opacity !== undefined
                                 ? this.latestValues.opacity
                                 : 1;
-                        emptyStyles.pointerEvents =
+                        targetStyle.pointerEvents =
                             resolveMotionValue(styleProp?.pointerEvents) || "";
                     }
                     if (this.hasProjected && !hasTransform(this.latestValues)) {
-                        emptyStyles.transform = transformTemplate
+                        targetStyle.transform = transformTemplate
                             ? transformTemplate({}, "")
                             : "none";
                         this.hasProjected = false;
                     }
-                    return emptyStyles;
+                    return;
                 }
+                targetStyle.visibility = "";
                 const valuesToRender = lead.animationValues || lead.latestValues;
                 this.applyTransformsToTarget();
-                styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
+                let transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
                 if (transformTemplate) {
-                    styles.transform = transformTemplate(valuesToRender, styles.transform);
+                    transform = transformTemplate(valuesToRender, transform);
                 }
+                targetStyle.transform = transform;
                 const { x, y } = this.projectionDelta;
-                styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
+                targetStyle.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
                 if (lead.animationValues) {
                     /**
                      * If the lead component is animating, assign this either the entering/leaving
                      * opacity
                      */
-                    styles.opacity =
+                    targetStyle.opacity =
                         lead === this
                             ? valuesToRender.opacity ??
                                 this.latestValues.opacity ??
@@ -7496,7 +7505,7 @@
                      * Or we're not animating at all, set the lead component to its layout
                      * opacity and other components to hidden.
                      */
-                    styles.opacity =
+                    targetStyle.opacity =
                         lead === this
                             ? valuesToRender.opacity !== undefined
                                 ? valuesToRender.opacity
@@ -7518,13 +7527,13 @@
                      * vulnerable to distortion if the element changes size without
                      * a corresponding layout animation.
                      */
-                    const corrected = styles.transform === "none"
+                    const corrected = transform === "none"
                         ? valuesToRender[key]
                         : correct(valuesToRender[key], lead);
                     if (applyTo) {
                         const num = applyTo.length;
                         for (let i = 0; i < num; i++) {
-                            styles[applyTo[i]] = corrected;
+                            targetStyle[applyTo[i]] = corrected;
                         }
                     }
                     else {
@@ -7535,7 +7544,7 @@
                             this.options.visualElement.renderState.vars[key] = corrected;
                         }
                         else {
-                            styles[key] = corrected;
+                            targetStyle[key] = corrected;
                         }
                     }
                 }
@@ -7545,12 +7554,11 @@
                  * pointer events on the lead.
                  */
                 if (this.options.layoutId) {
-                    styles.pointerEvents =
+                    targetStyle.pointerEvents =
                         lead === this
                             ? resolveMotionValue(styleProp?.pointerEvents) || ""
                             : "none";
                 }
-                return styles;
             }
             clearSnapshot() {
                 this.resumeFrom = this.snapshot = undefined;
@@ -8704,10 +8712,8 @@
             // CSSStyleDeclaration has [index: number]: string; in the types, so we use that as key type.
             elementStyle[key] = style[key];
         }
-        const projectionStyle = projection?.getProjectionStyles(styleProp);
-        for (key in projectionStyle) {
-            elementStyle[key] = projectionStyle[key];
-        }
+        // Write projection styles directly to element style
+        projection?.applyProjectionStyles(elementStyle, styleProp);
         for (key in vars) {
             // Loop over any CSS variables and assign those.
             // They can only be assigned using `setProperty`.