How do I slide messages in and out (QAB)

Do you have 2 or more Quick Announcement Bar messages that you would like to have slide in, pause, and slide out? Follow this guide to set it up in your store.

Please note, to use this feature, you will need to be on the premium plan.

What we're going to do is set up 2 bars with identical backgrounds, so that it looks like the same static background. The easiest way to do this is to first create one bar, then duplicate it. 

Start by creating a bar and choosing a template. This can be edited later.

Place your message in the message field.

Down in the Style Configuration section, set the "Disappear After" amount to the number of seconds you want the message to stay for before sliding out.

Next, down in the Custom Code box, paste in this code:

<style>
#qab_content{
animation-duration: 5s;
animation-name: slide;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;

}

@keyframes slide{
0%{
transform: translateX(calc(50vw + 50%));
}
15%{
transform: translateX(0px);
}
85%{
transform: translateX(0px);
}
100%{
transform: translateX(calc(-50vw - 50%));
}
}
</style>

Like so:

IMPORTANT: You see in the third line of the code you just pasted, where is says animation-duration: 5s;?  That line determines how long the slide in-pause-slide out will take. 5s means 5 seconds. So, you'll want this amount to be the same length you set the bar to disappear after.

"Disappear After" and "animation-duration" need to match.

Click Save at the bottom right.

Now duplicate the bar you just created by clicking Duplicate.

This will create a copy of the bar you just created. Click Edit to edit the copy. 

Now you can change the message to be the second message you want to slide in.

You can choose to change the length of time the bar will be displayed for, but remember to change both the "Disappear After" setting as well as the animation-duration in the custom code.

Save the bar. 

Now when you visit your site, you should have two messages that slide in and out over what appears to be a single background.

You can repeat the duplication to add more bars/messages to slide in and out. When all bars have displayed, the sequence will start over again with the first bar.

A few things to keep in mind:

Ideally, you want all the messages to be roughly the same length. Longer messages might need 2 lines to fully display on some smaller screens. If one message needs one line and another needs 2, this will create a layout shift when the bars change. So, try to keep the message the same length(see below for advanced fix).

Another thing that can affect shift is including a button in one bar and not in another. Buttons take up more space and will cause a slight layout shift. To mitigate this requires some more advanced techniques and would be unique to your situation. You can still, however, make the text clickable without inserting a button.

Advanced note:

The styling code in the custom code box can be placed in the CSS file instead. Just leave out the <style> tags.

If you have bars with messages of different lengths or buttons and the height of the bars is causing a shift, try using this code instead to handle the animation:

@media only screen and (min-width: 801px) {
#qab_bar{
height: 70px !important;
}
#qab_content{
margin: 0;
position: absolute;
width: calc(100vw);
top: 50%;
animation-duration: 3s;
animation-name: slide;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}


@keyframes slide{
0%{
transform: translate(calc(50vw + 100%), -50%);
}
10%{
transform: translate(-50%,-50%);
}
90%{
transform: translate(-50%,-50%);
}
100%{
transform: translate(calc(-50vw - 100%),-50%);
}
}
}

@media only screen and (max-width: 800px) {
#qab_bar{
height: 80px !important;
}
#qab_message{
font-size: 14px !important; 
}
#qab_content{
margin: 0;
position: absolute;
width: calc(100vw);
top: 50%;
animation-duration: 3s;
animation-name: slide;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}


@keyframes slide{
0%{
transform: translate(calc(50vw + 100%), -50%);
}
10%{
transform: translate(-50%,-50%);
}
90%{
transform: translate(-50%,-50%);
}
100%{
transform: translate(calc(-50vw - 100%),-50%);
}
}
}