Announcement Banner Bar
A top-of-page announcement bar that pushes the page down instead of overlapping it, rotates through your messages with a masked line swap and a progress track, and collapses away on dismiss so the page reflows.
About This Component
A site-wide announcement bar for the top of the page: the promo bar, the top bar notification, the maintenance notice. It sits in normal document flow, so when it enters it tweens its height from zero and the page below rides down with it, and when it is dismissed the height tweens back to zero and the page reflows up. Nothing overlaps your header and nothing jumps.
Read the full effect overview
Messages are the list items inside the bar, so a promo with a CTA link is one line of HTML, not a JavaScript array. Every few seconds the current line exits upward through a mask with a slight lean and the next line's words rise in on a stagger, while a thin progress track shows the time to the next one. Rotation pauses on hover, on keyboard focus and while the tab is hidden, so nobody loses a message they were reading.
Four types (info, promo, warning, danger) set the accent through CSS custom properties and decide how the bar is announced: danger is role=alert, the rest are a polite status region. An optional storage key remembers a dismissal in localStorage; an optional sticky mode pins the bar after it has pushed in. Three shipped looks, light, dark and moss, defined entirely in CSS: dark is the same design re-valued, not a second skin.
What's Included
- Pushes the page down by tweening real height, not a transform, so the layout genuinely moves
- Messages are semantic list items you edit in HTML, each with an optional CTA link
- Masked line swap: the current line exits upward with a lean, the next line's words rise in on a stagger
- Thin progress track shows the time to the next message, tweened rather than timed
- Rotation pauses on hover, focus-within and when the tab is hidden
- Four types (info, promo, warning, danger) set the accent and the live-region politeness
- Dismiss spins the close icon, fades the content and collapses the height so the page reflows up
- Optional data-storage-key remembers a dismissal; optional data-sticky pins the bar after push-in
- Arrow keys step, Escape dismisses, and a horizontal swipe steps on touch
- announcementBar.show / dismiss / next / prev / go / pause / resume, plus announcement:show / change / dismiss events
Perfect For
- Shop promo bars: free shipping thresholds, sale windows, new drops
- Scheduled maintenance and incident notices above the header
- SaaS product announcements and release notes with a link
- Cookie-free consent-adjacent notices that must not overlap the header
- Event countdowns and registration reminders on a landing page
How It Works
The push is a height tween
The bar sits at the top of the document in normal flow. On show the script measures the bar at height auto, sets it to zero and tweens the height back to that measurement on power3.out, so everything below moves with it instead of being covered. Dismiss runs the same tween to zero on power3.inOut while the content fades and the close icon spins, then sets the hidden attribute so an empty bar is never left in the flow.
A masked line swap
Every message is a list item stacked in one grid cell inside a viewport with overflow hidden. Each message's words are wrapped in spans once at init. On a swap the outgoing line tweens yPercent upward with a two-degree lean on expo.inOut while the incoming line's words rise from below on a short stagger. Under prefers-reduced-motion the swap is an instant cut.
The countdown is the progress track
The time to the next message is a linear tween scaling the progress fill from zero to one, whose onComplete steps to the next message. Pausing the rotation is pausing that tween, so hovering, tabbing in or switching tabs holds the track where it is and leaving resumes it. A step requested during a swap is queued and played after it, so rapid arrow presses never desync the index.
