How to start CSS mock marquee with full text from left?

Store Design
, ,

Topic summary

A user is trying to create a CSS-based marquee effect but faces two main issues:

Current Problems:

  • The marquee starts with a blank/empty bar on page load instead of being pre-filled with repeating text
  • The animation direction needs to be reversed (start from left instead of right)
  • When attempting to style the element with CSS, the text display breaks (as shown in an attached image)

Solutions Attempted:

  • One response suggested modifying the animation keyframes, but this didn’t achieve continuous scrolling—the animation resets visibly instead of looping seamlessly
  • PageFly-Richard recommended using a <marquee> element within Custom Liquid as an alternative approach

Outstanding Questions:

  • How to control the direction of the PageFly solution
  • How to apply custom CSS styling without breaking the text layout

The discussion remains open with no complete resolution yet. The core challenge is achieving a seamless, continuous scroll effect that appears fully populated from the moment the page loads.

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

I have this simple code for a fake/mock Marquee. I want it to start with the bar full of repeating infinite text, not start to come into blank bar(on page load bar is full of repeating infinite text). How can this be done? Also, I would like it to start from the left instead of right. Thanks

Code:

<style>
.marquee {
height: 50px;
overflow: hidden;
position: relative;
background: yellow;
color: orange;
border: 1px solid orange;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 5s linear infinite;
-webkit-animation: scroll-left 5s linear infinite;
animation: scroll-left 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}
</style>

<div class="marquee">
<p>Scrolling text... </p>
</div>
2

@xnyjyh
3

Not quite. I starts good, but its not continuous. need it continuous. once it starts it needs to never reset on page load. your likes starts then resets.

4

Hi @xnyjyh

This is Richard from PageFly - Shopify Page Builder App

You can use this code as a marquee instead. You can paste it in the Custom Liquid


@CROWNJEWELED_   @CROWNJEWELED_   @CROWNJEWELED_   @CROWNJEWELED_   @CROWNJEWELED_   @CROWNJEWELED_   @CROWNJEWELED_  @CROWNJEWELED_   @CROWNJEWELED_   @CROWNJEWELED_

Hope this can help you solve the issue

Best regards,

Richard | PageFly

5

when i style it with css. the text goes wonky as seen in attached image. Also, how can I control direct? Thanks :slightly_smiling_face:

style1111.png
style1111.png1872×635 28.6 KB