framer-motion 12.20.4 → 12.20.5

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var create = require('./create-7q3QlJ1Z.js');
+var create = require('./create-BOq2yHIj.js');
 require('motion-dom');
 require('motion-utils');
 require('react/jsx-runtime');

package/dist/cjs/{create-7q3QlJ1Z.js → create-BOq2yHIj.js}

@@ -911,7 +911,6 @@ const metrics = {
     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
@@ -1133,8 +1132,17 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             }
             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
+                motionDom.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);
@@ -2141,59 +2149,60 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             // 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 ??
@@ -2207,7 +2216,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                  * 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
@@ -2229,13 +2238,13 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                  * 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 {
@@ -2246,7 +2255,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                         this.options.visualElement.renderState.vars[key] = corrected;
                     }
                     else {
-                        styles[key] = corrected;
+                        targetStyle[key] = corrected;
                     }
                 }
             }
@@ -2256,12 +2265,11 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
              * 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;
@@ -3415,10 +3423,8 @@ function renderHTML(element, { style, vars }, styleProp, projection) {
         // 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`.

package/dist/cjs/dom.js

@@ -1449,10 +1449,8 @@ function renderHTML(element, { style, vars }, styleProp, projection) {
         // 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`.

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var create = require('./create-7q3QlJ1Z.js');
+var create = require('./create-BOq2yHIj.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');