Let's pick up a motion that dev example where we left it off and add multi-step spring animations. Okay, so if I refer to the motion that dev docs and I search for the term sequence, uh, I guess it's in the animate documentation. There you go. In the sidebar timeline sequence, you can see that the animate function can accept an array, which is a sequence. Basically each sequence is a full animation block with a selector properties to animate and options.

Basically each sequence is a full animation block with a selector properties to animate and options. So let's go and try that. I could do it all in line, but let's create a sequence array cons sequence and inside of there we are going to have a second level array where we define what we want. So we want D square dash dash two to animate DX transform to 100, uh, sorry to 200.

to animate DX transform to 100, uh, sorry to 200. So we want to do the first step here and let's try to leave it at that for now. And so instead of animating all of this here, we are going to animate our sequence. And as you can see it worked. It translated our square by 200 pixels over the default duration and easing timing function.

by 200 pixels over the default duration and easing timing function. So let's keep going after the first iteration here, I want to duplicate that, but go X 100 and then X 300. So now it's actually starting to take the shape of a sequence. And you know what? Now that I'm using the same CSS selector multiple times, don't really need to do this for this example, but imagine that that would change.

multiple times, don't really need to do this for this example, but imagine that that would change. Why don't we go cones square two document query selector square two just like this so that we can now replace uh, three strings here with square two. This is probably a good practice and you've seen it work. Let's save one more time so you can see the animation. And our square is definitely going to 200, 100 and 300. So we're back to the same spot as we were before.

And our square is definitely going to 200, 100 and 300. So we're back to the same spot as we were before. We have a multi-step sequence, but no spring animations. But refactoring our animation to a sequence will allow us to bring some springiness to each step. Remember, each one of these array here is one full animation with the selector, the properties to animate and the options. So here I can go type spring and let's do the same

So here I can go type spring and let's do the same for the other two steps like so. Okay, that's interesting. It's the pretty basic default spring, which is quite conservative, but let's go and tweak the stiffness for all and the damping like we did before. So let's go with 500 and damping. We're gonna go with eh, let's go maybe with five.

So let's go with 500 and damping. We're gonna go with eh, let's go maybe with five. I have no idea what these values will do. Okay, it's way too bouncy. So let's crank up the damping to 50. It's too much. 25. Alright, that's kind of cool. I kinda want though the spring to really be very springy. So let's go to a thousand and yeah, I think that's pretty cool. Now to spice things up a little bit,

and yeah, I think that's pretty cool. Now to spice things up a little bit, the second step in our sequence, this one I will also animate the Y properly to let's say 100. So now it's making that nice little Z shape. But of course if you wanted, you could bring it back to zero on the ladder step to have something like this. So as you can imagine within the sequence, you have a lot of power to customize things like the stiffness,

So as you can imagine within the sequence, you have a lot of power to customize things like the stiffness, the damping, the duration, uh, and all sorts of things. And you can do this at each uh, sequence, step level. But you can also have global options. Here in the animate we have the sequence, but you can pass then a series of options. So if you wanted the entire duration for this sequence to be five seconds, this should slow the animation right down.

to be five seconds, this should slow the animation right down. So it's going to take five seconds. Alright, let's go maybe to two seconds. Nice. So it's nice and snappy. Now within these two seconds, I could drastically change the course of the animation by going to the second of the three steps and go at and go 1.5. So at 1.5 seconds I want to hit that second step.

and go at and go 1.5. So at 1.5 seconds I want to hit that second step. So now there should be a noticeable delay before the second step starts. So it should go to the second position, wait for a bit till 1.5 and then go. Let's check it out. Alright, I'm going to save start. I mean the was pretty spot on.