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

What is Framer? Join the Community
Return to index
Jarne Uytersprot
Posted Feb 16 - Read on Facebook

Hey guys! I'm pretty new to this and very excited to start building Prototypes. I was wondering how you animate the backgroundColor of a layer? Why is it not supported? (just curious)

14 Comments

Joshua Tucker

Hey man! Welcome to the community! You'll have a ton of fun, guaranteed. I am not aware of why backgroundColor is actually not "supported" but animating a color change even with say CSS/WebKit has a huge penalty on performance, hence why it's not as desirable. The best option with Framer is to fade in layers that each have a different color.

Jarne Uytersprot

Thanks man! Exactly what I thought. Last question for tonight: Is there a possibility to group layers? So when I move the group, both layers move along...

Joshua Tucker

Yes sir! You can set a layer's superLayer or subLayers. Great place to explains it well is to check out Framer's Docs. It's available at this link or if you're using Framer Studio, there's a button for it on the top left corner.

Or you could put them into an array and loop through it and move layers.

http://framerjs.com/docs/

Jordan Robert Dobson

I think it's also mostly because it's not a straight numerical value which is why it's not plugged in yet. I've seen mention of this being in the works though.

Jarne Uytersprot

Thanks you for the quick help guys :) let's rock! Good news Jordan, would come in handy for sure.

Jordan Robert Dobson

Yeah... maybe I shouldn't say "in the works" but I've seen mention of it considered. I can't recall where I saw it however.

Jordan Robert Dobson

I did see this in the documentation today though:
Only numeric layer properties can be animated. The full list is x, y, z, width, height, opacity, rotation, rotationX, rotationY, rotationZ, scale scaleX, scaleY, scaleZ, originX, originY, perspective, scrollX, scrollY, borderRadius, borderWidth, shadowX, shadowY, shadowBlur, shadowSpread, blur, brightness, saturate, hueRotate, contrast, invert, grayscale, sepia. You can also animate the dynamic properties minX, midX, maxX, minY, midY and maxY.

Jarne Uytersprot

I guess it's more easy to animate with numeric numbers than with hex values?

Jordan Robert Dobson

No, I think it's all those properties are either transform, opacity or filter properties in CSS which typically means they are hardware accelerated. The only one that doesn't fit that definition is borderRadius.

Read the Animation section in the documentation: http://framerjs.com/docs/ for additional comments.

Cyrus Cheng

u can try this,it's work...
la= new Layer
x:0,y:0,backgroundColor:"#ffffff"

la.on Events.Click,(events) ->
la.properties=(backgroundColor:"#000000")

Jarne Uytersprot

Cyrus Cheng: Thanks, but this doesn't animate the backgroundColor.

Peter Hilgersom

hi Jarne Uytersprot. Read Min-Sang Choi his work on this one for more inspiration: https://dribbble.com/shots/1932782-Color-Transition-with-Framer-js?list=users&offset=0

Jarne Uytersprot

Thanks Peter Hilgersom :)

Peter Hilgersom

Your welcome! Good luck! =)

Read the entire post on Facebook