Documentation

Documentation

Warning

Color not animatable

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.

Level up your animations with Motion+

Access to 100+ premium examples, exclusive APIs like Cursor, private Discord and GitHub, and powerful VS Code animation editing tools.

One-time payment, lifetime updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.