Required help in auto scrolling functionality like announcment banner

Shopify Discussion
1

Hi Developer Community,

I required help for auto scrolling functionality in my div. Currently I had tested several functions but non of them had worked (might be due to coding error). Can any one please help me in this regards?

usmekhan91_0-1702291960705.png
usmekhan91_0-1702291960705.png1920Ă—880 376 KB

Code that i had used.

#scroll-container {
  border: 3px solid black;
  border-radius: 5px;
  overflow: hidden;
}

#scroll-text {
  text-align: right;

  /* animation properties */
  -moz-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(-100%); }
  to { -moz-transform: translateX(100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(-100%); }
  to { -webkit-transform: translateX(100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  to {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

Preview link: https://qnkqyb8fha6egqaw-61554688170.shopifypreview.com

Theme: Kalles v4.2.2

2

Hi @usmekhan91 ,

Try adding the following code to the base.css file:

@keyframes scrollAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.t4s-container {

animation: scrollAnimation 10s linear infinite;

}

Hope it works @usmekhan91

3

It is disturbing whole page UI/UX by scrolling entire page

4

I have checked that your site has many HTML elements that use the class “t4s-container”, so the above code affects all of those elements.
=> Solution: add 1 id=“id” to this section https://www.awesomescreenshot.com/image/44819848?key=9c78b2e05ff15780accf96241732231b and replace “.t4s-container” in the code with the #id just added

3 Likes