diff --git a/packages/framer-motion/src/motion/features/layout/MeasureLayout.tsx b/packages/framer-motion/src/motion/features/layout/MeasureLayout.tsx index ca9bc948a2..87cab5490a 100644 --- a/packages/framer-motion/src/motion/features/layout/MeasureLayout.tsx +++ b/packages/framer-motion/src/motion/features/layout/MeasureLayout.tsx @@ -26,6 +26,12 @@ interface MeasureContextProps { type MeasureProps = MotionProps & MeasureContextProps & { visualElement: VisualElement } +/** + * Track whether we've taken any snapshots yet. If not, + * we can safely skip notification of didUpdate. + */ +let hasTakenAnySnapshot = false + class MeasureLayoutWithContext extends Component { /** * This only mounts projection nodes for components that @@ -46,7 +52,10 @@ class MeasureLayoutWithContext extends Component { switchLayoutGroup.register(projection) } - projection.root!.didUpdate() + if (hasTakenAnySnapshot) { + projection.root!.didUpdate() + } + projection.addEventListener("animationComplete", () => { this.safeToRemove() }) @@ -74,6 +83,8 @@ class MeasureLayoutWithContext extends Component { */ projection.isPresent = isPresent + hasTakenAnySnapshot = true + if ( drag || prevProps.layoutDependency !== layoutDependency || diff --git a/packages/framer-motion/src/projection/node/create-projection-node.ts b/packages/framer-motion/src/projection/node/create-projection-node.ts index 032cb5a482..31ef9656c6 100644 --- a/packages/framer-motion/src/projection/node/create-projection-node.ts +++ b/packages/framer-motion/src/projection/node/create-projection-node.ts @@ -613,8 +613,10 @@ export function createProjectionNode({ // Note: currently only running on root node startUpdate() { + console.log("update blocked") if (this.isUpdateBlocked()) return + console.log("start update") this.isUpdating = true this.nodes && this.nodes.forEach(resetSkewAndRotation) @@ -628,6 +630,7 @@ export function createProjectionNode({ willUpdate(shouldNotifyListeners = true) { this.root.hasTreeAnimated = true + if (this.root.isUpdateBlocked()) { this.options.onExitComplete && this.options.onExitComplete() return @@ -699,26 +702,27 @@ export function createProjectionNode({ if (!this.isUpdating) { this.nodes!.forEach(clearIsLayoutDirty) - } + } else { + this.isUpdating = false - this.isUpdating = false + /** + * Write + */ + this.nodes!.forEach(resetTransformStyle) - /** - * Write - */ - this.nodes!.forEach(resetTransformStyle) + /** + * Read ================== + */ + // Update layout measurements of updated children + this.nodes!.forEach(updateLayout) - /** - * Read ================== - */ - // Update layout measurements of updated children - this.nodes!.forEach(updateLayout) + /** + * Write + */ + // Notify listeners that the layout is updated + this.nodes!.forEach(notifyLayoutUpdate) + } - /** - * Write - */ - // Notify listeners that the layout is updated - this.nodes!.forEach(notifyLayoutUpdate) this.clearAllSnapshots() /** @@ -821,7 +825,6 @@ export function createProjectionNode({ updateLayout() { if (!this.instance) return - // TODO: Incorporate into a forwarded scroll offset this.updateScroll() if (