Fixing layout animations with z transform

mattgperry · mattgperry · commit 1494a61a6e92 · 2024-03-28T10:41:24.000+01:00
diff --git a/dev/projection/single-element-layout-change-perspective-container.html b/dev/projection/single-element-layout-change-perspective-container.html
@@ -0,0 +1,100 @@
+<html>
+    <head>
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+            }
+
+            #container {
+                width: 100px;
+                height: 200px;
+                display: flex;
+                align-items: flex-end;
+                transform-style: preserve-3d;
+                background-color: blue;
+            }
+
+            #container.b {
+                align-items: flex-start;
+            }
+
+            #box {
+                width: 100px;
+                height: 100px;
+                background-color: #00cc88;
+                padding: 10px;
+                display: flex;
+                align-items: flex-start;
+            }
+
+            .b #box {
+                align-items: flex-end;
+            }
+
+            #box-child {
+                width: 50px;
+                height: 50px;
+                background-color: #cc00cc;
+            }
+
+            #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="container">
+            <div id="box" data-layout-correct="true">
+                <div id="box-child"></div>
+            </div>
+        </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-undo.js"></script>
+        <script>
+            const { createNode } = window.Undo
+            const { matchViewportBox, matchSkewX } = window.Assert
+            const container = document.getElementById("container")
+            const containerProjection = createNode(container, undefined, {
+                layout: false,
+            })
+            const box = document.getElementById("box")
+            const boxProjection = createNode(box, containerProjection)
+            const boxChild = document.getElementById("box-child")
+            const boxChildProjection = createNode(boxChild, boxProjection)
+
+            containerProjection.setValue("rotateX", 40)
+            containerProjection.setValue("transformPerspective", 500)
+            boxProjection.setValue("rotateX", 10)
+            boxProjection.setValue("z", 20)
+
+            requestAnimationFrame(() => {
+                const boxOrigin = box.getBoundingClientRect()
+                boxProjection.willUpdate()
+                boxChildProjection.willUpdate()
+                containerProjection.willUpdate()
+                container.classList.add("b")
+
+                requestAnimationFrame(() => {
+                    containerProjection.root.didUpdate()
+                    frame.postRender(() => {
+                        matchViewportBox(box, boxOrigin)
+                    })
+                })
+            })
+        </script>
+    </body>
+</html>
diff --git a/packages/framer-motion/src/projection/node/create-projection-node.ts b/packages/framer-motion/src/projection/node/create-projection-node.ts
@@ -1702,6 +1702,7 @@ export function createProjectionNode<I>({
              */
             const { latestValues } = visualElement
             if (
+                latestValues.z ||
                 latestValues.rotate ||
                 latestValues.rotateX ||
                 latestValues.rotateY ||
@@ -1717,6 +1718,15 @@ export function createProjectionNode<I>({
 
             const resetValues: ResolvedValues = {}
 
+            if (latestValues.z) {
+                resetDistortingTransform(
+                    "z",
+                    visualElement,
+                    resetValues,
+                    this.animationValues
+                )
+            }
+
             // Check the skew and rotate value of all axes and reset to 0
             for (let i = 0; i < transformAxes.length; i++) {
                 resetDistortingTransform(
diff --git a/packages/framer-motion/src/projection/styles/transform.ts b/packages/framer-motion/src/projection/styles/transform.ts
@@ -16,8 +16,9 @@ export function buildProjectionTransform(
      */
     const xTranslate = delta.x.translate / treeScale.x
     const yTranslate = delta.y.translate / treeScale.y
-    if (xTranslate || yTranslate) {
-        transform = `translate3d(${xTranslate}px, ${yTranslate}px, 0) `
+    const zTranslate = latestTransform?.z || 0
+    if (xTranslate || yTranslate || zTranslate) {
+        transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `
     }
 
     /**
