Announcement Bar Scrolling Marquee

What You'll Create

A continuously scrolling text marquee in your announcement bar that loops infinitely. The text glides smoothly from right to left, and you can add custom decorative graphics between each text repetition.

The Problem It Solves

Squarespace's announcement bar displays static text. When you want an eye-catching scrolling effect like the marquee tickers seen on modern retail and creative sites, there's no built-in option.

Perfect For

Sale announcements, Brand messaging, Event promotions, Decorative text strips, Store-wide notifications

What Makes This Different

This technique creates that classic scrolling marquee effect by animating your announcement bar text in a continuous loop. You write your message multiple times in the announcement bar field, and the code handles the smooth scrolling animation. The close button gets a polished circular style and stays accessible above the moving text. You can even add custom images or icons between text repetitions using italic formatting—no code editing needed for each new graphic.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Announcement bar enabled. Text repeated multiple times (10+) in the announcement bar field.

• Toolkit Title: Announcement Bar Marquee

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support