framer-motion 7.6.7 → 7.6.9

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

@@ -26,9 +26,18 @@ const transformAxes = ["", "X", "Y", "Z"];
  * which has a noticeable difference in spring animations
  */
 const animationTarget = 1000;
+let id = 0;
 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
     return class ProjectionNode {
         constructor(elementId, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
+            /**
+             * A unique ID generated for every projection node.
+             */
+            this.id = id++;
+            /**
+             * An id that represents a unique session instigated by startUpdate.
+             */
+            this.animationId = 0;
             /**
              * A Set containing all this component's children. This is used to iterate
              * through the children.
@@ -55,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.
              */
@@ -137,8 +151,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         hasListeners(name) {
             return this.eventHandlers.has(name);
         }
-        registerPotentialNode(id, node) {
-            this.potentialNodes.set(id, node);
+        registerPotentialNode(elementId, node) {
+            this.potentialNodes.set(elementId, node);
         }
         /**
          * Lifecycles
@@ -271,6 +285,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 return;
             this.isUpdating = true;
             (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.forEach(resetRotation);
+            this.animationId++;
         }
         willUpdate(shouldNotifyListeners = true) {
             var _a, _b, _c;
@@ -285,11 +300,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             for (let i = 0; i < this.path.length; i++) {
                 const node = this.path[i];
                 node.shouldResetTransform = true;
-                /**
-                 * TODO: Check we haven't updated the scroll
-                 * since the last didUpdate
-                 */
-                node.updateScroll();
+                node.updateScroll("snapshot");
             }
             const { layoutId, layout } = this.options;
             if (layoutId === undefined && !layout)
@@ -405,10 +416,20 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.notifyListeners("measure", this.layout.layoutBox);
             (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notify("LayoutMeasure", this.layout.layoutBox, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.layoutBox);
         }
-        updateScroll() {
-            if (this.options.layoutScroll && this.instance) {
-                this.isScrollRoot = checkIsScrollRoot(this.instance);
-                this.scroll = measureScroll(this.instance);
+        updateScroll(phase = "measure") {
+            let needsMeasurement = Boolean(this.options.layoutScroll && this.instance);
+            if (this.scroll &&
+                this.scroll.animationId === this.root.animationId &&
+                this.scroll.phase === phase) {
+                needsMeasurement = false;
+            }
+            if (needsMeasurement) {
+                this.scroll = {
+                    animationId: this.root.animationId,
+                    phase,
+                    isRoot: checkIsScrollRoot(this.instance),
+                    offset: measureScroll(this.instance),
+                };
             }
         }
         resetTransform() {
@@ -430,6 +451,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
         }
         measure(removeTransform = true) {
+            var _a;
             const pageBox = this.measurePageBox();
             let layoutBox = this.removeElementScroll(pageBox);
             /**
@@ -441,10 +463,17 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 layoutBox = this.removeTransform(layoutBox);
             }
             roundBox(layoutBox);
+            const positionStyle = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.readValue("position");
+            const position = positionStyle === "fixed" || positionStyle === "sticky"
+                ? positionStyle
+                : "static";
             return {
+                animationId: this.root.animationId,
                 measuredBox: pageBox,
                 layoutBox,
                 latestValues: {},
+                source: this.id,
+                position,
             };
         }
         measurePageBox() {
@@ -455,8 +484,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             // Remove viewport scroll to give page-relative coordinates
             const { scroll } = this.root;
             if (scroll) {
-                translateAxis(box.x, scroll.x);
-                translateAxis(box.y, scroll.y);
+                translateAxis(box.x, scroll.offset.x);
+                translateAxis(box.y, scroll.offset.y);
             }
             return box;
         }
@@ -469,13 +498,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             for (let i = 0; i < this.path.length; i++) {
                 const node = this.path[i];
-                const { scroll, options, isScrollRoot } = node;
+                const { scroll, options } = node;
                 if (node !== this.root && scroll && options.layoutScroll) {
                     /**
                      * If this is a new scroll root, we want to remove all previous scrolls
                      * from the viewport box.
                      */
-                    if (isScrollRoot) {
+                    if (scroll.isRoot) {
                         copyBoxInto(boxWithoutScroll, box);
                         const { scroll: rootScroll } = this.root;
                         /**
@@ -483,12 +512,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                          * to the measured bounding box.
                          */
                         if (rootScroll) {
-                            translateAxis(boxWithoutScroll.x, -rootScroll.x);
-                            translateAxis(boxWithoutScroll.y, -rootScroll.y);
+                            translateAxis(boxWithoutScroll.x, -rootScroll.offset.x);
+                            translateAxis(boxWithoutScroll.y, -rootScroll.offset.y);
                         }
                     }
-                    translateAxis(boxWithoutScroll.x, scroll.x);
-                    translateAxis(boxWithoutScroll.y, scroll.y);
+                    translateAxis(boxWithoutScroll.x, scroll.offset.x);
+                    translateAxis(boxWithoutScroll.y, scroll.offset.y);
                 }
             }
             return boxWithoutScroll;
@@ -503,8 +532,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     node.scroll &&
                     node !== node.root) {
                     transformBox(withTransforms, {
-                        x: -node.scroll.x,
-                        y: -node.scroll.y,
+                        x: -node.scroll.offset.x,
+                        y: -node.scroll.offset.y,
                     });
                 }
                 if (!hasTransform(node.latestValues))
@@ -542,6 +571,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
          */
         setTargetDelta(delta) {
             this.targetDelta = delta;
+            this.isProjectionDirty = true;
             this.root.scheduleUpdateProjection();
         }
         setOptions(options) {
@@ -565,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
@@ -668,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
@@ -738,7 +779,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
         }
         setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
-            var _a;
+            var _a, _b;
             const snapshot = this.snapshot;
             const snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
             const mixedValues = { ...this.latestValues };
@@ -746,8 +787,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.relativeTarget = this.relativeTargetOrigin = undefined;
             this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
             const relativeLayout = createBox();
-            const isSharedLayoutAnimation = snapshot === null || snapshot === void 0 ? void 0 : snapshot.isShared;
-            const isOnlyMember = (((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.members.length) || 0) <= 1;
+            const isSharedLayoutAnimation = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.source) !== ((_a = this.layout) === null || _a === void 0 ? void 0 : _a.source);
+            const isOnlyMember = (((_b = this.getStack()) === null || _b === void 0 ? void 0 : _b.members.length) || 0) <= 1;
             const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&
                 !isOnlyMember &&
                 this.options.crossfade === true &&
@@ -928,25 +969,30 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 return;
             // If there's no detected rotation values, we can early return without a forced render.
             let hasRotate = false;
-            // Keep a record of all the values we've reset
-            const resetValues = {};
-            // Check the rotate value of all axes and reset to 0
-            for (let i = 0; i < transformAxes.length; i++) {
-                const axis = transformAxes[i];
-                const key = "rotate" + axis;
-                // If this rotation doesn't exist as a motion value, then we don't
-                // need to reset it
-                if (!visualElement.getStaticValue(key)) {
-                    continue;
-                }
+            /**
+             * An unrolled check for rotation values. Most elements don't have any rotation and
+             * skipping the nested loop and new object creation is 50% faster.
+             */
+            const { latestValues } = visualElement;
+            if (latestValues.rotate ||
+                latestValues.rotateX ||
+                latestValues.rotateY ||
+                latestValues.rotateZ) {
                 hasRotate = true;
-                // Record the rotation and then temporarily set it to 0
-                resetValues[key] = visualElement.getStaticValue(key);
-                visualElement.setStaticValue(key, 0);
             }
             // If there's no rotation values, we don't need to do any more.
             if (!hasRotate)
                 return;
+            const resetValues = {};
+            // Check the rotate value of all axes and reset to 0
+            for (let i = 0; i < transformAxes.length; i++) {
+                const key = "rotate" + transformAxes[i];
+                // Record the rotation and then temporarily set it to 0
+                if (latestValues[key]) {
+                    resetValues[key] = latestValues[key];
+                    visualElement.setStaticValue(key, 0);
+                }
+            }
             // Force a render of this element to apply the transform with all rotations
             // set to 0.
             visualElement === null || visualElement === void 0 ? void 0 : visualElement.render();
@@ -1088,11 +1134,12 @@ function notifyLayoutUpdate(node) {
         node.hasListeners("didUpdate")) {
         const { layoutBox: layout, measuredBox: measuredLayout } = node.layout;
         const { animationType } = node.options;
+        const isShared = snapshot.source !== node.layout.source;
         // TODO Maybe we want to also resize the layout snapshot so we don't trigger
         // animations for instance if layout="size" and an element has only changed position
         if (animationType === "size") {
             eachAxis((axis) => {
-                const axisSnapshot = snapshot.isShared
+                const axisSnapshot = isShared
                     ? snapshot.measuredBox[axis]
                     : snapshot.layoutBox[axis];
                 const length = calcLength(axisSnapshot);
@@ -1102,7 +1149,7 @@ function notifyLayoutUpdate(node) {
         }
         else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {
             eachAxis((axis) => {
-                const axisSnapshot = snapshot.isShared
+                const axisSnapshot = isShared
                     ? snapshot.measuredBox[axis]
                     : snapshot.layoutBox[axis];
                 const length = calcLength(layout[axis]);
@@ -1112,7 +1159,7 @@ function notifyLayoutUpdate(node) {
         const layoutDelta = createDelta();
         calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);
         const visualDelta = createDelta();
-        if (snapshot.isShared) {
+        if (isShared) {
             calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);
         }
         else {
@@ -1208,7 +1255,7 @@ const defaultLayoutTransition = {
     duration: 0.45,
     ease: [0.4, 0, 0.1, 1],
 };
-function mountNodeEarly(node, id) {
+function mountNodeEarly(node, elementId) {
     /**
      * Rather than searching the DOM from document we can search the
      * path for the deepest mounted ancestor and search from there
@@ -1221,7 +1268,7 @@ function mountNodeEarly(node, id) {
         }
     }
     const searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
-    const element = searchElement.querySelector(`[data-projection-id="${id}"]`);
+    const element = searchElement.querySelector(`[data-projection-id="${elementId}"]`);
     if (element)
         node.mount(element, true);
 }

package/dist/es/projection/shared/stack.mjs

@@ -62,7 +62,6 @@ class NodeStack {
                 node.snapshot = prevLead.snapshot;
                 node.snapshot.latestValues =
                     prevLead.animationValues || prevLead.latestValues;
-                node.snapshot.isShared = true;
             }
             if ((_a = node.root) === null || _a === void 0 ? void 0 : _a.isUpdating) {
                 node.isLayoutDirty = true;

package/dist/es/projection/styles/transform.mjs

@@ -1,5 +1,5 @@
-const identityProjection = "translate3d(0px, 0px, 0) scale(1, 1) scale(1, 1)";
 function buildProjectionTransform(delta, treeScale, latestTransform) {
+    let transform = "";
     /**
      * The translations we use to calculate are always relative to the viewport coordinate space.
      * But when we apply scales, we also scale the coordinate space of an element and its children.
@@ -8,12 +8,16 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
      */
     const xTranslate = delta.x.translate / treeScale.x;
     const yTranslate = delta.y.translate / treeScale.y;
-    let transform = `translate3d(${xTranslate}px, ${yTranslate}px, 0) `;
+    if (xTranslate || yTranslate) {
+        transform = `translate3d(${xTranslate}px, ${yTranslate}px, 0) `;
+    }
     /**
      * Apply scale correction for the tree transform.
      * This will apply scale to the screen-orientated axes.
      */
-    transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
+    if (treeScale.x !== 1 || treeScale.y !== 1) {
+        transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
+    }
     if (latestTransform) {
         const { rotate, rotateX, rotateY } = latestTransform;
         if (rotate)
@@ -29,8 +33,10 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
      */
     const elementScaleX = delta.x.scale * treeScale.x;
     const elementScaleY = delta.y.scale * treeScale.y;
-    transform += `scale(${elementScaleX}, ${elementScaleY})`;
-    return transform === identityProjection ? "none" : transform;
+    if (elementScaleX !== 1 || elementScaleY !== 1) {
+        transform += `scale(${elementScaleX}, ${elementScaleY})`;
+    }
+    return transform || "none";
 }
 
-export { buildProjectionTransform, identityProjection };
+export { buildProjectionTransform };

package/dist/es/projection/utils/measure.mjs

@@ -8,8 +8,8 @@ function measurePageBox(element, rootProjectionNode, transformPagePoint) {
     const viewportBox = measureViewportBox(element, transformPagePoint);
     const { scroll } = rootProjectionNode;
     if (scroll) {
-        translateAxis(viewportBox.x, scroll.x);
-        translateAxis(viewportBox.y, scroll.y);
+        translateAxis(viewportBox.x, scroll.offset.x);
+        translateAxis(viewportBox.y, scroll.offset.y);
     }
     return viewportBox;
 }

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.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.7 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.7";
+        this.version = "7.6.9";
         /**
          * Duration, in milliseconds, since last updating frame.
          *