How to create scrolling announcement bar text in Squarespace

Dec 28

This tutorial was recorded in Squarespace 7.1 but also applies to legacy sites built on version 7. For more information, visit insidethesquare.co/themes

Make your announcement even more eye-catching by creating a simple scrolling text animation! In this Squarespace tutorial, you'll learn how to turn the text in your announcement bar into a scrolling marquee.

Here is the code from this tutorial; be sure to adjust the 15 in 15s if you want it to be slower (30s for example) or faster (5s for example):

.sqs-announcement-bar {
overflow: hidden;
}
.sqs-announcement-bar-text {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: scroll 15s linear infinite;
-webkit-animation: scroll 15s linear infinite;
animation: scroll 15s linear infinite;
}
@-moz-keyframes scroll {
from { -moz-transform: translateX(100%); }
to { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(-100%); }
}
@keyframes scroll {
from {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.sqs-announcement-bar-close {
display:none
}