framer-motion 7.6.8 → 7.6.9

package/dist/cjs/index.js

@@ -2258,7 +2258,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.6.8";
+        this.version = "7.6.9";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -4524,7 +4524,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.6.8", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.8 may not work as expected.`);
+                warnOnce(nextValue.version === "7.6.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.9 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4726,10 +4726,14 @@ class VisualElement {
         this.current = null;
     }
     bindToMotionValue(key, value) {
+        const valueIsTransform = transformProps.has(key);
         const removeOnChange = value.onChange((latestValue) => {
             this.latestValues[key] = latestValue;
             this.props.onUpdate &&
                 sync__default["default"].update(this.notifyUpdate, false, true);
+            if (valueIsTransform && this.projection) {
+                this.projection.isProjectionDirty = true;
+            }
         });
         const removeOnRenderRequest = value.onRenderRequest(this.scheduleRender);
         this.valueSubscriptions.set(key, () => {
@@ -5754,6 +5758,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * and if one node is dirtied, they all are.
              */
             this.isLayoutDirty = false;
+            /**
+             * Flag to true if we think the projection calculations for this or any
+             * child might need recalculating as a result of an updated transform or layout animation.
+             */
+            this.isProjectionDirty = false;
             /**
              * Block layout updates for instant layout transitions throughout the tree.
              */
@@ -6256,6 +6265,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
          */
         setTargetDelta(delta) {
             this.targetDelta = delta;
+            this.isProjectionDirty = true;
             this.root.scheduleUpdateProjection();
         }
         setOptions(options) {
@@ -6279,6 +6289,14 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
          */
         resolveTargetDelta() {
             var _a;
+            /**
+             * Propagate isProjectionDirty. Nodes are ordered by depth, so if the parent here
+             * is dirty we can simply pass this forward.
+             */
+            this.isProjectionDirty || (this.isProjectionDirty = this.getLead().isProjectionDirty ||
+                Boolean(this.parent && this.parent.isProjectionDirty));
+            if (!this.isProjectionDirty)
+                return;
             const { layout, layoutId } = this.options;
             /**
              * If we have no layout, we can't perform projection, so early return
@@ -6382,6 +6400,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         calcProjection() {
             var _a;
+            if (!this.isProjectionDirty)
+                return;
+            this.isProjectionDirty = false;
             const { layout, layoutId } = this.options;
             /**
              * If this section of the tree isn't animating we can

package/dist/es/projection/node/create-projection-node.mjs

@@ -64,6 +64,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * and if one node is dirtied, they all are.
              */
             this.isLayoutDirty = false;
+            /**
+             * Flag to true if we think the projection calculations for this or any
+             * child might need recalculating as a result of an updated transform or layout animation.
+             */
+            this.isProjectionDirty = false;
             /**
              * Block layout updates for instant layout transitions throughout the tree.
              */
@@ -566,6 +571,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
          */
         setTargetDelta(delta) {
             this.targetDelta = delta;
+            this.isProjectionDirty = true;
             this.root.scheduleUpdateProjection();
         }
         setOptions(options) {
@@ -589,6 +595,14 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
          */
         resolveTargetDelta() {
             var _a;
+            /**
+             * Propagate isProjectionDirty. Nodes are ordered by depth, so if the parent here
+             * is dirty we can simply pass this forward.
+             */
+            this.isProjectionDirty || (this.isProjectionDirty = this.getLead().isProjectionDirty ||
+                Boolean(this.parent && this.parent.isProjectionDirty));
+            if (!this.isProjectionDirty)
+                return;
             const { layout, layoutId } = this.options;
             /**
              * If we have no layout, we can't perform projection, so early return
@@ -692,6 +706,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         calcProjection() {
             var _a;
+            if (!this.isProjectionDirty)
+                return;
+            this.isProjectionDirty = false;
             const { layout, layoutId } = this.options;
             /**
              * If this section of the tree isn't animating we can

package/dist/es/render/VisualElement.mjs

@@ -11,6 +11,7 @@ import { SubscriptionManager } from '../utils/subscription-manager.mjs';
 import { motionValue } from '../value/index.mjs';
 import { isWillChangeMotionValue } from '../value/use-will-change/is.mjs';
 import { isMotionValue } from '../value/utils/is-motion-value.mjs';
+import { transformProps } from './html/utils/transform.mjs';
 import { variantPriorityOrder } from './utils/animation-state.mjs';
 import { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';
 import { isVariantLabel } from './utils/is-variant-label.mjs';
@@ -181,10 +182,14 @@ class VisualElement {
         this.current = null;
     }
     bindToMotionValue(key, value) {
+        const valueIsTransform = transformProps.has(key);
         const removeOnChange = value.onChange((latestValue) => {
             this.latestValues[key] = latestValue;
             this.props.onUpdate &&
                 sync.update(this.notifyUpdate, false, true);
+            if (valueIsTransform && this.projection) {
+                this.projection.isProjectionDirty = true;
+            }
         });
         const removeOnRenderRequest = value.onRenderRequest(this.scheduleRender);
         this.valueSubscriptions.set(key, () => {

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.6.8", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.8 may not work as expected.`);
+                warnOnce(nextValue.version === "7.6.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.9 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -24,7 +24,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.6.8";
+        this.version = "7.6.9";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -3426,7 +3426,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "7.6.8";
+            this.version = "7.6.9";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5692,7 +5692,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.6.8", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.8 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.6.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.9 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -5894,10 +5894,14 @@
             this.current = null;
         }
         bindToMotionValue(key, value) {
+            const valueIsTransform = transformProps.has(key);
             const removeOnChange = value.onChange((latestValue) => {
                 this.latestValues[key] = latestValue;
                 this.props.onUpdate &&
                     sync.update(this.notifyUpdate, false, true);
+                if (valueIsTransform && this.projection) {
+                    this.projection.isProjectionDirty = true;
+                }
             });
             const removeOnRenderRequest = value.onRenderRequest(this.scheduleRender);
             this.valueSubscriptions.set(key, () => {
@@ -6922,6 +6926,11 @@
                  * and if one node is dirtied, they all are.
                  */
                 this.isLayoutDirty = false;
+                /**
+                 * Flag to true if we think the projection calculations for this or any
+                 * child might need recalculating as a result of an updated transform or layout animation.
+                 */
+                this.isProjectionDirty = false;
                 /**
                  * Block layout updates for instant layout transitions throughout the tree.
                  */
@@ -7424,6 +7433,7 @@
              */
             setTargetDelta(delta) {
                 this.targetDelta = delta;
+                this.isProjectionDirty = true;
                 this.root.scheduleUpdateProjection();
             }
             setOptions(options) {
@@ -7447,6 +7457,14 @@
              */
             resolveTargetDelta() {
                 var _a;
+                /**
+                 * Propagate isProjectionDirty. Nodes are ordered by depth, so if the parent here
+                 * is dirty we can simply pass this forward.
+                 */
+                this.isProjectionDirty || (this.isProjectionDirty = this.getLead().isProjectionDirty ||
+                    Boolean(this.parent && this.parent.isProjectionDirty));
+                if (!this.isProjectionDirty)
+                    return;
                 const { layout, layoutId } = this.options;
                 /**
                  * If we have no layout, we can't perform projection, so early return
@@ -7550,6 +7568,9 @@
             }
             calcProjection() {
                 var _a;
+                if (!this.isProjectionDirty)
+                    return;
+                this.isProjectionDirty = false;
                 const { layout, layoutId } = this.options;
                 /**
                  * If this section of the tree isn't animating we can