From 67cc001aa2088285074a95ab7250b9e051802039 Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Tue, 9 May 2023 12:07:56 +0200
Subject: [PATCH] Adding failing test and fixing bug (#2115)

---
 .../animate-undo-layout-change.html           | 74 +++++++++++++++++++
 .../src/components/AnimatePresence/index.tsx  |  5 +-
 .../projection/node/create-projection-node.ts |  5 +-
 3 files changed, 77 insertions(+), 7 deletions(-)
 create mode 100644 dev/projection/animate-undo-layout-change.html
diff --git a/dev/projection/animate-undo-layout-change.html b/dev/projection/animate-undo-layout-change.html
new file mode 100644
index 0000000000..e0af44fb86
--- /dev/null
+++ b/dev/projection/animate-undo-layout-change.html
@@ -0,0 +1,74 @@
+<html>
+    <head>
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+            }
+
+            #parent {
+                width: 100px;
+                height: 100px;
+                background-color: #00cc88;
+            }
+
+            #parent.b {
+                width: 110px;
+                height: 110px;
+            }
+
+            #trigger-overflow {
+                width: 1px;
+                height: 1px;
+                position: absolute;
+                top: 2000px;
+                left: 2000px;
+            }
+
+            [data-layout-correct="false"] {
+                background: #dd1144 !important;
+                opacity: 0.5;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="parent"></div>
+        <div id="trigger-overflow"></div>
+
+        <script src="../../packages/framer-motion/dist/projection.dev.js"></script>
+        <script src="./script-assert.js"></script>
+        <script src="./script-animate.js"></script>
+        <script>
+            const { createNode, relativeEase } = window.Animate
+            const { matchViewportBox } = window.Assert
+
+            const parent = document.getElementById("parent")
+            const parentOrigin = parent.getBoundingClientRect()
+
+            const parentProjection = createNode(
+                parent,
+                undefined,
+                {},
+                { duration: 2 }
+            )
+
+            parentProjection.willUpdate()
+
+            parent.classList.add("b")
+
+            parentProjection.root.didUpdate()
+
+            frame.postRender(() => {
+                parentProjection.willUpdate()
+
+                parent.classList.remove("b")
+
+                parentProjection.root.didUpdate()
+
+                frame.postRender(() => {
+                    matchViewportBox(parent, parentOrigin)
+                })
+            })
+        </script>
+    </body>
+</html>
diff --git a/packages/framer-motion/src/components/AnimatePresence/index.tsx b/packages/framer-motion/src/components/AnimatePresence/index.tsx
index bb81fb1211..675591e3f6 100644
--- a/packages/framer-motion/src/components/AnimatePresence/index.tsx
+++ b/packages/framer-motion/src/components/AnimatePresence/index.tsx
@@ -90,9 +90,8 @@ export const AnimatePresence: React.FunctionComponent<
 
     // We want to force a re-render once all exiting animations have finished. We
     // either use a local forceRender function, or one from a parent context if it exists.
-    let [forceRender] = useForceUpdate()
-    const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender
-    if (forceRenderLayoutGroup) forceRender = forceRenderLayoutGroup
+    const forceRender =
+        useContext(LayoutGroupContext).forceRender || useForceUpdate()[0]
 
     const isMounted = useIsMounted()
 
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 4e4ae5f328..f6b0916298 100644
--- a/packages/framer-motion/src/projection/node/create-projection-node.ts
+++ b/packages/framer-motion/src/projection/node/create-projection-node.ts
@@ -493,10 +493,7 @@ export function createProjectionNode<I>({
                              * finish it immediately. Otherwise it will be animating from a location
                              * that was probably never commited to screen and look like a jumpy box.
                              */
-                            if (
-                                !hasLayoutChanged &&
-                                this.animationProgress === 0
-                            ) {
+                            if (!hasLayoutChanged) {
                                 finishAnimation(this)
                             }
 
