Animate the Announcement Bar

What does this code do?

These code snippets will allow you to animate the announcement bar on your Squarespace Website.

Choose Your Animation

You first need to determine which animation you would like your text to have. My favourite resource for this is Justin Aguilar’s CSS Animation Cheat Sheet. Feel free to also use another animation you have found from other coders.

Whichever animation you choose, you can follow the following steps to apply it to your Squarespace Website.

Code Snippets

CSS

Add the following code to Design > Custom CSS. This will hide the text until the animation runs.

.sqs-announcement-bar-dropzone {
  visibility: hidden;
}

If using Justin Aguilar’s CSS Animation Cheat Sheet click on Download. Scroll until you find the animation you would like to use. Copy it from the name of the animation to the last bracket and paste it into Design > Custom CSS. For example, if you are using the animation .slideRight you would paste the following code into Design > Custom CSS.

.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight; 

    animation-duration: 2s; 
    -webkit-animation-duration: 2s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }           
    100% {
        transform: translateX(0%);
    }   
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }
}

Javascript

Copy and paste the following code into Settings > Advanced > Code Injection > Header

Note: If you already have this line of code in the Header, skip this step.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Copy and paste the following code into Settings > Advanced > Code Injection > Footer. This code will make sure the animation doesn’t trigger until it is scrolled to.

<script>
$(document).ready(function() {
  $('.sqs-announcement-bar-dropzone').each(function(){
    var imagePos = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow+400) {
      $(this).addClass("NAMEOFANIMATION");
    }
  });
});
</script>

Then change NAMEOFANIMATION to the name of the class you used above. For example, if I was using .slideRight, then I would use the following code. Notice that I do not use a “ . ” in front of the class name.

<script>
$(document).ready(function() {
  $('.sqs-announcement-bar-dropzone').each(function(){
    var imagePos = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow+400) {
      $(this).addClass("slideRight");
    }
  });
});
</script>

How To Use It

1. Copy and paste the code snippets as indicated above.

2. Change NAMEOFANIMATION to an appropriate name. Make sure you spell it the same every time you use it and do not add a “ . “ before the class name.