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

What is Framer? Join the Community
Return to index
Jérémy Jones
Posted Feb 18 - Read on Facebook

Hi again, I don't understand why my state animation doesn't work properly
I have this:

box.states.add
one: {backgroundColor: "green", scale: 1.1}

circle.on Events.Click, ->
box.states.next("one", "default")

Everything is fine but I don't understand why the BackgroundColor wait the end of the animation to change his color. Check the video I uploaded.

http://cl.ly/0v3d1I351i3I

And thanks again!

6 Comments

Benjamin Den Boer

Hey Jérémy Jones - color is not yet an animatable property of Framer, which is why it doesn't animate along with your scale animation. :)

Jérémy Jones

Benjamin Den Boer true.. but there is no way to tweak that a little bit?

Benjamin Den Boer

Couple of ways, yes. You could create a CSS transition within Framer and animate a color via that. Otherwise, you could also tween between RGB values within Framer, something like this:
https://dribbble.com/shots/1933011-Color-Picker-with-Framer-js?list=users&offset=0

Jérémy Jones

Benjamin Den Boer When you say CSS transition, directly inside Framer or inside the style.css?

Benjamin Den Boer

Jérémy yeah, you could do this within Framer as well. Here's an example of the potential CSS workaround you could use:
http://share.framerjs.com/31tdtrqr73xl/

(Layer color animates on hover, via CSS)

Jérémy Jones

Benjamin Den Boer great, I didn't know that... you can use .transition in Framer :D Thanks a lot Benjamin !

Read the entire post on Facebook