Cycle Stagger

[00:00:00]
>> Sarah Drasner: There's also cycle stagger. So let's open this in Code Pen.
>> Sarah Drasner: So we're kind of changing all of the things and we're throwing them all over the screen. And this is all the code it takes to do that. That is not a lot of code. Cycle Stagger is really cool because basically what it's doing is it's taking each time you stagger, and it's saying, well, maybe you wanna cycle through a few different properties instead of keeping them consistent.

[00:00:36]
So for the staggerFrom it'll cycle through white, yellow, and this kind of red color, and then it'll cycle through a few opacities. Every time it finds another element, it'll go white, yellow, some red, or, and then white, yellow, red, white, yellow, red, like that. We can also cycle through coordinates.

[00:00:56]
So I can say like, throw it this way, throw it this way, throw it this way, throw it this way. Or, I'm actually given access to the index. So, in this case, I added a rotation using this index. Could have written this as an arrow function as well, but I don't know what level you're at, so I'll just write it like this at first and then I'll write it as arrow functions later.

[00:01:18]
So we have access to that index. And then I can say for each index multiply that rotation by 20, and then it can do all sorts of crazy effects. Pretty neat.