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.3 s ease ; transition-delay : calc (sibling-index() * 100 ms ); } 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