The animation works perfectly, however, after a certain x period of time it returns to the initial state of "0%", however what I want is for it to be infinite and continue.
Run the code snippet and watch it for a certain time, it can be seen that the effect works perfectly which is taking the items to the left infinitely and coming back to the right, however, at a certain moment, a "flicker" will happen and it will restart the animation and also the items.
div.app-marquee-container {
position: relative;
cursor: default;
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--outline);
background-color: var(--neutral-base);
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
div.app-marquee-container:hover {
cursor: pointer;
}
div.app-marquee-container:hover div.marquee-config-action-container {
display: block;
}
div.marquee-container {
position: relative;
width: 100%;
}
div.marquee-subcontainer {
position: absolute;
display: flex;
align-items: center;
gap: 16px;
animation: marquee 50s linear infinite forwards;
}
div.marquee-config-action-container {
right: 0;
position: absolute;
display: none;
width: 40px;
box-shadow: 0px 2px 12px 0px #3944561F;
background-color: var(--neutral-base);
}
ul {
height: 40px;
width: 80%;
list-style: none;
display: flex;
align-items: center;
gap: 16px;
}
ul li {
width: 200px;
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
}
ul li span {
font-size: 12px;
font-weight: 400;
}
@keyframes marquee {
from { -webkit-transform: translateX(0vw) }
to { -webkit-transform: translateX(-100vw) }
} <div class="app-marquee-container">
<div class="marquee-container">
<div class="marquee-subcontainer">
<div class="marquee-subitem-container">
<ul>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
</ul>
</div>
<div class="marquee-subitem-container">
<ul>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
<li>
<span>MSFT34</span>
<span>1200.24</span>
<span>100%</span>
</li>
</ul>
</div>
</div>
</div>
<div class="marquee-config-action-container">
<button>FAKE</button>
</div>
</div>The marquee effect you're trying to achieve works by translating the items to the left (using the translateX(-100vw)), and since it's set to infinite, it restarts from the beginning once it reaches the end. The "flicker" or reset you see is the animation starting over from the beginning.
To achieve a seamless infinite scroll effect without this "flicker", the content itself must be duplicated so that by the time the original content has finished scrolling out of view, the duplicate content starts to appear.
Here's a solution:
Duplicate the content, which it looks like you have already.
Adjust the keyframes such that the content scrolls by 50% (halfway) and not the full 100%. Because, by the time you reach halfway, the duplicated content will begin and the cycle continues.
Update the keyframe like this:
@keyframes marquee {
0% { transform: translateX(0%); }
100% { transform: translateX(-50%); }
}
The .marquee-subcontainer will hold twice the original content. When the animation completes one cycle (50% scroll), the second copy will be at the starting position, hence creating an illusion of an infinite scroll. Since you already have duplicated the content in your HTML, the only required change is in the keyframes as mentioned above.
I should also mention this method works best when the content is evenly divisible into the viewport, so you might need to adjust the content length or viewport width to achieve a perfectly seamless transition. Keep that in mind.
If you plan to change the data to something dynamic rather than typed out explicitly like that, this will be much easier.