Scrolling Marquee Bar: When to Use It and How to Set It Up

Static announcement bars are easy to ignore. After a few seconds on a page, the human eye filters them out as part of the chrome. A scrolling marquee bar reintroduces motion to the viewport, which is the cheapest way to recapture attention without resorting to popups.

What the data says

• +35%CTR over static bars
• 2.4saverage attention span on a static bar
• 60chideal max length per message

When marquee wins

• Multi-message campaigns — combine "Free shipping over $50", "30-day returns" and "Use code SPRING20" in one rotating string
• Long-form announcements — when you have more than 60 characters but don't want to truncate
• High-traffic landing pages — visitors arriving from ads usually scan only above the fold

When marquee hurts

Avoid marquee for legal disclosures, GDPR consent, or anything a visitor might need to read carefully. Motion makes scanning harder for people with dyslexia or vestibular sensitivities, so respect prefers-reduced-motion. Flexibar pauses the animation automatically when that media query is set.

Setup in Flexibar

1. Create a new bar and set the type to Marquee.
2. Enter your messages separated by a divider character (Flexibar uses a small dot by default).
3. Set the scroll speed: 18 seconds per loop is a tested sweet spot for ~120 character strings.
4. Pause on hover — keep this enabled so users can read the message.
5. Preview on mobile before publishing; some themes constrain the bar's width unexpectedly.

Speed and readability

Too fast and the message becomes unreadable. Too slow and it feels stuck. The sweet spot is roughly 80–100 pixels per second of horizontal travel. Flexibar's default settings hit this range automatically based on container width.