[MMM-NewsFeedTicker] scroll from left to right only?

Cr4z33

Can someone please tell me what to edit to have the news scrolling from left to right only (and not also from right to left)?

@-webkit-keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

@-moz-keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

@-ms-keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

@-o-keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

@keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

.MMM-NewsFeedTicker {
  width: 100%;
  height: 50px;
  line-height: 100%;
  overflow: hidden;
  background: rgb(104, 9, 9); /* background color - change to 'none' if don't want */
}

.MMM-NewsFeedTicker .tickerbody {
  margin: 0 auto;
  width: 100%;
  padding-top: 5px;
  position: relative;
  white-space: nowrap;
  overflow: visible;
  -webkit-animation: marquee linear infinite;
  -moz-animation: marquee linear infinite;
  -ms-animation: marquee linear infinite;
  -o-animation: marquee linear infinite;
  animation: marquee linear infinite;
}

.MMM-NewsFeedTicker .headline {
  font-size: 40px;
  font-weight: bold;
}

.MMM-NewsFeedTicker .image {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  bottom: 0;
  left: 0;
  height: 50px;
  z-index: 100;
  background: rgb(255, 255, 255); /* white background for image */
}

sdetweil

@Cr4z33 see
https://www.quackit.com/css/codes/marquees/

Cr4z33

@sdetweil thanks I already saw that page, but it talks about translateX and there’s no evidence of it in that module’s CSS.

sdetweil

@Cr4z33 ok, so. try it. maybe the default is right to left if not specified.

worst case u have the existing file still

Cr4z33

@sdetweil nope I didn’t get what I wanted.

@Cr4z33 : see this

I think it can help

sdetweil

i did this, commented out the old in the MMM-NewsFeedTicker.css
and replaced with this

/*@-webkit-keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

@-moz-keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

@-ms-keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

@-o-keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

@keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
} */

/* new stuff here */
@keyframes marquee {
  
   0% {
    transform: translate(-100%, 0);
  }

  50% {
    transform: translate(-50%, 0);
  }

  100% {
    transform: translate(0, 0);
  } 
}

Cr4z33

@sdetweil thank you gonna try asap!

Cr4z33

OK this is getting weird now because I applied the above code and it STILL keeps scrolling back and forth!

sdetweil

@Cr4z33 did u delete the old code?

/*@-webkit-keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

@-moz-keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

@-ms-keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

@-o-keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

@keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
} */

notice the /* and */