Stagger

[00:00:00]
>> Sarah Drasner: Let's talk about staggers for a second. So there's CSS, there's SASS, and there's GSAP. It's the same animation for both, for all three. So how do we write it in each? I have some HAML to just spin up some bars. If you don't know what HAML is, don't worry about it.

[00:00:18]
[LAUGH] CSS, I would say, @keyframes staggerFoo to background: orange; transform: rotate(90deg);. And then I would say nth-child(1), and I have staggerFoo and then I have this delay that increases per unit, right? One, two, three, four. And one of the problems with this is that if I add more units, I have to add more.

[00:00:43]
And it's very repetitive, right? It's kind of against those DRY principles that we talk about sometimes. SASS is a little bit better. We've got the same keyframes, and then I can use a SASS for loop to kind of apply that to every nth child. This starts to look a little squirrely.

[00:01:02]
I mean, it's fine, but it's not the most legible thing if you don't work with SASS a lot. And we have that same problem of, if I wanted to add more units I didn't have to go change this, yeah? Here's what it is in GSAP. It's just one place TweenMax.staggerTo I go grab all the bars.

[00:01:23]
And in this case, can be any amount of bars. You can add 100 more bars and it's the same code. One backgroundColor: orange, rotation: 90, ease: Sine.easeout. And then we say 0.1, 0.1 is the amount in between each one. So remember how we increase the delay every time by 0.1, this is the delay that we have between them.

[00:01:50]
Pretty cool? So that stagger, I'm gonna go over these just a few times, just a few little repetitions, because this is the most important part. All of the things that we learn towards the end of the day is all based on you understanding this syntax and this timeline so you can do more cool, cool stuff.

[00:02:10]
Okay, so stagger, so things like stagger are kinda complicated to do in CSS animation and in GSAP are one line of code. So we can do all of those boxes. I mean, again, this code does all of that. And it looks really classy, right? I didn't do that much to make it look so classy.

[00:02:31]
I have an ease, that's an elastic easeout, and I have a stagger, too. So I'm grabbing all the squares, again, could add more squares, could get less squares. This is the delay between each one, and then I rotate them, and basically they all just kinda fall. So I have a delay here, I have two of these two tween maxes, they happen at the same time.

[00:02:56]
So in order to add another one, I can either delay it or we can start to use the timeline. And the timeline will allow us to just kind of follow each other. So you can write it like this if you want, but I'll show you how the timelines work in just a second, too.