Updating interpolation for invalid colors

framer · May 31, 2024 · 8535767 · 8535767
1 parent a58d3e7
commit 8535767
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 6 deletions.
diff --git a/dev/react/dist/assets/index-DSk6aOsu.js b/dev/react/dist/assets/index-DSk6aOsu.js
diff --git a/dev/react/dist/assets/index-DiwrgTda.css b/dev/react/dist/assets/index-DiwrgTda.css
diff --git a/dev/react/dist/assets/react-CHdo91hT.svg b/dev/react/dist/assets/react-CHdo91hT.svg
diff --git a/dev/react/dist/index.html b/dev/react/dist/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+    <script type="module" crossorigin src="/assets/index-DSk6aOsu.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DiwrgTda.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/dev/react/dist/vite.svg b/dev/react/dist/vite.svg
diff --git a/packages/framer-motion/src/utils/mix/__tests__/mix-color.test.ts b/packages/framer-motion/src/utils/mix/__tests__/mix-color.test.ts
@@ -128,3 +128,9 @@ test("mixColor rgba with slash (without slash spaces) to rgba without", () => {
 test("doesn't return NaN", () => {
     expect(mixLinearColor(255, 0, 2)).not.toBeNaN()
 })
+
+test("mixColor mixes immediately with unknown color", () => {
+    expect(mixColor("red", "rgba(0, 0, 0, 0)")(0)).toBe("red")
+    expect(mixColor("red", "rgba(0, 0, 0, 0)")(0.5)).toBe("rgba(0, 0, 0, 0)")
+    expect(mixColor("red", "rgba(0, 0, 0, 0)")(1)).toBe("rgba(0, 0, 0, 0)")
+})
diff --git a/packages/framer-motion/src/utils/mix/color.ts b/packages/framer-motion/src/utils/mix/color.ts
@@ -1,10 +1,11 @@
 import { mixNumber } from "./number"
-import { invariant } from "../errors"
+import { warning } from "../errors"
 import { hslaToRgba } from "../hsla-to-rgba"
 import { hex } from "../../value/types/color/hex"
 import { rgba } from "../../value/types/color/rgba"
 import { hsla } from "../../value/types/color/hsla"
 import { Color, HSLA, RGBA } from "../../value/types/types"
+import { mixImmediate } from "./immediate"
 
 // Linear color space blending
 // Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
@@ -22,11 +23,13 @@ const getColorType = (v: Color | string) =>
 function asRGBA(color: Color | string) {
     const type = getColorType(color)
 
-    invariant(
+    warning(
         Boolean(type),
         `'${color}' is not an animatable color. Use the equivalent color code instead.`
     )
 
+    if (!Boolean(type)) return false
+
     let model = type!.parse(color)
 
     if (type === hsla) {
@@ -41,6 +44,10 @@ export const mixColor = (from: Color | string, to: Color | string) => {
     const fromRGBA = asRGBA(from)
     const toRGBA = asRGBA(to)
 
+    if (!fromRGBA || !toRGBA) {
+        return mixImmediate(from, to)
+    }
+
     const blended = { ...fromRGBA }
 
     return (v: number) => {

diff --git a/packages/framer-motion/src/utils/mix/complex.ts b/packages/framer-motion/src/utils/mix/complex.ts
@@ -12,16 +12,13 @@ import {
 } from "../../value/types/complex"
 import { isCSSVariableToken } from "../../render/dom/utils/is-css-variable"
 import { invisibleValues, mixVisibility } from "./visibility"
+import { mixImmediate } from "./immediate"
 
 type MixableArray = Array<number | RGBA | HSLA | string>
 type MixableObject = {
     [key: string]: string | number | RGBA | HSLA
 }
 
-function mixImmediate<T>(a: T, b: T) {
-    return (p: number) => (p > 0 ? b : a)
-}
-
 function mixNumber(a: number, b: number) {
     return (p: number) => mixNumberImmediate(a, b, p)
 }

diff --git a/packages/framer-motion/src/utils/mix/immediate.ts b/packages/framer-motion/src/utils/mix/immediate.ts
@@ -0,0 +1,3 @@
+export function mixImmediate<T>(a: T, b: T) {
+    return (p: number) => (p > 0 ? b : a)
+}