HF MotionA humanfriend.digital product
Sequence descendants in DOM order

Staggered Groups

Apply calculated delays to headings, cards, text, buttons, and reveal elements nested inside parallax wrappers.

Open playground
1 · 2 · 3
Parent attributedata-hf-stagger
Start offsetdata-hf-stagger-start
Parallax itemsIgnored by counter
Live demo

Three-item stagger

The parent adds 150ms between each eligible reveal descendant, beginning after an 80ms start delay.

01

Heading or image

02

Supporting copy

03

Button or action

80ms · 230ms · 380ms calculated delays Want to see that again? scroll up or down out of viewport and come back

Place stagger attributes on a parent. Eligible reveal descendants receive calculated delays in DOM order.

Basic Stagger

Classes first

<div class="hf-stagger-children">
  <h2>Heading</h2>
  <p>Paragraph</p>
  <a href="#">Button</a>
</div>

The parent class supplies the stagger interval and injects the default reveal into eligible children.

Exact data attributes

<div data-hf-stagger="140" data-hf-stagger-start="80">
  <h2 data-hf="fade" data-hf-set="dramatic">Heading</h2>
  <p data-hf="fade" data-hf-set="default">Paragraph</p>
  <a data-hf="fade" data-hf-set="quick" href="#">Button</a>
</div>

How the Timing Is Calculated

First item delay = stagger-start
Second item delay = stagger-start + stagger
Third item delay = stagger-start + (stagger x 2)

An element’s own data-hf-delay is added to its calculated stagger delay.

Parallax Wrappers Inside a Stagger Group

Parallax elements are ignored by the stagger counter. Reveal elements nested inside them still participate:

<div data-hf-stagger="180" data-hf-stagger-start="100">
<div data-hf="parallax" data-hf-set="subtle">
<article data-hf="fade" data-hf-set="default">Card
one</article>
</div>
<div data-hf="parallax" data-hf-set="default">
<article data-hf="fade" data-hf-set="default">Card
two</article>
</div>
</div>