sibling-index()

Temani mimics a View Transition by placing items using their index and translations. The placement calculation change when the index changes, which is an animation opportunity!

Here’s a brand new approach to creating staggered animations in CSS using a single progress value, allowing for smooth linkage to various inputs like scrolling. By utilizing a mathematical formula, it enhances control over animated elements without isolating their timelines, making animations more versatile and scrubbable.

What can we say except BOINNNGGG BOINNGGGGGG.

The new CSS sibling-index() (and -count()) functions are perfect for staggered timing affects. This goes a little step further staggering both before and after a selected element.

A row of logos that animate forever perfectly and don’t have any duplicated HTML or JavaScript at all is quite a trick. Thanks modern CSS!

When you use View Transitions on multiple elements, it can be a very nice look to stagger them out a little bit. It’s possible now, but a bit finicky. Let’s take a look at some code, present and future, that will help.