Color not animatable

>You've received the following message

'${color}' is not an animatable color. Use the equivalent color code instead.

You're trying to mix a color, but you're receiving this warning.

animate(element, { color: "red" })

Explanation

Motion doesn't support named colors. JS animation libraries that support named colors are importing a list of names and colors, and this adds a lot of weight to the bundlesize for not much use.

In the future, thanks to Motion's hybrid engine that uses WAAPI for select animations, it might be possible to support this without the extra bundlesize.

Solution

Convert the named color to RGBA/Hex/HSLA.