Enhancement: Marquee - Scrolling List

[mazim-co]

Hello! First, thanks for the recent feature to fade out items. It works fantastic. 👍

I'm wondering if there is the option to scroll the items of a list with an marquee effect as soon as it reaches a number of items. I'm using this module for my shopping list and it is sometimes growing to more than 10 items. I would love if, as soon it is more than 10 or 15, it will scroll from the bottom to the top. Like in this example:

https://www.jqueryscript.net/demo/auto-scrolling-data-list/

[maximilianbiebl]

/ define the animation / @-webkit-keyframes divTable { 0% { -webkit-transform: translate(0, 0); } 100% { -webkit-transform: translate(0, -100%); } } @keyframes divTable { 0% { -webkit-transform: translate(0, 0); } 100% { -webkit-transform: translate(0, -100%); } }

.divTable {

white-space: nowrap;
overflow: hidden;
height:150px;

box-sizing: border-box;

}

.divTable div{ display: table; width: 100%;

text-indent: 0;
animation: divTable 20s linear infinite; /* here you select the animation */
  -webkit-animation: divTable 20s linear infinite; /* here you select the animation */

}

I put this in the "MMM-Todoist.css"; You must override the existing divTable class and add the rest of the code.

It's not exactly what you were looking for, it scrolls all the time, even if it hasn't reached a number of items. You have to play with the "height" and also with the seconds (20s, in my code) Hope this is a help for you.

[mazim-co]

Hi @maximilianbiebl - thank you very much for the tip! 👍 It works perfect.

I played it bit around and find my perfect animation. Instead of linear I'm using alternate. So it is going up and down smoothly.

@-webkit-keyframes divTable {
      0% { -webkit-transform: translateY(5%); }
    100% { -webkit-transform: translateY(-70%); }
}

divTable {
       white-space: nowrap;
       overflow: hidden;
       height:150px;
       box-sizing: border-box;
}

.divTable div {
       -webkit-animation: divTable 25s alternate infinite; 
}

Again, thank you very much!