Ensures CSS variables are trimmed before animating (#2688)

* Fixing animation of CSS vars

* Removing trims from parseCSSVariable

* Updating test

Author: mattgperry

dev/tests/css-vars.tsx

@@ -26,7 +26,7 @@ export const App = () => {
                     originX: 0,
                     originY: 0,
                     opacity: "var(--d)",
-                    backgroundColor: "var(--a)",
+                    backgroundColor: " var(--a)", // Should work even with space at start
                     scale: "var(--c)",
                     x: "var(--b)",
                 }}

packages/framer-motion/src/render/dom/DOMKeyframesResolver.ts

@@ -52,16 +52,21 @@ export class DOMKeyframesResolver<
          * If any keyframe is a CSS variable, we need to find its value by sampling the element
          */
         for (let i = 0; i < unresolvedKeyframes.length; i++) {
-            const keyframe = unresolvedKeyframes[i]
-            if (typeof keyframe === "string" && isCSSVariableToken(keyframe)) {
-                const resolved = getVariableValue(keyframe, element.current)
+            let keyframe = unresolvedKeyframes[i]
 
-                if (resolved !== undefined) {
-                    unresolvedKeyframes[i] = resolved as T
-                }
+            if (typeof keyframe === "string") {
+                keyframe = keyframe.trim()
+
+                if (isCSSVariableToken(keyframe)) {
+                    const resolved = getVariableValue(keyframe, element.current)
+
+                    if (resolved !== undefined) {
+                        unresolvedKeyframes[i] = resolved as T
+                    }
 
-                if (i === unresolvedKeyframes.length - 1) {
-                    this.finalKeyframe = keyframe as T
+                    if (i === unresolvedKeyframes.length - 1) {
+                        this.finalKeyframe = keyframe as T
+                    }
                 }
             }
         }