Hey team. I wrote a module that transitions the background colour of a layer between two (rgba) colours. The module allows you to call colourTransition(), which accepts four arguments.
module.colourTransition(layer, colour , duration, fps)
module.colourTransition(background, 'rgba(40, 193, 204, 1)', 1, 30)
Frames per second is optional, it will default to 30.
Check out the demo below.
Nick, I have a similar solution to animating the background color to a layer. It can stop midway if you interrupt it by calling the completeInterval... Not sure if it is something you can usehttps://github.com/dumsdei/colorTransition-for-Framer
Oh nice. I have two things on my todo list. Set the true colour value after fade ends and add the ability to stop mid-fade.
My solution is pretty crude compared to yours hahaha but I was able to set the true colour after the transition and I think just before clearing the interval. Great job on your solution! Can't wait to see when you "finish" it
Thanks. It was a fun problem to work on. I have an issue where the interval runs one more time after clearing, which makes it trickier to set the true colour immediately.
Quick Q. How do we install it. The doc just says to put this in the document.
module = require "colourTransition"
Include the file "colourTransition.coffee" in the modules folder in your project.
Get the file by downloading the example project and grabbing it from there, or from the git hub repo.
http://framerjs.com/docs/#modules has a good explanation.
I'll update the doc : )
Hey Nick- thanks for the reply. I got it compiling through your insitructions, but it's not working. Any ideas why? All the code seems to be in order.
When I created the module I made the terrible assumption that rgba would be in a certain format. "rgba(x, x, x, x), with spaces after the comma". Also, the original background colour needs to be a specified in rgba, which isn't made clear in the doc. I'll fix both up tonight.
Here is your project with these changes.http://share.framerjs.com/3k7fn38c18yw/