How can I fix the sliding announcement bar code to start on the right and end on the left?

Shopify Discussion
,

Topic summary

A Shopify user is troubleshooting custom CSS code for a sliding announcement bar that should scroll from right to left across the page.

Initial Problem:

  • The text appears and disappears mid-screen rather than starting at the right edge and ending at the left edge
  • Screenshots show the text beginning/ending at incorrect positions

Attempted Solutions:

  1. First suggestion changed transform values from translateX(100%) to translateX(0%) at start and translateX(-100%) at end, but this made text start in the middle
  2. Second attempt reverted to translateX(100%) start position and added text-align: left, which improved behavior but still didn’t achieve the desired effect

Current Status:

  • The helper acknowledged they cannot solve the issue completely
  • The original poster accepted the “almost perfect” solution as good enough
  • Discussion concluded without achieving the exact right-to-left edge behavior originally requested

Note: Some code snippets in the thread appear corrupted or reversed, making full technical analysis difficult.

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

hello, i have this code for a sliding announcement bar without any app, however the text is just starting to appear and disappearing where i have the marks. I wanted it to start on the right at the beginning of the page and end on the left at the end of the page.

ScanMe_2-1707239501058.png

ScanMe_3-1707239541214.png

.announcement-bar {
height: 50px;
overflow: hidden;
position: relative;
}
.announcement-bar p{

position: absolute;
width: 100%;
height: 100%;
margin: 5;
text-align: center;
/* Starting position /
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/ Apply animation to this element /
-moz-animation: example1 25s linear infinite;
-webkit-animation: example1 25s linear infinite;
animation: example1 25s linear infinite;
}
/ Move it (define the animation) /
@-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%); / Firefox bug fix /
-webkit-transform: translateX(100%); / Firefox bug fix /
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); / Firefox bug fix /
-webkit-transform: translateX(-100%); / Firefox bug fix */
transform: translateX(-100%);
}
}

2

Hi, To make it start from the right edge of the page and end at the left edge, you should adjust the initial position to translateX(0%) and the final position to translateX(-100%)
Try this code

.announcement-bar {
height: 50px;
overflow: hidden;
position: relative;
}

.announcement-bar p {
position: absolute;
width: 100%;
height: 100%;
margin: 5;
text-align: center;
/* Starting position /
-moz-transform: translateX(0%);
-webkit-transform: translateX(0%);
transform: translateX(0%);
/ Apply animation to this element */
-moz-animation: example1 25s linear infinite;
-webkit-animation: example1 25s linear infinite;
animation: example1 25s linear infinite;
}

/* Move it (define the animation) /
[email removed] example1 {
0% { -moz-transform: translateX(0%); }
100% { -moz-transform: translateX(-100%); }
}
[email removed] example1 {
0% { -webkit-transform: translateX(0%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(0%); / Firefox bug fix /
-webkit-transform: translateX(0%); / Firefox bug fix /
transform: translateX(0%);
}
100% {
-moz-transform: translateX(-100%); / Firefox bug fix /
-webkit-transform: translateX(-100%); / Firefox bug fix */
transform: translateX(-100%);
}
}

3

thank you for your answer. That made the text start sliding where is the red mark.

ScanMe_0-1707251092730.png

4

Oh sorry, please try this one.

.announcement-bar {
height: 50px;
overflow: hidden;
position: relative;
}

.announcement-bar p {
position: absolute;
width: 100%;
height: 100%;
margin: 5;
text-align: left; /* Align left /
font-size: 18px; / Font size 18 /
/ Starting position /
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
/ Apply animation to this element */
-moz-animation: example1 25s linear infinite;
-webkit-animation: example1 25s linear infinite;
animation: example1 25s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}

5

Thank you for the answer again. It is almost perfect. However, the text still doesn’t start on the right-hand side as I’d like. Do you think it’s possible to do that?

ScanMe_0-1707263438110.png

6

I’m sorry, I can’t figure it out :disappointed_face:

7

no problem, I will take the other solution that is almost perfect