Let the stagger experiments begin

2019, I proposed an idea to help remove a ton of boilerplate code from CSS and HTML while also making stagger effects easier on authors. The proposal ended up being sibling-index() and sibling-count().

Fun news! You can try it in Canary today and I've got this little example to help kick off some ideas for you!

Try on Codepen

Staggering animation #

Instead of inlining a CSS variable for each element:

<div class="parent" style="--sibling-count: 5">
  <div style="--sibling-index: 1"></div>
  <div style="--sibling-index: 2"></div>
  <div style="--sibling-index: 3"></div>
  <div style="--sibling-index: 4"></div>
  <div style="--sibling-index: 5"></div>
</div>

You can use sibling-index() to retrieve it just in time instead of doing the work in the template or JS.

Clean that HTML up to make room for sibling-index() by removing all the inline styles:

<div class="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

and then drop in this new magic bomb:

.parent > * {
  transition: opacity 0.3s ease;
  transition-delay: calc(sibling-index() * 100ms);
}

and now you have a 100ms staggered crossfade transition effect 🤓

Staggering color #

There's nothing stopping you from using sibling-index() to stagger a color change, or anything else!

Here the hue increments by 50 each element.

.parent > * {
  --hue: calc(sibling-index() * 50);
  color: oklch(70% 70% var(--hue));
}

You could easily add a min() or clamp() or trig functions to help you too.

Time to experiment #

Share with me what you build! Fork this Codepen