Setting unmixable radius to lead

framer · Jan 11, 2022 · 3b802f9 · 3b802f9
1 parent fa3aca9
commit 3b802f9
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 7 deletions.
diff --git a/src/projection/animation/__tests__/mix-values.test.ts b/src/projection/animation/__tests__/mix-values.test.ts
@@ -71,4 +71,30 @@ describe("mixValues", () => {
 
         expect(output).toEqual({ borderTopLeftRadius: "10%" })
     })
+
+    test("doesn't mix % with px", () => {
+        const output = {}
+
+        mixValues(
+            output,
+            { borderTopLeftRadius: "10px" },
+            { borderTopLeftRadius: "20%" },
+            0.5,
+            false,
+            false
+        )
+
+        expect(output).toEqual({ borderTopLeftRadius: "20%" })
+
+        mixValues(
+            output,
+            { borderTopLeftRadius: "20%" },
+            { borderTopLeftRadius: "10px" },
+            0.5,
+            false,
+            false
+        )
+
+        expect(output).toEqual({ borderTopLeftRadius: "10px" })
+    })
 })
diff --git a/src/projection/animation/mix-values.ts b/src/projection/animation/mix-values.ts
@@ -1,5 +1,5 @@
 import { circOut, linear, mix, progress as calcProgress } from "popmotion"
-import { percent } from "style-value-types"
+import { percent, px } from "style-value-types"
 import { ResolvedValues } from "../../render/types"
 import { EasingFunction } from "../../types"
 
@@ -9,6 +9,9 @@ const numBorders = borders.length
 const asNumber = (value: string | number) =>
     typeof value === "string" ? parseFloat(value) : value
 
+const isPx = (value: string | number) =>
+    typeof value === "number" || px.test(value)
+
 export function mixValues(
     target: ResolvedValues,
     follow: ResolvedValues,
@@ -51,13 +54,22 @@ export function mixValues(
         followRadius ||= 0
         leadRadius ||= 0
 
-        target[borderLabel] = Math.max(
-            mix(asNumber(followRadius), asNumber(leadRadius), progress),
-            0
-        )
+        const canMix =
+            followRadius === 0 ||
+            leadRadius === 0 ||
+            isPx(followRadius) === isPx(leadRadius)
+
+        if (canMix) {
+            target[borderLabel] = Math.max(
+                mix(asNumber(followRadius), asNumber(leadRadius), progress),
+                0
+            )
 
-        if (percent.test(leadRadius) || percent.test(followRadius)) {
-            target[borderLabel] += "%"
+            if (percent.test(leadRadius) || percent.test(followRadius)) {
+                target[borderLabel] += "%"
+            }
+        } else {
+            target[borderLabel] = leadRadius
         }
     }