From e5a009e626dc1cdcfeceb719b6d7b75505623375 Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Wed, 12 Apr 2023 13:40:20 +0200
Subject: [PATCH] Ensure relative target resolved (#2082)

---
 .../projection/node/create-projection-node.ts | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

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 90e63dc07f..e80b31532a 100644
--- a/packages/framer-motion/src/projection/node/create-projection-node.ts
+++ b/packages/framer-motion/src/projection/node/create-projection-node.ts
@@ -987,6 +987,23 @@ export function createProjectionNode<I>({
             this.isLayoutDirty = false
         }
 
+        forceRelativeParentToResolveTarget() {
+            if (!this.relativeParent) return
+
+            /**
+             * If the parent target isn't up-to-date, force it to update.
+             * This is an unfortunate de-optimisation as it means any updating relative
+             * projection will cause all the relative parents to recalculate back
+             * up the tree.
+             */
+            if (
+                this.relativeParent.resolvedRelativeTargetAt !==
+                frameData.timestamp
+            ) {
+                this.relativeParent.resolveTargetDelta(true)
+            }
+        }
+
         /**
          * Frame calculations
          */
@@ -1038,6 +1055,7 @@ export function createProjectionNode<I>({
                 const relativeParent = this.getClosestProjectingParent()
                 if (relativeParent && relativeParent.layout) {
                     this.relativeParent = relativeParent
+                    this.forceRelativeParentToResolveTarget()
                     this.relativeTarget = createBox()
                     this.relativeTargetOrigin = createBox()
                     calcRelativePosition(
@@ -1075,18 +1093,7 @@ export function createProjectionNode<I>({
                 this.relativeParent &&
                 this.relativeParent.target
             ) {
-                /**
-                 * If the parent target isn't up-to-date, force it to update.
-                 * This is an unfortunate de-optimisation as it means any updating relative
-                 * projection will cause all the relative parents to recalculate back
-                 * up the tree.
-                 */
-                if (
-                    this.relativeParent.resolvedRelativeTargetAt !==
-                    frameData.timestamp
-                ) {
-                    this.relativeParent.resolveTargetDelta(true)
-                }
+                this.forceRelativeParentToResolveTarget()
 
                 calcRelativeBox(
                     this.target,
@@ -1128,6 +1135,7 @@ export function createProjectionNode<I>({
                     relativeParent.target
                 ) {
                     this.relativeParent = relativeParent
+                    this.forceRelativeParentToResolveTarget()
                     this.relativeTarget = createBox()
                     this.relativeTargetOrigin = createBox()
 
@@ -1394,8 +1402,6 @@ export function createProjectionNode<I>({
                      * projection not dirty.
                      */
                     if (
-                        // TODO: Ideally we would be able to improve optimisations by removing this line
-                        !this.relativeParent.isProjectionDirty &&
                         prevRelativeTarget &&
                         boxEquals(this.relativeTarget, prevRelativeTarget)
                     ) {