00:00 This next step is going to be awesome as we're going to add the stagger reveal to our animation. So instead of all loading at the same time, we're going to slowly but surely stagger each tile so they all load one after the other in sequence in a really nice waterfall looking effect.

00:16 And there's really nothing magic here, all we need to do is take the animation delay and make the slightly bigger tile after tile. And you've already seen how to do this with the animation delay property. Do you know how you can target with CSS the third child with nth child 3?

00:30 So technically CSS has the capability of figuring out what rank a child is in a list but unfortunately as of right now we are not able to use that information to for example do something like calculate an animation delay based on the ranking of the child which would be super handy for what

00:49 we're trying to do. There's a draft proposal which was opened in 2019 that is linked in the description for this exercise. Go check it out and it looks like this might land at some point but for now we're going to have to use a tiny bit of JavaScript just to grab the information of what

01:04 rank in the list each tile is. So what you gotta do here in this logo.map loop is grab the loop index which can be passed as a second parameter and then you're going to use that to somehow calculate an incremental value for the animation delay so that we can stagger our tiles. There's a

01:22 few ways to go around it but try to make your implementation with as little JavaScript as possible. Really just use JS to grab the loop index and then somehow pass it to something that CSS can use. Good luck!