framer-motion 9.1.2 → 9.1.4

package/dist/framer-motion.dev.js

@@ -2000,7 +2000,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 = "9.1.2";
+            this.version = "9.1.4";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5944,6 +5944,12 @@
         }
     }
 
+    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 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 @@
                  * 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 @@
                  * 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 @@
                 }
                 return boxWithoutTransform;
             }
-            /**
-             *
-             */
             setTargetDelta(delta) {
                 this.targetDelta = delta;
-                this.isProjectionDirty = true;
                 this.root.scheduleUpdateProjection();
+                this.isProjectionDirty = true;
             }
             setOptions(options) {
                 this.options = {
@@ -6530,6 +6562,7 @@
              * 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 @@
                 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 @@
                         this.relativeParent = this.relativeTarget = undefined;
                     }
                 }
+                /**
+                 * Increase debug counter for resolved target deltas
+                 */
+                projectionFrameData.resolvedTargetDeltas++;
             }
             getClosestProjectingParent() {
                 if (!this.parent ||
@@ -6639,26 +6682,39 @@
                     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 @@
                     this.scheduleRender();
                     this.notifyListeners("projectionUpdate", target);
                 }
+                /**
+                 * Increase debug counter for recalculated projections
+                 */
+                projectionFrameData.recalculatedProjection++;
             }
             hide() {
                 this.isVisible = false;
@@ -6754,6 +6814,7 @@
                     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 @@
                         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 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 @@
                  * and warn against mismatches.
                  */
                 {
-                    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.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.4 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {