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
<!-- Fast stagger --><ul data-stagger="40ms">...</ul> <!-- Slow stagger --><ul data-stagger="200ms">...</ul> <!-- Via CSS custom property --><ul data-stagger style="--vb-stagger: 120ms">...</ul>Attribute reference
| Attribute | Applied to | Description |
|---|---|---|
data-stagger | Parent element | Value is the delay between children (e.g. "80ms"). JS sets --vb-stagger-index on each child. |
| 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. |