00:00 All right, so here in the logo.map, I am going to grab the second argument as the index. And so this is going to give me the array index or the loop index. And just to show you that inside the li item before the anchor tag here, I will just output this index. And so now we can see

00:17 clearly 0, 1, 2, 3, 4, 5, 6, 7, 8, just like we were hoping. So now we can use that number value to progressively increase an animation delay. So we can have a value of, let's say, 1 second.

00:32 And if we multiply that by the loop index, the first would be 0 times 1 second, 0 second. And then 1 times 1 second, 1 second, 2 seconds, 3 seconds, 4 seconds. And really, that's all we need. So like I said, we could use JavaScript to make the calculation. But let's try to pass

00:47 that value to CSS somehow so that we can do the calculation with a calc function in CSS. I'll scroll back up here where we have the list item. And the way we're going to pass that index to the CSS is by using a style attribute where we're going to define a CSS variable named loop

01:05 index or something like this. And then we can consume that in a CSS calc function. Check this out. So I'll get rid of the comment here. And before the class name, I'll pass a style attribute. And we want to define a CSS variable. So it will be named starting with two dashes. And let's call

01:22 it loop index. And the value for that is going to be the index. And yes, I will pass these funky React CSS properties. So we're grabbing the index here from the loop. And then we're passing it and setting it as a loop index CSS variable. The reason we have this is because otherwise TypeScript is

01:41 not happy. By adding as React CSS properties, we make it happy again. So now that we have defined this CSS variable in the style attribute, we can consume that CSS variable in our class name. Check this out. I will go with our arbitrary property that you've seen before, animation

01:59 delay. And here we're going to use a calc function. And so let's say we want to increment the delay by one second with each style like we were saying before. I will go one second time var dash dash loop index. So we're setting the animation delay to a value which is one second times the loop

02:19 index. So one second times zero is zero. One second time one is one, etc. So we should be able to see each style wait one second before revealing. Obviously, that's a little too long, but it's a good way to check that it works. Oh, and one more thing. We don't want to do

02:33 this animation stagger delay if the user doesn't want motion. So let's wrap this in a motion safe guard like so. So that the stagger delay also only happens if the user has not checked the prefers reduce motion setting. And have a look. I'm going to refresh the page and check this out.

02:53 One second, one second, one second. Obviously, this is way too slow, but you can see the animation delay is being staggered and works properly. So we're going to remove the loop index number on top of each dial and speed it up quite a bit. And it's going to look magnifique. All right. So

03:11 down there, I have my index that I can remove. I can also remove this whole comment here. And instead of having one second, let's have 0.07 seconds. So it's much quicker. And now check this out. When I refresh, we have this bubbly bouncy, almost like raindrops falling onto the screen.

03:31 And I think it looks super nice. All right. I hope you enjoyed this. I had fun building this. And let's move to the last exercise for this segment.