[MMM-Rainbow] Animated text color transition

[justjim1220]

@seann
you can change the update interval within the clock code to update every minute instead of every second, by placing the following within the start: function() …

// Schedule update interval.
    var self = this;
    setInterval(function() {
	self.updateDom();
    }, 60000);

[ganget]

@justjim1220 Good tip man! I will change the update interval and look at the difference.

[ganget]

@justjim1220 I changed the update interval to 60 sec and that makes it work allot better. I kept the background size at 500% so the color gradient won’t repeat.

.clock-time-only-color {
	background-image: linear-gradient(to left, red,orange,yellow,green,blue,purple);
	-webkit-background-clip:  text;
	-webkit-animation: animate 60s linear infinite;
	background-size: 500%;
	color: transparent;
	
}
@-webkit-keyframes animate{
	0%	{background-position: 0% 500%;}
	100%	{background-position: 500% 0%;}

The result

Thanks for your help!

[Seann]

@justjim1220 Say if you start your mirror at 30 seconds past the minute, the clock on the mirror wont update until 30 seconds past the next minute, that’s why I created my own clock

[justjim1220]

@seann was you able to get past the every second update?

[justjim1220]

@ganget Does it show every color?

[Seann]

@justjim1220 Do you mean for the clock?

[ganget]

@justjim1220. Yeah it shows every color atm before the minute updates and the loop starts again.

[Seann]

@ganget Have a look at the js Here
This is how I made my clock update every minute, on the minute. Could be done better i’m sure but this works.

[justjim1220]

@seann Yes, and I really like how you coded your iClock to work that way!