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

What is Framer? Join the Community
Return to index
Min-Sang Choi
Posted Jun 17 - Read on Facebook

Framer doesn't support transition for Backgroundcolor officially. Obviously there're lots of alternatives like chroma.js.

but If you don't want to add another js library or couldn't figure out how, here's another solution. :-)

Hope this helps!

10 Comments

Joshua Tucker

Good work sir!

Min-Sang Choi
Peter Hilgersom

Pfew, nice! :)

Koen Bok

Thanks for the great example. The two important things to know about color animation and Framer are:

- It will come. Ideally with a color object that you can use to calculate with colors (lighten, darken, mix, etc).
- The way above (two layers and opacity) will always be the fastest because it's completely hardware accelerated. Actual color animations will involve the cpu and a lot of repaints.

Fran Pérez

Min-Sang really nice implementation, keep it coming :)

Koen, I can't wait for it :)

Min-Sang Choi

Koen Bok can't wait for the mix!

João Dias

Congratulations!:)

Nathan Romero

Min-Sang Choi This is a really slick work around. I'm a little curious about the "change" event listener you used. Is this the same listener that listens to change in form values?

Rhys Merritt

Min-Sang Choi Awesome stuff mate! I have been wanting to learn to create a transition similar to this, where the background masks out from a tap point (lollipop's tap feedback style).. Stoked to see this :) I am a little scared by how much code is needed for that single transition though!

Eli Nathan Showalter

Just found this, awesome hack! Thanks!

Read the entire post on Facebook