Check out a free preview of the full SVG Essentials & Animation, v2 course

The "Cycle Stagger" Lesson is part of the full, SVG Essentials & Animation, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Sarah walks through the code to produce cycle stagger.

Preview
Close

Transcript from the "Cycle Stagger" Lesson

[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.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now

Not sure where to get started?

Answer three short questions and we'll recommend the best learning path for your experience level and goals