Required help in auto scrolling functionality like announcment banner

Shopify Discussion

Topic summary

A developer is seeking help implementing an auto-scrolling announcement banner functionality on their Shopify site. They’ve attempted CSS animations but encountered issues.

Initial Problem:

  • Provided CSS code with animation keyframes for horizontal scrolling text
  • Code includes transform properties and animation settings for cross-browser compatibility
  • Attached screenshot showing the desired banner layout

Proposed Solution:

  • Add keyframes animation code to the base.css file
  • Apply scrollAnimation with 10s infinite linear timing to the container

Current Issue:

  • The suggested CSS affects the entire page’s UX/UI by scrolling all content
  • Root cause identified: Multiple HTML elements share the “t4s-container” class

Recommended Fix:

  • Add a unique ID to the specific banner section
  • Replace “.t4s-container” with the unique “#id” selector in the CSS code
  • This targets only the announcement banner instead of all elements with that class

The discussion remains ongoing as the developer works to implement the targeted solution.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
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