How can I modify the transition of my custom announcement bar in Dawn?

[LabelSource]

Hi All,

How can I change my announcement bar to transition to the next rather than have them stacked underneath each other. Thanks.

[SagarSukhanandi]

Hi @LabelSource 

Could you please share your store URL and password if any to check?

[LabelSource]

Hi Sagar, I have not yet published this on my site so it wont display, can i send you a link for the customise page to my shopify to see?

https://label-source.co.uk/

[Alan15 · Accepted solution]

@LabelSource 

You can try adding this JavaScript code to the end of the announcement-bar.liquid file in the Sections folder. It might be what you want (It works on a recent version of Dawn theme):

<script>
let announcementIndex = 0;
showAnnouncements();

function showAnnouncements() {
  let i;
  let announcements = document.getElementsByClassName("announcement-bar");
  console.log(announcements);
  for (i = 0; i < announcements.length; i++) {
    announcements[i].style.display = "none";
  }
  announcementIndex++;
  if (announcementIndex > announcements.length) {
    announcementIndex = 1;
  }
  announcements[announcementIndex - 1].style.display = "block";
  setTimeout(showAnnouncements, 4000); // Change announcement every 4 seconds
}
</script>

[LabelSource]

Alan, thank you very much sir, works a dream!