[MMM-Rainbow] Animated text color transition

[Seann]

@ganget I’m not really that good with css animations but from what I can see,

-webkit-animation: animate 3s linear infinite;

should have something to do with it right? maybe if you make that 10 minutes instead.

[ganget]

@seann yeah i tried increasing the number to like 20 sec up to 6000. But the problem i get then is that it shows me only the first 2 colors in the gradient. Dunno but will try and work on it tomorrow

[justjim1220]

@ganget

change your background size to 20% instead of 500%

Only other issue I find is that it refreshes itself every second, would be better if it were more fluid-like that the refresh isn’t so notice-able.

[justjim1220]

@ganget & @BKeyport

So, I modified my MMM-DigClock with your rainbow css with some other tweaks…

.MMM-DigClock .time {
  font-size: 300px;
  text-align: center;
  line-height: 85%;
  letter-spacing: 5px;
  font-weight: 900;
  font-family: DS-Digital;
  background: -webkit-linear-gradient(left, red,orange,yellow,green,blue,purple);
  background: -moz-linear-gradient(left, red,orange,yellow,green,blue,purple);
  background: -o-linear-gradient(left, red,orange,yellow,green,blue,purple);
  background: linear-gradient(to left, red,orange,yellow,green,blue,purple);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-animation: animate 10s linear infinite;
  -moz-animation: animate 10s linear infinite;
  -o-animation: animate 10s linear infinite;
  animation: animate 10s linear infinite;
  background-size: 25%;
  -webkit-text-fill-color: transparent;
}

And it seems to work fairly decent.
But I had to 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);

[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!

[Mykle1]

@seann

I don’t know if it matters to you but your Github readme for MMM-iClock starts like this:

MMM-Showtimes - Local Cinema Showtimes for MagicMirror²

[cowboysdude]

@ganget said in [MMM-Rainbow] Animated text color transition:

I really like the idea of this module, I’m searching for the possibility to make only my clock have this effect and maybe a gradient kind of color shift. Can you help me with this idea?

Gradients can be a done something like this… of course you’ll be using different selectors but this is the idea:

  background-image: linear-gradient(to right, #E0AC00, #E0D100, #CAE000, #A5E000, #7FE000, 
  #5AE000);
     background-size: 24em 0.25em;

I used that gradient in the bars on the right hand side of the picture…from yellow to green.

[cowboysdude]

@mykle1 said in [MMM-Rainbow] Animated text color transition:

@seann

I don’t know if it matters to you but your Github readme for MMM-iClock starts like this:

MMM-Showtimes - Local Cinema Showtimes for MagicMirror²

Hahhhaha come on @Seann :)

[Seann]

@mykle1 LMFAO, as you can see I literally use the same thing as a template for my modules. Thanks for the heads up, i’ll change it now.

[blake_northrup]

Very cool mod man! Works well with all of my Hue lighting. Thanks!

[WasupDude]

yeah, that’s what I needed :)