[MMM-Rainbow] Animated text color transition

[BKeyport]

So, you’re saying the NOAA weather app does rainbow colors for other modules?

… Okay.

[Seann]

@bkeyport Also, this is easily done. I’ll work on this for you when I have some more free time. The only issue with doing it to the clock is; the current clock uses “updateDom” to set the time each second, which from what I have seen basically re creates the elements. Meaning the transitions start from when the element is created so it’s not in time with the other transitions. So it would be easier to create your own clock module which just replaces the innerHTML of each element instead of re creating them. I have been making my own clock which will display down to minutes instead of seconds as i’m sure this would cause less strain on my terrible Pi 3 a+.

[BKeyport]

Actually, I’d be more interested in the mechanics in getting it to work down to the module level more than anything, would be nice to use it for say “Grabbing Attention” in a particular module…

[ganget]

@seann I took a different approach to this, mainly because I only wanted to have it for only one module. I have changed my custom.css and one line in the clock.js, so it grabs a different style.
My code makes a gradient background which I clip to the text. Then to make it move across the text i use webkit-animation. I’m not totally satisfied with the result of the animation yet but i will keep tweaking that.

the animation moves way too fast now and when I make the animation duration longer it doesn’t feature all the colors of the gradient.
the only line i needed to change in the clock.js file

timeWrapper.className = "time clock-time-only-color large light";

Custom.css (lines i added)

.clock-time-only-color {
	background-image: linear-gradient(to right, #ff0000,#ff4000,#ff8000,#ffbf00,#ffff00,#bfff00,#80ff00,#40ff00,#00ff00,#00ff40,#00ff80,#00ffbf,#00ffff,#00bfff,#0080ff,#0040ff,#0000ff,#4000ff,#8000ff,#bf00ff,#ff00ff,#ff00bf,#ff0080,#ff0040,#ff0000);
	-webkit-background-clip:  text;
	-webkit-animation: animate 3s linear infinite;
	background-size: 500%;
	color: transparent;
	
}
@-webkit-keyframes animate{
	0%	{background-position: 0% 500%;}
	50%	{background-position: 100% 0%;}
	100%    {background-position: 0% 100%;}
	}

Do you have any idea on how I can make the animation duration way longer like 10 min and still show all the colors in the gradient?

Thank you for the initial idea and for inspiring me!

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