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!
Good work sir!
To give you clearer idea, I made another shot. enjoy. https://dribbble.com/shots/1933011-Color-Picker-with-Framer-js?list=following&offset=0
Pfew, nice! :)
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.
Min-Sang really nice implementation, keep it coming :)
Koen, I can't wait for it :)
Koen Bok can't wait for the mix!
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?
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!
Just found this, awesome hack! Thanks!