framer-motion 12.20.3 → 12.20.5

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="100" height="100" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" />
+  <img width="42" height="42" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" />
 </p>
 <h1 align="center">Motion for React</h1>
 <h3 align="center">

package/dist/cjs/client.js

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

package/dist/cjs/{create-ByDLj_LU.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;
@@ -2676,7 +2684,7 @@ function initPrefersReducedMotion() {
     if (window.matchMedia) {
         const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
         const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
-        motionMediaQuery.addListener(setReducedMotionPreferences);
+        motionMediaQuery.addEventListener("change", setReducedMotionPreferences);
         setReducedMotionPreferences();
     }
     else {
@@ -3409,10 +3417,18 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
 }
 
 function renderHTML(element, { style, vars }, styleProp, projection) {
-    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-    // Loop over any CSS variables and assign those.
-    for (const key in vars) {
-        element.style.setProperty(key, vars[key]);
+    const elementStyle = element.style;
+    let key;
+    for (key in style) {
+        // CSSStyleDeclaration has [index: number]: string; in the types, so we use that as key type.
+        elementStyle[key] = style[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`.
+        elementStyle.setProperty(key, vars[key]);
     }
 }
 

package/dist/cjs/dom.js

@@ -747,7 +747,7 @@ function initPrefersReducedMotion() {
     if (window.matchMedia) {
         const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
         const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
-        motionMediaQuery.addListener(setReducedMotionPreferences);
+        motionMediaQuery.addEventListener("change", setReducedMotionPreferences);
         setReducedMotionPreferences();
     }
     else {
@@ -1443,10 +1443,18 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
 }
 
 function renderHTML(element, { style, vars }, styleProp, projection) {
-    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-    // Loop over any CSS variables and assign those.
-    for (const key in vars) {
-        element.style.setProperty(key, vars[key]);
+    const elementStyle = element.style;
+    let key;
+    for (key in style) {
+        // CSSStyleDeclaration has [index: number]: string; in the types, so we use that as key type.
+        elementStyle[key] = style[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`.
+        elementStyle.setProperty(key, vars[key]);
     }
 }
 

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-ByDLj_LU.js');
+var create = require('./create-BOq2yHIj.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 

package/dist/dom.d.ts

@@ -1,4 +1,4 @@
-import { UnresolvedValueKeyframe, MotionValue, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, AnimationScope, AnimationPlaybackControlsWithThen, ValueAnimationTransition, AnimationPlaybackControls, DynamicOption } from 'motion-dom';
+import { UnresolvedValueKeyframe, MotionValue, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, AnyResolvedKeyframe, AnimationScope, AnimationPlaybackControlsWithThen, ValueAnimationTransition, AnimationPlaybackControls, DynamicOption } from 'motion-dom';
 export * from 'motion-dom';
 import { Easing, EasingFunction, Point } from 'motion-utils';
 export * from 'motion-utils';
@@ -44,7 +44,7 @@ interface SequenceOptions extends AnimationPlaybackOptions {
     defaultTransition?: Transition;
 }
 interface AbsoluteKeyframe {
-    value: string | number | null;
+    value: AnyResolvedKeyframe | null;
     at: number;
     easing?: Easing;
 }