This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Edward Sanchez
Posted Feb 07 - Read on Facebook

How do you animate between 2 colors? Googling framerjs + keywords rarely gets me good results 😔

Searched through examples and only saw one which was using states and huerotate, but I want a specific hex.

What would be really useful is if in the documentation, there were links to the examples that use each feature. Shouldn't take too long to map it all out.

Thank you!

5 Comments

Andreas Wahlström

I don't think animating between color values is supported in the animate method. But you can probably add a CSS transition using .style. See: http://css-tricks.com/almanac/properties/t/transition/

Joshua Tucker

You are correct - backgroundColor is not currently animatable. Good call Andreas!

Ofer Halevi

I assume you want to animate a background color property? This is not supported (you cannot animate non numeric properties). You could play with opacity of two layers instead. Searching the Facebook group should also bring up previous discussions on the subject.

Edward Sanchez

thanks

Tisho Georgiev

You could use another library for animating between colors, but keep in mind that animating a background color will introduce a performance penalty, because the browser needs to rasterize the entire element again every time it changes its color (the same isn't true for rotations, scaling, translations and opacity changes).

Read the entire post on Facebook