Video summary
The video introduces a powerful new CSS feature called `sibling-index`, which allows developers to easily create staggered animations for lists of elements without relying on fragile methods like `nth-child` or manual JavaScript loops. Previously, animating items to slide in one after another often required maintaining complex selectors that broke whenever the list length changed. The host demonstrates how `sibling-index` automatically assigns a sequential number to each element based on its position among its siblings, making it incredibly simple to apply delays or other properties that scale dynamically with the content. This new capability significantly reduces maintenance overhead and eliminates the need for manual updates when adding or removing items from a list.
Beyond basic animation delays, the tutorial explores creative applications of `sibling-index` and its companion property, `sibling-count`, such as generating dynamic color gradients and managing complex layering with Z-indexes. For instance, the host shows how to rotate through colors by multiplying the sibling index with a hue variable, creating smooth transitions across avatar images or other UI components. A particularly useful example involves solving the common problem of overlapping elements where the stacking order needs to reverse based on position; by calculating the Z-index as the total sibling count minus the current sibling index, developers can ensure that items are layered correctly from left to right without hardcoding specific values. This approach also simplifies hover effects, allowing the hovered item to automatically rise to the front using a calculation based on its position rather than arbitrary high numbers like 999.
The video concludes by confirming that this new feature is now widely supported across all major browser engines following its recent release in Firefox, making it ready for immediate use in production projects. The host also shares several bonus tips to refine the visual quality of these animations, such as converting timing durations into variables and adjusting cubic-bezier easing functions for a snappier feel. By combining `sibling-index` with CSS variables and modern timing functions, developers can build responsive, interactive interfaces that adapt seamlessly to changing content structures. Overall, this update represents a significant step forward in CSS capabilities, offering elegant solutions to layout challenges that previously required JavaScript or cumbersome CSS hacks.
Read the full video transcript
Hello, my friend and friend. Maybe you
have a menu that slides in and out like
this and you want to add a stagger
animation to it. Or you have some
overlapping content that you're having
issues with Z index on or a number of
other issues that can come up where you
have a different number of siblings
where you need to do something. Well,
CSS has added a new feature to help us
with this and to explore that feature,
let's take a look at this menu that I
have and then we'll go into another
example too where we can see some other
things uh that we can do with Actually,
it's two different values we can use
now. Uh which you can see here my menu
is sliding in and out. I'm just doing a
very simple transition
and I am using a popover for this. I
don't know if that's the best idea for
navigation, but hey, why not? It works.
And uh yeah, it's working. I can add
then maybe a transition delay so they
come in after. That's probably not quite
what I want. I want them as I said to
stagger in. So then I can maybe do
something like this. This is sort of one
of the approaches this nth-child thing
you have to do which is a nightmare to
maintain uh cuz but it works. But that
sucks to have to you know, if you add
another item and then you have to add
another nth-child and that's no fun.
Another maybe more elegant solution is
to use a variable like I uh that this is
a quite common way to do this type of
thing, but then you have to go into your
HTML probably and you could use
nth-child too, I guess, but often you'll
see it like this with
uh 1 2 3 4 5. So we're multiplying that
by our delay that's right here and it
still staggers in which is nice, but you
don't want to manually do this. You
could use JavaScript to loop through.
That's probably the easiest solution and
what we'd be doing up until now. But
thankfully, we don't have to do this
anymore. Anytime you might be tempted to
do this or use that nth-child thing, now
what you could use instead is sibling
index. And this just gets the index of
the element amongst its siblings. So for
my first LI, the sibling index would be
one. And for the second one it would be
two, three, four, five. So it's exactly
the same thing as that I that I was
doing before,
and it works exactly the same way. It's
wonderful. And if you're wondering about
browser support, I'm recording this this
week because Firefox has just shipped
this, so it is now in all the browser
engines, which is fabulous. There's also
a sibling count, which can be useful for
animations if you want to set amount of
time, but we'll look at other examples
where we would use a sibling count as
well. But first, let's fix this up
really quickly where I might add a
translate. And if I wanted to not have a
delay on the first item, I can just do a
sibling index minus one, uh which works
great, right? So, the first one is going
to be a zero.
Uh and then what we could obviously want
to do there if I am doing a transition
on the translate, I'd have to update
this not just to be opacity, but play
with my styles a little bit there, so
then I actually get them to slide in.
Uh if you're not used to popovers or you
haven't used them before, I'll put a
link in the description if you're a
little bit confused by this or the
starting style stuff that's going on
right here. And this still isn't perfect
yet. Let's fix this up really quickly. I
know you're here for the next thing, but
I just want to look at how we could
change our timing durations into a
variable to bring those in. And the nice
thing with that then is, you know, our
250 here we would turn into a variable
as well, but that one then we could like
divide by three or something just to
create a little bit more of a nicer
stagger along the way. So, 750 is kind
of long, but we can make the entire
thing feel a little bit faster just by
having them all happen concurrently,
uh and it makes for a little bit of a
nicer animation there as they all slide
in and ends up taking about the same
amount of time that we had when this was
a little bit snappier before because
we're overlapping the delays. And the
last thing we're going to do that's a
little like bonus tip, I guess, here is
if you are going to do animations like
this using a cubic bezier uh for the
timing function can be a lot nicer. So,
we can bring in that timing function
there and just have like a little
something a little bit better. Check out
easing wizard. I'll put the link to that
in the description as well if you need
to get better easing functions. But
yeah, that wasn't really focused on
sibling index, just a few little bonus
tips, but I went one through them
quickly just to improve that a little
bit cuz it was bugging me with the
animation look like. Uh but I said we'd
look at other sibling index and sibling
count use cases. So, another one could
be with avatars. Um not so much for the
color, but I want to show a color thing
that we can do here as well. So,
whenever you need to rotate through
colors, it's nice and easy to do where I
have my hue as a variable, and that just
means my hue can be based on the sibling
index getting multiplied. And if ever
you don't like the color range that
you're in, you can just add to that,
right? So, you're starting off a little
bit of a higher or lower point along the
HSL or if you're using OKLCH or whatever
it is uh to get your colors coming in.
So, fun trick there. Don't think it's
something you'll use all the time, but I
did want to show it. Something that
could be much more useful. I mentioned
this off the top is dealing with Z
index. And the reason for that is if you
have avatars like this, a kind of common
thing to do is to overlap them. And if
we do that, it works. They all overlap
one another, but there's a bit of a
problem with this is normally we don't
want them to overlap this way around
where the one on the right is on the
top. It's much more common for the one
on the left to be on the top like we
have right here. So, you know, going
from top to bottom that way. And to be
able to pull that off, you might be
doing something like this, which sucks,
all right?
>> [laughter]
>> Uh where the first one is the highest Z
index and you work your way down, but
then the more items you have, the more Z
indexes you have to deal with, which
anyone who's dealt with Z index knows
that's a little bit of a nightmare.
Luckily, there's a very easy fix to all
of this, which is to use sibling count
along with sibling index to set the Z
index. You can see it's still working in
the example I have here where sibling
count is getting the total number of
siblings. So, in this case we have five,
so we're saying our Z index is five
minus the index. So, this one will be
five minus one, so its Z index is four.
This one will be five minus two, so it's
three, two, one, and zero. And so,
they're always going to be layered with
the first one being on the top and
slowly go down. You can add as many or
as few as you want in here without ever
having to worry about it. It's so cool.
Uh there's a little bit more we could do
with this though is you might add a
hover effect. And if you add a hover
effect, you probably want the one that
you're hovering on to actually pull out
into the front. And that's not happening
right now. We don't want to have to deal
with necessarily with a Z index of 999
or anything like that. So the fix is
simply just to use the sibling count
again. Uh I don't even think I need the
plus one here cuz the this one's always
going to be one less than the sibling
count, but this just makes sure that
it's a bigger number. Uh so whatever one
we're hovering on, the Z index is always
the sibling count. So 5 + 1 be 6. It's
always going to be more than what's
there. If you had 10 of them, it would
be 10 + 1, 11. You know it's always
going on top.