framer-motion 9.1.2 → 9.1.3

package/dist/cjs/index.js

@@ -2000,7 +2000,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 = "9.1.2";
+        this.version = "9.1.3";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -5944,6 +5944,12 @@ class FlatTree {
     }
 }
 
+function record(data) {
+    if (window.MotionDebug) {
+        window.MotionDebug.record(data);
+    }
+}
+
 const transformAxes = ["", "X", "Y", "Z"];
 /**
  * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
@@ -5951,6 +5957,16 @@ const transformAxes = ["", "X", "Y", "Z"];
  */
 const animationTarget = 1000;
 let id$1 = 0;
+/**
+ * Use a mutable data object for debug data so as to not create a new
+ * object every frame.
+ */
+const projectionFrameData = {
+    type: "projectionFrame",
+    totalNodes: 0,
+    resolvedTargetDeltas: 0,
+    recalculatedProjection: 0,
+};
 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
     return class ProjectionNode {
         constructor(elementId, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
@@ -5988,12 +6004,21 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * and if one node is dirtied, they all are.
              */
             this.isLayoutDirty = false;
-            this.isTransformDirty = 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.
+             * Flag to true if we think the projection calculations for this node needs
+             * recalculating as a result of an updated transform or layout animation.
              */
             this.isProjectionDirty = false;
+            /**
+             * Flag to true if the layout *or* transform has changed. This then gets propagated
+             * throughout the projection tree, forcing any element below to recalculate on the next frame.
+             */
+            this.isSharedProjectionDirty = false;
+            /**
+             * Flag transform dirty. This gets propagated throughout the whole tree but is only
+             * respected by shared nodes.
+             */
+            this.isTransformDirty = false;
             /**
              * Block layout updates for instant layout transitions throughout the tree.
              */
@@ -6044,9 +6069,19 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * the next step.
              */
             this.updateProjection = () => {
+                /**
+                 * Reset debug counts. Manually resetting rather than creating a new
+                 * object each frame.
+                 */
+                projectionFrameData.totalNodes =
+                    projectionFrameData.resolvedTargetDeltas =
+                        projectionFrameData.recalculatedProjection =
+                            0;
                 this.nodes.forEach(propagateDirtyNodes);
                 this.nodes.forEach(resolveTargetDelta);
                 this.nodes.forEach(calcProjection);
+                this.nodes.forEach(cleanDirtyNodes);
+                record(projectionFrameData);
             };
             this.hasProjected = false;
             this.isVisible = true;
@@ -6502,13 +6537,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             return boxWithoutTransform;
         }
-        /**
-         *
-         */
         setTargetDelta(delta) {
             this.targetDelta = delta;
-            this.isProjectionDirty = true;
             this.root.scheduleUpdateProjection();
+            this.isProjectionDirty = true;
         }
         setOptions(options) {
             this.options = {
@@ -6530,6 +6562,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
          * Frame calculations
          */
         resolveTargetDelta() {
+            var _a;
             /**
              * Once the dirty status of nodes has been spread through the tree, we also
              * need to check if we have a shared node of a different depth that has itself
@@ -6538,11 +6571,17 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             const lead = this.getLead();
             this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty);
             this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);
+            this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);
+            const isShared = Boolean(this.resumingFrom) || this !== lead;
             /**
              * We don't use transform for this step of processing so we don't
              * need to check whether any nodes have changed transform.
              */
-            if (!this.isProjectionDirty && !this.attemptToResolveRelativeTarget)
+            const canSkip = !((isShared && this.isSharedProjectionDirty) ||
+                this.isProjectionDirty ||
+                ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||
+                this.attemptToResolveRelativeTarget);
+            if (canSkip)
                 return;
             const { layout, layoutId } = this.options;
             /**
@@ -6632,6 +6671,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     this.relativeParent = this.relativeTarget = undefined;
                 }
             }
+            /**
+             * Increase debug counter for resolved target deltas
+             */
+            projectionFrameData.resolvedTargetDeltas++;
         }
         getClosestProjectingParent() {
             if (!this.parent ||
@@ -6639,26 +6682,39 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 has2DTranslate(this.parent.latestValues)) {
                 return undefined;
             }
-            if ((this.parent.relativeTarget ||
-                this.parent.targetDelta ||
-                this.parent.options.layoutRoot) &&
-                this.parent.layout) {
+            if (this.parent.isProjecting()) {
                 return this.parent;
             }
             else {
                 return this.parent.getClosestProjectingParent();
             }
         }
+        isProjecting() {
+            return Boolean((this.relativeTarget ||
+                this.targetDelta ||
+                this.options.layoutRoot) &&
+                this.layout);
+        }
         calcProjection() {
-            const { isProjectionDirty, isTransformDirty } = this;
-            this.isProjectionDirty = this.isTransformDirty = false;
+            var _a;
             const lead = this.getLead();
             const isShared = Boolean(this.resumingFrom) || this !== lead;
             let canSkip = true;
-            if (isProjectionDirty)
+            /**
+             * If this is a normal layout animation and neither this node nor its nearest projecting
+             * is dirty then we can't skip.
+             */
+            if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) {
                 canSkip = false;
-            if (isShared && isTransformDirty)
+            }
+            /**
+             * If this is a shared layout animation and this node's shared projection is dirty then
+             * we can't skip.
+             */
+            if (isShared &&
+                (this.isSharedProjectionDirty || this.isTransformDirty)) {
                 canSkip = false;
+            }
             if (canSkip)
                 return;
             const { layout, layoutId } = this.options;
@@ -6712,6 +6768,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.scheduleRender();
                 this.notifyListeners("projectionUpdate", target);
             }
+            /**
+             * Increase debug counter for recalculated projections
+             */
+            projectionFrameData.recalculatedProjection++;
         }
         hide() {
             this.isVisible = false;
@@ -6754,6 +6814,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.options.crossfade === true &&
                 !this.path.some(hasOpacityCrossfade));
             this.animationProgress = 0;
+            let prevRelativeTarget;
             this.mixTargetDelta = (latest) => {
                 const progress = latest / 1000;
                 mixAxisDelta(targetDelta.x, delta.x, progress);
@@ -6766,6 +6827,17 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     this.relativeParent.layout) {
                     calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
                     mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
+                    /**
+                     * If this is an unchanged relative target we can consider the
+                     * projection not dirty.
+                     */
+                    if (prevRelativeTarget &&
+                        boxEquals(this.relativeTarget, prevRelativeTarget)) {
+                        this.isProjectionDirty = false;
+                    }
+                    if (!prevRelativeTarget)
+                        prevRelativeTarget = createBox();
+                    copyBoxInto(prevRelativeTarget, this.relativeTarget);
                 }
                 if (isSharedLayoutAnimation) {
                     this.animationValues = mixedValues;
@@ -7179,14 +7251,35 @@ function notifyLayoutUpdate(node) {
 }
 function propagateDirtyNodes(node) {
     /**
-     * Propagate isProjectionDirty. Nodes are ordered by depth, so if the parent here
-     * is dirty we can simply pass this forward.
+     * Increase debug counter for nodes encountered this frame
      */
-    node.isProjectionDirty || (node.isProjectionDirty = Boolean(node.parent && node.parent.isProjectionDirty));
+    projectionFrameData.totalNodes++;
+    if (!node.parent)
+        return;
     /**
-     * Propagate isTransformDirty.
+     * If this node isn't projecting, propagate isProjectionDirty. It will have
+     * no performance impact but it will allow the next child that *is* projecting
+     * but *isn't* dirty to just check its parent to see if *any* ancestor needs
+     * correcting.
      */
-    node.isTransformDirty || (node.isTransformDirty = Boolean(node.parent && node.parent.isTransformDirty));
+    if (!node.isProjecting()) {
+        node.isProjectionDirty = node.parent.isProjectionDirty;
+    }
+    /**
+     * Propagate isSharedProjectionDirty and isTransformDirty
+     * throughout the whole tree. A future revision can take another look at
+     * this but for safety we still recalcualte shared nodes.
+     */
+    node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty ||
+        node.parent.isProjectionDirty ||
+        node.parent.isSharedProjectionDirty));
+    node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty);
+}
+function cleanDirtyNodes(node) {
+    node.isProjectionDirty =
+        node.isSharedProjectionDirty =
+            node.isTransformDirty =
+                false;
 }
 function clearSnapshot(node) {
     node.clearSnapshot();
@@ -7764,7 +7857,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "9.1.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.2 may not work as expected.`);
+                warnOnce(nextValue.version === "9.1.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/debug/record.mjs

@@ -0,0 +1,7 @@
+function record(data) {
+    if (window.MotionDebug) {
+        window.MotionDebug.record(data);
+    }
+}
+
+export { record };

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

@@ -19,6 +19,7 @@ import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 import { globalProjectionState } from './state.mjs';
 import { delay } from '../../utils/delay.mjs';
 import { mix } from '../../utils/mix.mjs';
+import { record } from '../../debug/record.mjs';
 
 const transformAxes = ["", "X", "Y", "Z"];
 /**
@@ -27,6 +28,16 @@ const transformAxes = ["", "X", "Y", "Z"];
  */
 const animationTarget = 1000;
 let id = 0;
+/**
+ * Use a mutable data object for debug data so as to not create a new
+ * object every frame.
+ */
+const projectionFrameData = {
+    type: "projectionFrame",
+    totalNodes: 0,
+    resolvedTargetDeltas: 0,
+    recalculatedProjection: 0,
+};
 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
     return class ProjectionNode {
         constructor(elementId, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
@@ -64,12 +75,21 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * and if one node is dirtied, they all are.
              */
             this.isLayoutDirty = false;
-            this.isTransformDirty = 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.
+             * Flag to true if we think the projection calculations for this node needs
+             * recalculating as a result of an updated transform or layout animation.
              */
             this.isProjectionDirty = false;
+            /**
+             * Flag to true if the layout *or* transform has changed. This then gets propagated
+             * throughout the projection tree, forcing any element below to recalculate on the next frame.
+             */
+            this.isSharedProjectionDirty = false;
+            /**
+             * Flag transform dirty. This gets propagated throughout the whole tree but is only
+             * respected by shared nodes.
+             */
+            this.isTransformDirty = false;
             /**
              * Block layout updates for instant layout transitions throughout the tree.
              */
@@ -120,9 +140,19 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * the next step.
              */
             this.updateProjection = () => {
+                /**
+                 * Reset debug counts. Manually resetting rather than creating a new
+                 * object each frame.
+                 */
+                projectionFrameData.totalNodes =
+                    projectionFrameData.resolvedTargetDeltas =
+                        projectionFrameData.recalculatedProjection =
+                            0;
                 this.nodes.forEach(propagateDirtyNodes);
                 this.nodes.forEach(resolveTargetDelta);
                 this.nodes.forEach(calcProjection);
+                this.nodes.forEach(cleanDirtyNodes);
+                record(projectionFrameData);
             };
             this.hasProjected = false;
             this.isVisible = true;
@@ -578,13 +608,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             return boxWithoutTransform;
         }
-        /**
-         *
-         */
         setTargetDelta(delta) {
             this.targetDelta = delta;
-            this.isProjectionDirty = true;
             this.root.scheduleUpdateProjection();
+            this.isProjectionDirty = true;
         }
         setOptions(options) {
             this.options = {
@@ -606,6 +633,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
          * Frame calculations
          */
         resolveTargetDelta() {
+            var _a;
             /**
              * Once the dirty status of nodes has been spread through the tree, we also
              * need to check if we have a shared node of a different depth that has itself
@@ -614,11 +642,17 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             const lead = this.getLead();
             this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty);
             this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);
+            this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);
+            const isShared = Boolean(this.resumingFrom) || this !== lead;
             /**
              * We don't use transform for this step of processing so we don't
              * need to check whether any nodes have changed transform.
              */
-            if (!this.isProjectionDirty && !this.attemptToResolveRelativeTarget)
+            const canSkip = !((isShared && this.isSharedProjectionDirty) ||
+                this.isProjectionDirty ||
+                ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||
+                this.attemptToResolveRelativeTarget);
+            if (canSkip)
                 return;
             const { layout, layoutId } = this.options;
             /**
@@ -708,6 +742,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     this.relativeParent = this.relativeTarget = undefined;
                 }
             }
+            /**
+             * Increase debug counter for resolved target deltas
+             */
+            projectionFrameData.resolvedTargetDeltas++;
         }
         getClosestProjectingParent() {
             if (!this.parent ||
@@ -715,26 +753,39 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 has2DTranslate(this.parent.latestValues)) {
                 return undefined;
             }
-            if ((this.parent.relativeTarget ||
-                this.parent.targetDelta ||
-                this.parent.options.layoutRoot) &&
-                this.parent.layout) {
+            if (this.parent.isProjecting()) {
                 return this.parent;
             }
             else {
                 return this.parent.getClosestProjectingParent();
             }
         }
+        isProjecting() {
+            return Boolean((this.relativeTarget ||
+                this.targetDelta ||
+                this.options.layoutRoot) &&
+                this.layout);
+        }
         calcProjection() {
-            const { isProjectionDirty, isTransformDirty } = this;
-            this.isProjectionDirty = this.isTransformDirty = false;
+            var _a;
             const lead = this.getLead();
             const isShared = Boolean(this.resumingFrom) || this !== lead;
             let canSkip = true;
-            if (isProjectionDirty)
+            /**
+             * If this is a normal layout animation and neither this node nor its nearest projecting
+             * is dirty then we can't skip.
+             */
+            if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) {
                 canSkip = false;
-            if (isShared && isTransformDirty)
+            }
+            /**
+             * If this is a shared layout animation and this node's shared projection is dirty then
+             * we can't skip.
+             */
+            if (isShared &&
+                (this.isSharedProjectionDirty || this.isTransformDirty)) {
                 canSkip = false;
+            }
             if (canSkip)
                 return;
             const { layout, layoutId } = this.options;
@@ -788,6 +839,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.scheduleRender();
                 this.notifyListeners("projectionUpdate", target);
             }
+            /**
+             * Increase debug counter for recalculated projections
+             */
+            projectionFrameData.recalculatedProjection++;
         }
         hide() {
             this.isVisible = false;
@@ -830,6 +885,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.options.crossfade === true &&
                 !this.path.some(hasOpacityCrossfade));
             this.animationProgress = 0;
+            let prevRelativeTarget;
             this.mixTargetDelta = (latest) => {
                 const progress = latest / 1000;
                 mixAxisDelta(targetDelta.x, delta.x, progress);
@@ -842,6 +898,17 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     this.relativeParent.layout) {
                     calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
                     mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
+                    /**
+                     * If this is an unchanged relative target we can consider the
+                     * projection not dirty.
+                     */
+                    if (prevRelativeTarget &&
+                        boxEquals(this.relativeTarget, prevRelativeTarget)) {
+                        this.isProjectionDirty = false;
+                    }
+                    if (!prevRelativeTarget)
+                        prevRelativeTarget = createBox();
+                    copyBoxInto(prevRelativeTarget, this.relativeTarget);
                 }
                 if (isSharedLayoutAnimation) {
                     this.animationValues = mixedValues;
@@ -1255,14 +1322,35 @@ function notifyLayoutUpdate(node) {
 }
 function propagateDirtyNodes(node) {
     /**
-     * Propagate isProjectionDirty. Nodes are ordered by depth, so if the parent here
-     * is dirty we can simply pass this forward.
+     * Increase debug counter for nodes encountered this frame
      */
-    node.isProjectionDirty || (node.isProjectionDirty = Boolean(node.parent && node.parent.isProjectionDirty));
+    projectionFrameData.totalNodes++;
+    if (!node.parent)
+        return;
     /**
-     * Propagate isTransformDirty.
+     * If this node isn't projecting, propagate isProjectionDirty. It will have
+     * no performance impact but it will allow the next child that *is* projecting
+     * but *isn't* dirty to just check its parent to see if *any* ancestor needs
+     * correcting.
      */
-    node.isTransformDirty || (node.isTransformDirty = Boolean(node.parent && node.parent.isTransformDirty));
+    if (!node.isProjecting()) {
+        node.isProjectionDirty = node.parent.isProjectionDirty;
+    }
+    /**
+     * Propagate isSharedProjectionDirty and isTransformDirty
+     * throughout the whole tree. A future revision can take another look at
+     * this but for safety we still recalcualte shared nodes.
+     */
+    node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty ||
+        node.parent.isProjectionDirty ||
+        node.parent.isSharedProjectionDirty));
+    node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty);
+}
+function cleanDirtyNodes(node) {
+    node.isProjectionDirty =
+        node.isSharedProjectionDirty =
+            node.isTransformDirty =
+                false;
 }
 function clearSnapshot(node) {
     node.clearSnapshot();
@@ -1345,4 +1433,4 @@ function shouldAnimatePositionOnly(animationType, snapshot, layout) {
             !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2)));
 }
 
-export { createProjectionNode, mixAxis, mixAxisDelta, mixBox, propagateDirtyNodes };
+export { cleanDirtyNodes, createProjectionNode, mixAxis, mixAxisDelta, mixBox, propagateDirtyNodes };

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 === "9.1.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.2 may not work as expected.`);
+                warnOnce(nextValue.version === "9.1.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -25,7 +25,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 = "9.1.2";
+        this.version = "9.1.3";
         /**
          * Duration, in milliseconds, since last updating frame.
          *