Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
data-stagger
Cascades timing to child elements for choreographed entrance sequences.
Overview
The data-stagger attribute goes on a parent element. It sets --vb-stagger-index on each child (0, 1, 2, ...) so CSS can calculate cascading delays for entrance effects.
Basic usage
Staggered list
<ul data-stagger="80ms"> <li data-effect="fade-in slide-up" data-trigger="scroll">First</li> <li data-effect="fade-in slide-up" data-trigger="scroll">Second</li> <li data-effect="fade-in slide-up" data-trigger="scroll">Third</li></ul>Each child appears 80ms after the previous one, creating a cascading entrance.
How it works
VB.js sets --vb-stagger-index on each direct child. The built-in CSS rule calculates the delay:
Stagger CSS
[data-stagger] > * { --vb-delay: calc(var(--vb-stagger-index, 0) * var(--vb-stagger, 80ms));}Effects that support --vb-delay (like fade-in, slide-up, pop) automatically pick up the staggered timing.
Choreography
Combine stagger with different effects for varied choreography patterns.
Custom timing
Override the stagger interval with a CSS custom property or inline style:
Custom stagger timing
<!-- CSS-time shorthand: sets --vb-stagger directly --><ul data-stagger="40ms">...</ul><ul data-stagger="200ms">...</ul> <!-- Explicit CSS custom property --><ul data-stagger style="--vb-stagger: 120ms">...</ul>Ordering modes
By default data-stagger orders children by DOM position. Mode keywords change the index assignment:
| Mode | Effect |
|---|---|
| (default / time value) | Linear DOM order: child 0 gets index 0, child 1 gets index 1, etc. |
reverse | Last child gets index 0, first child gets the highest index. |
random | Fisher-Yates shuffle seeded by the parent's id (or generated UID), so the order is deterministic across reloads. |
grid | Manhattan distance from the top-left grid cell. Uses each child's computed grid-row-start / grid-column-start; falls back to DOM order outside a grid. |
Stagger modes
<ul data-stagger="reverse" style="--vb-stagger: 80ms"> <li data-effect="fade-in" data-trigger="scroll">Last in DOM, first to appear</li> <li data-effect="fade-in" data-trigger="scroll">Middle</li> <li data-effect="fade-in" data-trigger="scroll">First in DOM, last to appear</li></ul> <ol id="words" data-stagger="random" style="--vb-stagger: 60ms">...</ol> <section data-stagger="grid" data-layout="grid" style="--vb-stagger: 50ms">...</section>Attribute reference
| Attribute | Applied to | Description |
|---|---|---|
data-stagger | Parent element | Empty or a CSS time (e.g. "80ms") → linear cascade. reverse / random / grid → alternate ordering. CSS-time values set --vb-stagger on the parent as a shorthand. |
| CSS Property | Set on | Description |
|---|---|---|
--vb-stagger-index | Each child | Auto-set by JS (0, 1, 2, ...). Used in delay calculation. |
--vb-stagger | Parent | Overrides the stagger interval. Falls back to attribute value or 80ms. |