Merge pull request #2109 from framer/fix/layout-animation-bug

Fixing layout animations after window resize

Author: mergetron[bot]

dev/tests/layout-resize.tsx

@@ -14,7 +14,14 @@ export const App = () => {
             style={{ ...(state ? a : b) }}
             onClick={() => setState(!state)}
             transition={{ duration: 3 }}
-        />
+        >
+            <motion.div
+                layout
+                id="child"
+                style={{ width: 100, height: 100, background: "blue" }}
+                transition={{ duration: 3 }}
+            />
+        </motion.div>
     )
 }
 
@@ -33,7 +40,7 @@ const a = {
 
 const b = {
     ...box,
-    width: 200,
+    width: 400,
     height: 200,
     top: 100,
     left: 100,

lerna.json

@@ -1,8 +1,6 @@
 {
     "version": "10.12.10",
-    "packages": [
-        "packages/*"
-    ],
+    "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true
 }

packages/framer-motion-3d/package.json

@@ -60,5 +60,5 @@
         "@react-three/test-renderer": "^9.0.0",
         "@rollup/plugin-commonjs": "^22.0.1"
     },
-    "gitHead": "23a64f5f7dec6bc2d2df3f7ea8a661b91ae239d7"
+    "gitHead": "28d33ed46aab5c48a874ac9ab358d8ef0f7111f9"
 }

packages/framer-motion/cypress/integration/layout-resize.ts

@@ -26,6 +26,16 @@ describe("Resize window", () => {
                     height: 100,
                 })
             })
+            .get("#child")
+            .should(([$box]: any) => {
+                expectBbox($box, {
+                    top: 0,
+                    left: 0,
+                    width: 100,
+                    height: 100,
+                })
+            })
+            .get("#box")
             .trigger("click")
             .wait(50)
             .viewport(200, 200)
@@ -35,12 +45,32 @@ describe("Resize window", () => {
                 expectBbox($box, {
                     top: 100,
                     left: 100,
-                    width: 200,
+                    width: 400,
                     height: 200,
                 })
             })
+            .get("#child")
+            .should(([$box]: any) => {
+                expectBbox($box, {
+                    top: 100,
+                    left: 100,
+                    width: 100,
+                    height: 100,
+                })
+            })
+            .get("#box")
             .trigger("click", { force: true })
             .wait(50)
+            .get("#box")
+            .should(([$box]: any) => {
+                expectBbox($box, {
+                    top: 0,
+                    left: 0,
+                    width: 100,
+                    height: 100,
+                })
+            })
+            .get("#child")
             .should(([$box]: any) => {
                 expectBbox($box, {
                     top: 0,
@@ -49,6 +79,7 @@ describe("Resize window", () => {
                     height: 100,
                 })
             })
+            .get("#box")
             .wait(200)
             .trigger("click", { force: true })
             .wait(300)

packages/framer-motion/src/projection/node/create-projection-node.ts

@@ -1238,7 +1238,18 @@ export function createProjectionNode<I>({
 
             const { target } = lead
 
-            if (!target) return
+            if (!target) {
+                /**
+                 * If we don't have a target to project into, but we were previously
+                 * projecting, we want to remove the stored transform and schedule
+                 * a render to ensure the elements reflect the removed transform.
+                 */
+                if (this.projectionTransform) {
+                    this.projectionTransform = "none"
+                    this.scheduleRender()
+                }
+                return
+            }
 
             if (!this.projectionDelta) {
                 this.projectionDelta = createDelta()
@@ -1997,6 +2008,7 @@ function resetTransformStyle(node: IProjectionNode) {
 function finishAnimation(node: IProjectionNode) {
     node.finishAnimation()
     node.targetDelta = node.relativeTarget = node.target = undefined
+    node.isProjectionDirty = true
 }
 
 function resolveTargetDelta(node: IProjectionNode) {