Back to UI Elements
ui-006
Stacked Notification Toasts
£5 Standard License Unlimited projects
Toast notifications that stack, pop in with a spring, run a progress bar and slide out on their own timer.
About This Component
Toast notifications that stack, pop in with a spring, run a progress bar and slide out on their own timer. Ships in three looks, vault, glass and corporate, switched by one data-variant attribute and defined entirely in CSS custom properties, so the same script serves all three. A single self-contained component: one HTML file, one stylesheet, one script, vanilla JavaScript and GSAP, no framework.
What's Included
- spawnToast(title, message) from anywhere in your code
- Each toast pops in with back.out easing and a progress bar countdown
- Older toasts shift up as new ones stack
- Auto-dismiss with animated removal
- No dependencies beyond GSAP core
- Three shipped variants: vault, glass, corporate
Perfect For
- Success and error feedback in web apps
- Download-ready and license notices
- Live activity feeds
How It Works
Self-timing toasts
Each toast is created, appended and tweened in; a second tween scrubs its progress bar over the lifetime, and onComplete slides the toast out and removes it from the DOM.
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates