framer-motion 7.6.7 → 7.6.9

package/dist/framer-motion.dev.js

@@ -248,11 +248,11 @@
         hasEverUpdated: false,
     };
 
-    let id$1 = 1;
+    let id$2 = 1;
     function useProjectionId() {
         return useConstant(() => {
             if (globalProjectionState.hasEverUpdated) {
-                return id$1++;
+                return id$2++;
             }
         });
     }
@@ -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.7";
+            this.version = "7.6.9";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -4783,7 +4783,10 @@
                 node.options.layoutScroll &&
                 node.scroll &&
                 node !== node.root) {
-                transformBox(box, { x: -node.scroll.x, y: -node.scroll.y });
+                transformBox(box, {
+                    x: -node.scroll.offset.x,
+                    y: -node.scroll.offset.y,
+                });
             }
             if (delta) {
                 // Incoporate each ancestor's scale into a culmulative treeScale for this component
@@ -4832,8 +4835,8 @@
         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;
     }
@@ -5689,7 +5692,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    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)) {
@@ -5891,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, () => {
@@ -6767,7 +6774,6 @@
                     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;
@@ -6813,8 +6819,8 @@
         }
     }
 
-    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.
@@ -6823,12 +6829,16 @@
          */
         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)
@@ -6844,8 +6854,10 @@
          */
         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";
     }
 
     const compareByDepth = (a, b) => a.depth - b.depth;
@@ -6876,9 +6888,18 @@
      * which has a noticeable difference in spring animations
      */
     const animationTarget = 1000;
+    let id$1 = 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$1++;
+                /**
+                 * 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.
@@ -6905,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.
                  */
@@ -6987,8 +7013,8 @@
             hasListeners(name) {
                 return this.eventHandlers.has(name);
             }
-            registerPotentialNode(id, node) {
-                this.potentialNodes.set(id, node);
+            registerPotentialNode(elementId, node) {
+                this.potentialNodes.set(elementId, node);
             }
             /**
              * Lifecycles
@@ -7121,6 +7147,7 @@
                     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;
@@ -7135,11 +7162,7 @@
                 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)
@@ -7255,10 +7278,20 @@
                 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() {
@@ -7280,6 +7313,7 @@
                 }
             }
             measure(removeTransform = true) {
+                var _a;
                 const pageBox = this.measurePageBox();
                 let layoutBox = this.removeElementScroll(pageBox);
                 /**
@@ -7291,10 +7325,17 @@
                     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() {
@@ -7305,8 +7346,8 @@
                 // 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;
             }
@@ -7319,13 +7360,13 @@
                  */
                 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;
                             /**
@@ -7333,12 +7374,12 @@
                              * 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;
@@ -7353,8 +7394,8 @@
                         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))
@@ -7392,6 +7433,7 @@
              */
             setTargetDelta(delta) {
                 this.targetDelta = delta;
+                this.isProjectionDirty = true;
                 this.root.scheduleUpdateProjection();
             }
             setOptions(options) {
@@ -7415,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
@@ -7518,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
@@ -7588,7 +7641,7 @@
                 }
             }
             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 };
@@ -7596,8 +7649,8 @@
                 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 &&
@@ -7778,25 +7831,30 @@
                     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();
@@ -7938,11 +7996,12 @@
             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);
@@ -7952,7 +8011,7 @@
             }
             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]);
@@ -7962,7 +8021,7 @@
             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 {
@@ -8058,7 +8117,7 @@
         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
@@ -8071,7 +8130,7 @@
             }
         }
         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);
     }