How to make marquee effect infinite in custom liquid announcement bar?

[Dadelfri3007]

Hi, I am reaching out to the shopify community again cause you guys always has such great solutions! 

I have a custom liquid announcementbar with marquee effect. I have succesfully coded the marquee effect but it won't slide in one infinte line. Furthermore, only the first text passage is shown on cellphone device comparede to desktop version. 

My custom liquid looks like this so far: 

<div class="announcement-bar"
.marquee {
style="background-color: #F6DCDF;">
<marquee> <div
class="announcement-bar">
<div class="announcement-section">
<div class="announcement-icon">
<img src="/files/1/0721/7158/5829/files/box.png?v=1691406225" alt="Left Icon" class="icon-image">
</div>
<div class="announcement-text">
Fragt til pakkeshop fra 39 DKK - Gratis levering på alle ordre over 499 DKK
<span style="min-width:100px;visibility:hidden">hidden</span>
</div>
</div>

<div class="announcement-section">
<div class="announcement-icon">
<img src="/files/1/0721/7158/5829/files/shipped.png?v=1691406256" alt="Middle Icon" class="icon-image">
</div>
<div class="announcement-text">
Hurtig levering - 1-3 hverdage
<span style="min-width:100px;visibility:hidden">hidden</span>
</div>
</div>

<div class="announcement-section">
<div class="announcement-icon">
<img src="/files/retunering-dadelfri.png?v=1709115657" alt="Right Icon" class="icon-image">
</div>
<div class="announcement-text">
14 Dages Fuld Returret
<span style="min-width:100px;visibility:hidden">hidden</span>
</div>
</div>
</div>
</div>
</marquee>

<style>
.announcement-bar {
display: flex;
align-items: center;
background-color: white;
padding: 10px;
background: #F6DCDF;
}

.announcement-section {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}

.icon-image {
width: 24px;
height: 24px;
margin-right: 8px;
margin-left: 8px;
}

.announcement-text {
text-align: center;
}

{% comment %} Mobile-specific CSS and JavaScript {% endcomment %}
@media (max-width: 600px) {
.announcement-section:not(:first-child) {
display: none;
}

.announcement-section.active {
display: flex;
}

.announcement-section {
animation: switchText 3s infinite;
}

@keyframes switchText {
0%, 100% {
display: none;
}
10%, 100% {
display: flex;
}
}
}
</style>

Can anyone help where to pase in the coding to make the marquee effect infinite? Thanks! 

Kind regards 
Kathrine

[Dan-From-Ryviu]

Hi @Dadelfri3007 

I'm Dan from Ryviu: Product Reviews & QA.

You can go to your theme customize > in Header, click Add section > Custom liquid > add code to Liquid code section, drage and drop this section before Header section

[LuffyOnePiece]

@Dadelfri3007 

Instead of using a marquee try adding javascript.

<script>
const para1 = document.getElementsByClassName("announcement-bar")[0];  
animate(para1);
  
function animate(element) { 
    let elementWidth = element.offsetWidth; 
    let parentWidth = element.parentElement.offsetWidth; 
    let flag = 0; 
  
    setInterval(() => { 
        element.style.marginLeft = --flag + "px"; 
  
        if (elementWidth == -flag) { 
            flag = parentWidth; 
        } 
    }, 10); 
</script>