framer-motion 7.6.7 → 7.6.9

package/dist/index.d.ts

@@ -1333,15 +1333,27 @@ declare class FlatTree {
     forEach(callback: (child: WithDepth) => void): void;
 }
 
+declare type Position = "static" | "sticky" | "fixed";
 interface Measurements {
+    animationId: number;
     measuredBox: Box;
     layoutBox: Box;
     latestValues: ResolvedValues;
-    isShared?: boolean;
+    source: number;
+    position: Position;
+}
+declare type Phase = "snapshot" | "measure";
+interface ScrollMeasurements {
+    animationId: number;
+    phase: Phase;
+    isRoot: boolean;
+    offset: Point;
 }
 declare type LayoutEvents = "willUpdate" | "didUpdate" | "beforeMeasure" | "measure" | "projectionUpdate" | "animationStart" | "animationComplete";
 interface IProjectionNode<I = unknown> {
+    id: number;
     elementId: number | undefined;
+    animationId: number;
     parent?: IProjectionNode;
     relativeParent?: IProjectionNode;
     root?: IProjectionNode;
@@ -1360,13 +1372,13 @@ interface IProjectionNode<I = unknown> {
     relativeTarget?: Box;
     targetDelta?: Delta;
     targetWithTransforms?: Box;
-    scroll?: Point;
-    isScrollRoot?: boolean;
+    scroll?: ScrollMeasurements;
     treeScale?: Point;
     projectionDelta?: Delta;
     projectionDeltaWithTransform?: Delta;
     latestValues: ResolvedValues;
     isLayoutDirty: boolean;
+    isProjectionDirty: boolean;
     shouldResetTransform: boolean;
     prevTransformTemplateValue: string | undefined;
     isUpdateBlocked(): boolean;
@@ -1384,7 +1396,7 @@ interface IProjectionNode<I = unknown> {
     updateLayout(): void;
     updateSnapshot(): void;
     clearSnapshot(): void;
-    updateScroll(): void;
+    updateScroll(phase?: Phase): void;
     scheduleUpdateProjection(): void;
     scheduleCheckAfterUnmount(): void;
     checkUpdateFailed(): void;

package/dist/projection.dev.js

@@ -1242,7 +1242,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.
              *
@@ -2194,7 +2194,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
@@ -2420,7 +2423,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;
@@ -2471,8 +2473,8 @@
         Object.assign(scaleCorrectors, correctors);
     }
 
-    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.
@@ -2481,12 +2483,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)
@@ -2502,8 +2508,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";
     }
 
     function eachAxis(callback) {
@@ -2568,9 +2576,18 @@
      * 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.
@@ -2597,6 +2614,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.
                  */
@@ -2679,8 +2701,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
@@ -2813,6 +2835,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;
@@ -2827,11 +2850,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)
@@ -2947,10 +2966,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() {
@@ -2972,6 +3001,7 @@
                 }
             }
             measure(removeTransform = true) {
+                var _a;
                 const pageBox = this.measurePageBox();
                 let layoutBox = this.removeElementScroll(pageBox);
                 /**
@@ -2983,10 +3013,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() {
@@ -2997,8 +3034,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;
             }
@@ -3011,13 +3048,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;
                             /**
@@ -3025,12 +3062,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;
@@ -3045,8 +3082,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))
@@ -3084,6 +3121,7 @@
              */
             setTargetDelta(delta) {
                 this.targetDelta = delta;
+                this.isProjectionDirty = true;
                 this.root.scheduleUpdateProjection();
             }
             setOptions(options) {
@@ -3107,6 +3145,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
@@ -3210,6 +3256,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
@@ -3280,7 +3329,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 };
@@ -3288,8 +3337,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 &&
@@ -3470,25 +3519,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();
@@ -3630,11 +3684,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);
@@ -3644,7 +3699,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]);
@@ -3654,7 +3709,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 {
@@ -3750,7 +3805,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
@@ -3763,7 +3818,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);
     }
@@ -4742,7 +4797,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)) {
@@ -4944,10 +4999,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, () => {