Merge pull request #1570 from framer/fix/projection-rotate

Fix rotation during layout projection
framer · Jun 7, 2022 · 66c3ec1 · 66c3ec1
2 parents 3b3db38 + 7829791
commit 66c3ec1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/packages/framer-motion/src/projection/node/create-projection-node.ts b/packages/framer-motion/src/projection/node/create-projection-node.ts
@@ -696,6 +696,7 @@ export function createProjectionNode<I>({
             }
 
             const measured = this.measure()
+
             roundBox(measured)
 
             const prevLayout = this.layout

diff --git a/packages/framer-motion/src/projection/styles/__tests__/transform.test.ts b/packages/framer-motion/src/projection/styles/__tests__/transform.test.ts
@@ -28,5 +28,9 @@ describe("buildProjectionTransform", () => {
         expect(buildProjectionTransform(delta, { x: 2, y: 0.5 })).toEqual(
             "translate3d(50px, 600px, 0) scale(2, 4)"
         )
+
+        expect(
+            buildProjectionTransform(delta, { x: 2, y: 0.5 }, { rotate: 45 })
+        ).toEqual("translate3d(50px, 600px, 0) scale(2, 4) rotate(45deg)")
     })
 })
diff --git a/packages/framer-motion/src/projection/styles/transform.ts b/packages/framer-motion/src/projection/styles/transform.ts
@@ -18,14 +18,20 @@ export function buildProjectionTransform(
     const yTranslate = delta.y.translate / treeScale.y
     let transform = `translate3d(${xTranslate}px, ${yTranslate}px, 0) `
 
+    /**
+     * Scale must come before rotate otherwise the scale correction will be rotated,
+     * compounding the distortion.
+     */
+    transform += `scale(${delta.x.scale}, ${delta.y.scale}) `
+
     if (latestTransform) {
         const { rotate, rotateX, rotateY } = latestTransform
         if (rotate) transform += `rotate(${rotate}deg) `
         if (rotateX) transform += `rotateX(${rotateX}deg) `
         if (rotateY) transform += `rotateY(${rotateY}deg) `
     }
 
-    transform += `scale(${delta.x.scale}, ${delta.y.scale})`
+    transform = transform.trim()
 
     return transform === identityProjection ? "none" : transform
 }