Merge pull request #2138 from framer/fix/border

Use `0` string values to template numerical values

Author: mergetron[bot]

packages/framer-motion/src/animation/utils/__tests__/keyframes.test.ts

@@ -137,4 +137,19 @@ describe("getKeyframes", () => {
         )
         expect(e).toEqual(["0px", "50px"])
     })
+
+    test("Makes 0 motion value animatable to string", () => {
+        const keyframes = getKeyframes(motionValue(0), "transform", "0%", {})
+        expect(keyframes).toEqual(["0%", "0%"])
+    })
+
+    test("Makes 0 keyframe animatable to string", () => {
+        const keyframes = getKeyframes(
+            motionValue(0),
+            "transform",
+            [0, "0%"],
+            {}
+        )
+        expect(keyframes).toEqual(["0%", "0%"])
+    })
 })

packages/framer-motion/src/animation/utils/keyframes.ts

@@ -36,7 +36,14 @@ export function getKeyframes(
 
         if (isNone(keyframes[i])) {
             noneKeyframeIndexes.push(i)
-        } else if (typeof keyframes[i] === "string") {
+        }
+
+        // TODO: Clean this conditional, it works for now
+        if (
+            typeof keyframes[i] === "string" &&
+            keyframes[i] !== "none" &&
+            keyframes[i] !== "0"
+        ) {
             animatableTemplateValue = keyframes[i] as string
         }
     }