Two creative ways to animate a Squarespace announcement bar
Static announcement bars can easily blend into your website's design, causing visitors to overlook important messages. Adding subtle animation draws attention without being disruptive, making your announcements more effective at conveying time-sensitive information, special offers, or important updates.
In this tutorial, you’ll learn how to create two different animations for your announcement bar.
Rotating Text Animation This elegant solution alternates between two different messages, perfect for sharing multiple announcements without taking up extra space. You can customize:
The height of your announcement bar
Two distinct messages (including emojis!)
The rotation speed for each message
Scrolling Text Animation If you prefer a classic ticker-tape style, this animation smoothly scrolls your message across the screen. You can adjust:
The scrolling speed
The amount of text displayed
The overall animation timing
Before you check out the tutorial below, here are some important tips:
Always Add a Click-Through URL: This is crucial for both animations. Since the text will be moving, make the entire bar clickable rather than trying to link individual words.
Test Your Timing: Start with longer animation durations (25-30 seconds for scrolling, 10 seconds for rotation) and adjust based on your text length and preferences.
Keep It Readable: While animations are engaging, ensure your text remains visible long enough for visitors to read your full message.
Choose rotating text if you have two distinct messages of similar length that you want to alternate between.
Opt for scrolling text if you have a longer announcement or want a more dynamic feeling on your site.
Ready to implement these animations on your site? Check out the step-by-step tutorial video for the complete walkthrough!
Two Lines of Rotating Text
This code will help you add a second line of text that will rotate in your announcement bar. You’ll want to change two parts: the height and the content which is what will display for the second line of text.
You can also adjust the speed. This code is written to have the animation take 10 seconds, so each line will be displayed for 5 seconds. To change that, make sure you adjust the 10s in both places at the end of the code.
/* InsideTheSquare: rotating announcement bar */
.sqs-announcement-bar-text-inner {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
height: 1.5em; /* Adjust based on text size */
}
.sqs-announcement-bar-text-inner::after {
content: "🔥 Hurry! Free Shipping for the Next Hour!"; /* Change this here */
position: absolute;
top: 100%;
left: 0;
width: 100%;
text-align: center;
color: white;
padding: 0 10px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0; /* Start fully hidden */
}
/* Define animation */
@keyframes rotateAnnouncement {
0%, 40% { transform: translateY(0%); opacity: 1; }
50%, 90% { transform: translateY(-100%); opacity: 1; }
95%, 100% { transform: translateY(-100%); opacity: 0; }
}
.sqs-announcement-bar-text-inner p {
display: inline-block;
animation: rotateAnnouncement 10s infinite ease-in-out;
}
.sqs-announcement-bar-text-inner::after {
animation: rotateAnnouncement 10s infinite ease-in-out;
}Scrolling Announcement Bar Text
This code will animate the text in your announcement bar so it scrolls across the screen. I want you to be creative with this code and adjust the percentages. This is designed for a longer sentence.
If you have a shorter announcement, you have some options. The first is to repeat your text inside the message area, and the second is to adjust the percentages so it doest go so far off the screen; change the instances of translateX (100%) to something different like 50% or even 80%.
The exact percentage will be unique for your text length and font size, so don’t be afraid to get creative with your code, Squarespacer!
/* InsideTheSquare scrolling announcement bar */
.sqs-announcement-bar {
overflow: hidden
}
.sqs-announcement-bar-text {
transform: translateX(100%);
animation: scroll 25s linear infinite
}
@keyframes scroll {
from { transform: translateX(100%); }
to { transform: translateX(-100%); } }
.sqs-announcement-bar-close {
display: none;
}