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)
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.
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...
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.
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.
Thanks you for the quick help guys :) let's rock! Good news Jordan, would come in handy for sure.
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.
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.
I guess it's more easy to animate with numeric numbers than with hex values?
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.
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")
Cyrus Cheng: Thanks, but this doesn't animate the backgroundColor.
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
Thanks Peter Hilgersom :)
Your welcome! Good luck! =)