Annoucer slide from right to left animation

Hi David,

Announcer supports slider and has specific logic for top to bottom only. It does not support left to right. It is because screens are usually wider and announcement messages can be in multiple lines. The animation from left to right was weird and not very appealling.

Thanks,
Aakash

Hi David,

Please try the following. I have modified the code you have shared as per your requirement.

1) In announcer settings, switch to “text” tab.
2) Paste the code below.

<div class="sliderWrap">
<div class="slider">
    <div class='slide first-slide'>This is slide 1</div>
    <div class='slide second-slide'>This is slide 2 for testing</div>
    <div class='slide third-slide'>This is slide 3 for tests</div>
</div>
</div>

3) Go to your theme settings page and paste below CSS

.sliderWrap {
  --width: 900px;
  width: var(--width);
  overflow: hidden;
}

.slider {
  --animation-duration: 12s;
  width: calc(var(--width)*3);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
}

.slide {
  width: var(--width);
}

.slider .first-slide {
  --visible: 0;
  --hidden: 100%;
  animation: var(--animation-duration) slide-right-animation ease-in-out infinite;
}

.slider .second-slide {
  --visible: -100%;
  --hidden: 100%;
  animation: var(--animation-duration) slide-right-animation 4s ease-in-out infinite;
}

.slider .third-slide {
  --visible: -200%;
  --hidden: 200%;
  animation: var(--animation-duration) slide-right-animation 8s ease-in-out infinite;
}

/* The slide right effect */
@keyframes slide-right-animation {
  0% {
    transform: translateX(var(--hidden));
    opacity: 0;
  }
  6.66%, 26.64% {
    transform: translateX(var(--visible));
    opacity: 1;
  }
  33.30%, 100% {
    transform: translateX(var(--hidden));
    opacity: 0;
  }
}

Change the slide text in #2 as per your needs

Change the slider width in #3 from 900px as required.

Note: The code you shared supports only 3 slides. For more slides extra CSS must be added. You can follow the code and duplicate the .slider .third-slide CSS for more.

Hope this helps.

Thanks,
Aakash

Hi David,

No worries. I work on a different timezone here. I’ll check the details you have shared and get back to you asap.

Thanks,
Aakash