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

<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:

[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:

<!-- 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

AttributeApplied toDescription
data-staggerParent elementValue is the delay between children (e.g. "80ms"). JS sets --vb-stagger-index on each child.
CSS PropertySet onDescription
--vb-stagger-indexEach childAuto-set by JS (0, 1, 2, ...). Used in delay calculation.
--vb-staggerParentOverrides the stagger interval. Falls back to attribute value or 80ms.