# 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. Canonical: https://gsapvault.com/ui-elements/announcement-banner-bar Live demo: https://gsapvault.com/demos/announcement-banner-bar/index.html | Property | Value | |----------|-------| | Type | ui-element | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Core GSAP only | | Techniques | micro-interaction, stagger, state-transition, timed-stream, progress-bar, keyboard-navigation | | Uses Lenis | No | ## Overview 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. 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. ## Features - 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 ## Use Cases - 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 ## Vibe-Code Ready Setup This UI element includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## 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. ## Integration Preview How this UI element integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add before the closing `` tag:** ```html ``` **3. Add the component markup as the first thing inside ``** (the block marked `` in `index.html`). Each message is one `
  • `; the CTA link is optional: ```html
    • Free shipping on every order over £60 until Sunday See details
    • Scheduled maintenance Thursday 02:00 UTC
    ``` The bar pushes in on load. Copy the three SVG icons from `index.html`, or use your own. #### Options | Attribute | Values | Default | What it does | |-----------|--------|---------|--------------| | `data-type` | `info`, `promo`, `warning`, `danger` | `info` | Sets the accent (pip, progress fill, CTA) and how the bar is announced | | `data-interval` | milliseconds | `5000` | Time each message is shown before the next | | `data-storage-key` | any string | none | When set, a dismissal is written to `localStorage` under this key and the bar does not show again on later visits | | `data-sticky` | `true` | off | After the push-in the bar becomes `position: sticky` at the top | ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium UI element. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Announcement Banner Bar](https://gsapvault.com/ui-elements/announcement-banner-bar) - [The Vault (£99 one-time, best value): every current and future effect, template and UI element](https://gsapvault.com/effects) --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt