How to make announcement bar text scroll infinitely with no spaces?

Technical Q&A

Topic summary

A user is implementing an infinitely scrolling announcement bar for their Shopify store but wants to eliminate gaps between text repetitions so content displays continuously without blank spaces.

Initial Problem:

  • The marquee animation creates visible gaps when the text loops
  • User wants seamless, continuous scrolling text for a Christmas discount announcement

Solution Provided:

  • Another user recommended using the free Annify announcement bar app from Shopify
  • For customization, CSS code was shared to adjust spacing and gaps

Additional Requests:

  • User also wants to modify the font used in the announcement bar
  • Seeking to access the code controlling spacing between phrase repetitions
  • An image was shared showing the specific gaps that need elimination

Custom CSS Fix:
Code snippet provided targets .running_line_title elements with padding-right: 0px !important and gap: 12px !important to reduce spacing.

The discussion remains ongoing as the user plans to implement changes before publishing their store.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

So as someone very kindly fixed my code, im now trying to put back my infinite looping text back in the announcment bar, so it has no black spaces, in the sense that text is always constantly showing instead of appearing and disappearing. This is my code:

:christmas_tree: DESCUENTO DE NAVIDAD POR TIEMPO LIMITADO :christmas_tree: DESCUENTO DE NAVIDAD POR TIEMPO LIMITADO :christmas_tree:

.marqueeText { overflow: hidden; /* Ensures content doesn't overflow */ position: relative; width: 100%; /* Allow the marquee to adapt to different screen sizes */ height: 44px; /* Adjust as needed */ } .marqueeText span { font-family: "Avenir Next", sans-serif; font-weight: 300; font-style: bold; font-size: 2em; /* Adjust size to make it responsive */ color: #BE1666; position: absolute; white-space: nowrap; /* Prevent line breaks */ will-change: transform; /* Optimize for performance */ animation: marqueeText 10s linear infinite; /* Adjust speed as needed */ marqueeText: 100%; } @keyframes marqueeText { 0% { transform: translateX(100%); /* Start from the right */ } 100% { transform: translateX(-100%); /* Move completely off the left */ } }
2

Hi @styllair, you can try to use this free announcement bar app to do that. Annify announcement bar

3

Thanks so much man youre truly a life saver, how can i support you? Also i was trying to minimize the space everytime it makes the announcment and there is slightly a little space everytime it finishes the text, how can i enter the code and change this value? cant seem to find the script regarding it

4

Which space? Could you show me?

You can support me by liking, accepting my answer as a solution, or buying me coffee use this link https://buymeacoffee.com/dandong910

5

Of course man! ill be sure to do both as soon as we publish this tomorrow ! We appreciate your help massively

styllair_0-1734059840089.png

these are the spaces I mean, in between every phrase, just trying to access the code to eliminate this space and also change the font in which the writing is written

6

You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings and check again

.running_line_title {
gap: 12px !important;
}
.running_line_title,
.running_line_title span {
padding-right: 0px !important;
}
1 Like