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
news!
You can try it in Canary today and
I've got this little example to help kick off some ideas for you!
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
<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!
