Why isn't the FadeOut animation working during transitions?

Store Design
, , ,
1

Hi, can someone explain to me what the error is in my script?

I have the transitions between the 2 announcements, but I can’t get the FadeOut animation during the transitions.

Thanks in advance

Website: gaellia.co.uk

File Location: snippets/new-announcement-bar.liquid

File:

//////////////////////////////////////////////////////

.new-announcement-bar { display: flex; align-items: center; justify-content: center; background-color: black; color: white; height: 30px; } .new-announcement-bar .announcement { display: none; } .new-announcement-bar .announcement:first-of-type { display: flex; }
Free UK Delivery over £60
Free Stockings over £120*

//////////////////////////////////////////////////////

2

Setting display: none and display: flex are instantaneous. Try it this way:


  
Free UK Delivery over £60

This way you can also add as many messages as you want, just make sure the first message is the one that’s initially set in the HTML. Let’s say you wanted to add a third message. You add a comma and quotes to the array and insert your third message into the quotes:

let messages = ["Free UK Delivery over £60", "Free Stockings over £120*", "Another message you'd like to set"]

And it would cycle through there. Also make sure that your timeout is set to the duration of your transition with opacity. Above the opacity transition is set to .5 milliseconds in the css. In the script the timeout is set to 500, which is 5 milliseconds. You can play around with it here, I left all the code in the HTML portion for your convenience:
https://codepen.io/ninthony/pen/QWBjaWv

3

Thank you very much for this help, it works like a charm and it helps me a lot to learn.
I wish you a merry Christmas!

4

@Ninthony Thank you for all your help and this code works well but is there a way to add this code as a section so it can be managed from the customize theme editor ? currently it appears the texts need to be hardcoded and separated by commas.

5

Well liquid computes before JS, so you could just create text settings in your schema and add them into the array instead of the hard coded stuff so in the schema somewhere add settings for it like:

{
"type": "text",
"label": "Message 1",
"id": "message1"
},
{
"type": "text",
"label": "Message 2",
"id": "message2"
},
{
"type": "text",
"label": "Message 3",
"id": "message3"
},

Then in the JS set them with liquid instead of the hardcoded messages.

let messages = ["{{ section.settings.message1 }}", "{{ section.settings.message2 }}, {{ section.settings.message3 }}"]

Or if you were using blocks or something you could do like:

let messages = [{% for block in section.blocks %}"{{ block.settings.message }}"{% unless forloop.last %},{% endunless %}{% endfor %}]