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

Technical Q&A
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