Merge pull request #2691 from framer/fix/mix-immediate-invalid-color

Updating interpolation for invalid colors

Author: mergetron[bot]

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)")
+})

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) => {

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)
 }

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)
+}