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

What is Framer? Join the Community
Return to index
Marc Krenn
Posted Dec 02 - Read on Facebook

Before anyone asks, here's a simple example how to animate colors:
http://share.framerjs.com/zflujvluitok/

Requires latest beta.

7 Comments

Marc Krenn

Seems like "Utils.mapRangeColor" didn't make the cut. Will it make a return at some point?

Koen Bok

I'd rather make modulate work with tweenable ranges, otherwise we have to make a mapRange* for every tweenable object. Makes sense?

Marc Krenn

Makes sense, yes. First thing I've tried after seeing mapRangeColor was ditched. ;)

Shouldn't be too hard to implement after Jonas and co. did the heavy lifting of converting all the different ways of declaring colors to predictable RGBA values - which, in return, reduces color modulation to basically a combination of 4 simultaneous regular modulations.

Marc Krenn

Koen & Jonas: color modulation works great, thanks!

Update dialog popped up right when my own modified Utils.modulate was done - as I said, that was pretty straight-forward, even I could make it work :P

Jonas' code is obviously way better than mine though. ;)
Anyway, thanks!

Marc Krenn

Jonas: Seems like Utils.modulate(color) / Color.mix doesn't allow to overshoot (limit = false) at the moment, right? Or am I missing something?

http://share.framerjs.com/dn1htcsu5mav/

Dennis Kerzig

Hey looks cool! These are rgb-transitions, aren't they? Have read multiple times the HSL-ones look much more natural: http://rileyjshaw.com/blog/hue-angle-transitions/ and http://rileyjshaw.com/sweep/

Marc Krenn

That's a super interesting article, Dennis!

Yes, currently it's a linear RGB transition.

Read the entire post on Facebook