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

What is Framer? Join the Community
Return to index
Nick Mangos
Posted Aug 20 - Read on Facebook

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)

For example...

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.

http://share.framerjs.com/m1zbxn0d61nb/
https://github.com/nickmangos/framer-colour-transition

8 Comments

Randi Dumaguet

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 use
https://github.com/dumsdei/colorTransition-for-Framer

Nick Mangos

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.

Randi Dumaguet

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

Nick Mangos

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.

Kevin Cannon

Nice one.

Quick Q. How do we install it. The doc just says to put this in the document.

module = require "colourTransition"

Nick Mangos

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 : )

Kevin Cannon

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.

http://share.framerjs.com/euxmkt12s0ol/

Nick Mangos

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/

Read the entire post on Facebook