• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

[MMM-Rainbow] Animated text color transition

Scheduled Pinned Locked Moved Entertainment
34 Posts 8 Posters 15.0k Views 8 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • G Offline
    ganget @justjim1220
    last edited by ganget Jan 25, 2019, 1:44 PM Jan 25, 2019, 1:38 PM

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

    G 1 Reply Last reply Jan 25, 2019, 2:09 PM Reply Quote 0
    • G Offline
      ganget @ganget
      last edited by Jan 25, 2019, 2:09 PM

      @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
      0_1548425053414_MagicMirror screen 2.png
      Thanks for your help!

      J 1 Reply Last reply Jan 25, 2019, 9:47 PM Reply Quote 0
      • S Offline
        Seann Module Developer @justjim1220
        last edited by Jan 25, 2019, 4:33 PM

        @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

        J 1 Reply Last reply Jan 25, 2019, 8:51 PM Reply Quote 0
        • J Offline
          justjim1220 Module Developer @Seann
          last edited by Jan 25, 2019, 8:51 PM

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

          "Life's Too Short To Dance With Ugly People"
          Jim Hallock - 1995

          S 1 Reply Last reply Jan 26, 2019, 1:25 AM Reply Quote 0
          • J Offline
            justjim1220 Module Developer @ganget
            last edited by Jan 25, 2019, 9:47 PM

            @ganget Does it show every color?

            "Life's Too Short To Dance With Ugly People"
            Jim Hallock - 1995

            G 1 Reply Last reply Jan 26, 2019, 11:37 AM Reply Quote 0
            • S Offline
              Seann Module Developer @justjim1220
              last edited by Jan 26, 2019, 1:25 AM

              @justjim1220 Do you mean for the clock?

              J 1 Reply Last reply Jan 27, 2019, 1:41 AM Reply Quote 0
              • G Offline
                ganget @justjim1220
                last edited by Jan 26, 2019, 11:37 AM

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

                S 1 Reply Last reply Jan 26, 2019, 1:29 PM Reply Quote 0
                • S Offline
                  Seann Module Developer @ganget
                  last edited by Jan 26, 2019, 1:29 PM

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

                  M 1 Reply Last reply Jan 27, 2019, 1:46 AM Reply Quote 1
                  • J Offline
                    justjim1220 Module Developer @Seann
                    last edited by Jan 27, 2019, 1:41 AM

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

                    "Life's Too Short To Dance With Ugly People"
                    Jim Hallock - 1995

                    1 Reply Last reply Reply Quote 0
                    • M Offline
                      Mykle1 Project Sponsor Module Developer @Seann
                      last edited by Jan 27, 2019, 1:46 AM

                      @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²

                      Create a working config
                      How to add modules

                      C S 2 Replies Last reply Jan 27, 2019, 3:47 AM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 3 / 4
                      3 / 4
                      • First post
                        24/34
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy