March 11, 2025

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>

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>

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

...more

View all episodes

March 11, 2025

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>

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>

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

...more

Share Let the stagger experiments begin

Sign up to save your podcasts

Let the stagger experiments begin

Let the stagger experiments begin