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

What is Framer? Join the Community
Return to index
Maximüs Groves
Posted Jan 22 - Read on Facebook

Have you guys had success animating a layer's background color? Alternatively, is there an onUpdate event we can listen for during animations?


Andrew Nalband

You can listen with layer.on Events.AnimationEnd, ->

Andrew Nalband

Here's a quick example of animating background color. Click on the layer to see it animate.

Maximüs Groves

Thanks for the response Andrew. The AnimationEnd event is working great, though I was wondering if there was an event broadcasted repeatedly through the length of the animation as a sloppy way to bind other properties to it. Weirdly enough I'm not able to tween the backgroundColor like in your example it's good to see it can be done, I'll keep messing with it.

Andrew Nalband

Feel free to share your project and I can help you with your specific use case. Actually, you can listen to many of the specific properties during the animation like so:

layer.on "change:x", ->

Here's some stuff from the docs you can listen for:

"change:x" — New x position.
"change:y" — New y position.
"change:point" — New x or y position.
"change:width" — New width value.
"change:height" — New height value.
"change:size" — New width or height values.
"change:frame" — New x, y, width or height values.
"change:rotation" — New rotation value.
"change:borderRadius" — New borderRadius value.
"change:currentPage" — New currentPage layer.
"change:style" — New style declaration.
"change:html" — New html declaration.
"change:subLayers" — Added or removed subLayers.
"change:superLayer" — Added or removed superLayer.

Maximüs Groves

sharing is a little tricky since I'm using a coffeescript compiler on windows, appreciate it though. I'll try these out too

Andrew Nalband

Here's an example to get you started

Maximüs Groves

yea I've got basically that at line 116 here. still working with it

Aleksandr Sood'in

I just played with layer opacity using animation delay, like this. You can try make each color a new state and change it on click.

Read the entire post on Facebook