Fixing CSS variables as final keyframe (#2617)

framer · Apr 11, 2024 · ba2f48c · ba2f48c
1 parent 7e5381a
commit ba2f48c
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 17 deletions.
diff --git a/dev/tests/css-var-numbers.tsx → dev/tests/css-vars.tsx b/dev/tests/css-var-numbers.tsx → dev/tests/css-vars.tsx
@@ -17,22 +17,31 @@ export const App = () => {
     const content = useMotionValue("")
 
     return (
-        <div style={{ "--a": "#00F", "--b": "100px", "--c": 2 } as any}>
+        <div
+            style={
+                { "--a": "#00F", "--b": "100px", "--c": 2, "--d": 0.5 } as any
+            }
+        >
             <motion.div
                 animate={{
                     originX: 0,
                     originY: 0,
+                    opacity: "var(--d)",
                     backgroundColor: "var(--a)",
                     scale: "var(--c)",
                     x: "var(--b)",
                 }}
+                transition={{ duration: 0.1 }}
                 style={style}
-                onUpdate={({ scale, x }) => {
+                onUpdate={({ scale }) => {
                     if (isFirstFrame) {
-                        content.set(scale === "2" ? "Fail" : "Success")
+                        content.set(
+                            typeof scale === "string" ? "Fail" : "Success"
+                        )
                     }
                     isFirstFrame = false
                 }}
+                id="test"
             >
                 {content}
             </motion.div>

diff --git a/packages/framer-motion/cypress/integration/css-var-numbers.ts b/packages/framer-motion/cypress/integration/css-var-numbers.ts
diff --git a/packages/framer-motion/cypress/integration/css-vars.ts b/packages/framer-motion/cypress/integration/css-vars.ts
@@ -0,0 +1,20 @@
+describe("CSS variables", () => {
+    it("Numerical CSS var values are resolved and animated correctly", () => {
+        cy.visit("?test=css-vars")
+            .wait(100)
+            .get("#test")
+            .should(([$element]: any) => {
+                expect($element.textContent).to.equal("Success")
+            })
+    })
+
+    it("CSS vars are set as value at the end of an animation", () => {
+        cy.visit("?test=css-vars")
+            .wait(200)
+            .get("#test")
+            .should(([$element]: any) => {
+                expect($element.style.backgroundColor).to.equal("var(--a)")
+                expect($element.style.opacity).to.equal("var(--d)")
+            })
+    })
+})
diff --git a/packages/framer-motion/src/render/dom/DOMKeyframesResolver.ts b/packages/framer-motion/src/render/dom/DOMKeyframesResolver.ts
@@ -59,6 +59,10 @@ export class DOMKeyframesResolver<
                 if (resolved !== undefined) {
                     unresolvedKeyframes[i] = resolved as T
                 }
+
+                if (i === unresolvedKeyframes.length - 1) {
+                    this.finalKeyframe = keyframe as T
+                }
             }
         }
 
@@ -160,7 +164,7 @@ export class DOMKeyframesResolver<
             window.getComputedStyle(element.current)
         ) as any
 
-        if (finalKeyframe !== null) {
+        if (finalKeyframe !== null && this.finalKeyframe === undefined) {
             this.finalKeyframe = finalKeyframe as T
         }
 

diff --git a/packages/framer-motion/src/render/utils/KeyframesResolver.ts b/packages/framer-motion/src/render/utils/KeyframesResolver.ts
@@ -208,6 +208,7 @@ export class KeyframeResolver<T extends string | number = any> {
 
     complete() {
         this.isComplete = true
+
         this.onComplete(
             this.unresolvedKeyframes as ResolvedKeyframes<T>,
             this.finalKeyframe as T