How to create a announcement bar like bellow

[JGBowie]

Hi all wondering how to make the announcement bar have the side scrollers and transition like bellow example https://www.wilsonandfrenchy.com.au/?srsltid=AfmBOoom6uECDNHPIjBtyD7cY9nUHr5jZlfaVF6h2HeJSWrcJzPIchf...

[Dotsquares]

Hi @JGBowie For scrolling announcement bar-

1) Add This HTML 

<div class="announcement-bar-marquee">
<div class="announcement-track">
<span>Free Shipping on Orders Over $100 &nbsp;&nbsp;&nbsp;</span>
<span>New Autumn Collection Now Live &nbsp;&nbsp;&nbsp;</span>
<span>Buy Now, Pay Later with Afterpay &nbsp;&nbsp;&nbsp;</span>
<!-- Repeat messages or loop same ones -->
</div>
</div>

2) Add This CSS in Announcement bar CSS

.announcement-bar-marquee {
overflow: hidden;
background-color: #f4f4f4; /* or your brand color */
white-space: nowrap;
height: 40px;
display: flex;
align-items: center;
position: relative;
}

.announcement-track {
display: inline-block;
padding-left: 100%;
animation: scroll-left 20s linear infinite;
}

.announcement-track span {
display: inline-block;
font-size: 14px;
color: #000;
}

@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}

Let me know if this works.

[JGBowie]

Where do I put the first section?

[namphan]

Hi @JGBowie,

What theme are you using? please send me the theme name, I will check it for you