Merge pull request #2623 from framer/fix/restore-transform

Ensuring removed transforms are restored
framer · Apr 16, 2024 · 3ffc074 · 3ffc074
2 parents 1d6ee53 + c81b56e
commit 3ffc074
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 7 deletions.
diff --git a/dev/tests/unit-conversion-rotate.tsx b/dev/tests/unit-conversion-rotate.tsx
@@ -0,0 +1,45 @@
+import { animate } from "framer-motion"
+import { useEffect, useRef } from "react"
+
+/**
+ * An example of animating between different value types
+ */
+
+export const App = () => {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        animate(
+            ref.current,
+            { width: [0, 100], rotate: [0, 45] },
+            { duration: 0.1, ease: "linear" }
+        ).then(() => {
+            animate(
+                ref.current,
+                { width: "50%" },
+                {
+                    duration: 0.2,
+                    ease: "linear",
+                    onUpdate: (width) => {
+                        if (width > 200) {
+                            ref.current!.textContent = "Fail"
+                        }
+                    },
+                }
+            )
+        })
+    }, [])
+
+    return (
+        <div
+            ref={ref}
+            style={{
+                width: 100,
+                height: 100,
+                background: "#ffaa00",
+            }}
+            id="box"
+        >
+            Success
+        </div>
+    )
+}
diff --git a/packages/framer-motion/cypress/integration/unit-conversion.ts b/packages/framer-motion/cypress/integration/unit-conversion.ts
@@ -22,4 +22,16 @@ describe("Unit conversion", () => {
                 expect(height).to.equal(150)
             })
     })
+
+    it("Restores unapplied transforms", () => {
+        cy.viewport(400, 400)
+            .visit("?test=unit-conversion-rotate")
+            .wait(300)
+            .get("#box")
+            .should(([$box]: any) => {
+                const { transform } = $box.style
+                expect(transform).to.equal("rotate(45deg) translateZ(0px)")
+                expect($box.textContent).to.equal("Success")
+            })
+    })
 })
diff --git a/packages/framer-motion/src/render/VisualElement.ts b/packages/framer-motion/src/render/VisualElement.ts
@@ -889,9 +889,7 @@ export abstract class VisualElement<
      * Find the base target for a value thats been removed from all animation
      * props.
      */
-    getBaseTarget(
-        key: string
-    ): ResolvedValues[string] | undefined | null {
+    getBaseTarget(key: string): ResolvedValues[string] | undefined | null {
         const { initial } = this.props
 
         let valueFromInitial: ResolvedValues[string] | undefined | null

diff --git a/packages/framer-motion/src/render/utils/KeyframesResolver.ts b/packages/framer-motion/src/render/utils/KeyframesResolver.ts
@@ -33,10 +33,7 @@ function measureAllKeyframes() {
 
             if (!removedTransforms.length) return
 
-            transformsToRestore.set(
-                element,
-                removeNonTranslationalTransform(element)
-            )
+            transformsToRestore.set(element, removedTransforms)
 
             element.render()
         })
@@ -47,6 +44,13 @@ function measureAllKeyframes() {
         // Write
         elementsToMeasure.forEach((element: VisualElement<HTMLElement>) => {
             element.render()
+
+            const restore = transformsToRestore.get(element)
+            if (restore) {
+                restore.forEach(([key, value]) => {
+                    element.getValue(key)?.set(value)
+                })
+            }
         })
 
         // Read