Okay, from that point forward, I'm going to remove the first square, not that we've matched it, so I'll comment out all of this code just so you can still refer to it if you want to. And I will also comment out the square one and let's scroll down so we can continue our exploration. And you know what, let me quickly change the layout. Actually the UI doesn't need that much space and we could do it a bit more for the code. Yeah, that's gonna work a bit better.

and we could do it a bit more for the code. Yeah, that's gonna work a bit better. Now I am aware, I shouldn't tell you, but I'm going to tell you, you can see the edge on the side here essentially is not respecting the nice padding around our layout and it's because this is the minimum width of the arc browser. But I'm willing to make that trade off. I'm sorry you had to see it, but I don't want you to see it and think I haven't seen it.

I'm sorry you had to see it, but I don't want you to see it and think I haven't seen it. So let's make that clear. Alright, let's have some fun with motion that dev. And I'm going to add one, uh, property here on the options and its type. And we'll change the type which defaults to twin and use spring instead. Check this out. Very nice. This is subtle, but you can see that the square goes further

Check this out. Very nice. This is subtle, but you can see that the square goes further and then bounces a couple of times. And it's back to the default easing that we had when we didn't specify a duration. But now let's make our spring a bit more radical. So when using a spring type, I can change some parameters from that spring, like the stiffness for example. So if I have a very stiff spring, let's go 1000.

like the stiffness for example. So if I have a very stiff spring, let's go 1000. You can see that our animation nut feels more like a slingshot. There is a lot of tension and stiffness in that spring. Whereas if I had a much less stiff spring, let's say a hundred, it's a little bit more loose and floppy. So let's go back to a thousand and then we'll change another value, which is the damping.

So let's go back to a thousand and then we'll change another value, which is the damping. And damping is a bit weird to wrap your head around, but it's essentially the opposite force applies to the spring. So if we have a very stiff, uh, spring and very low damping, uh, force resisting, it's basically going to sling back and forth almost forever. But if the damping is big, it's going to slow down this bounce back and forth.

But if the damping is big, it's going to slow down this bounce back and forth. So let's try a damping of 20 to start with. And you can see that's a reasonable looking spring. Let's animate it again. But if this damping was lower, like two, go get yourself a coffee because this is going to take a while. This spring is now going back and forth a whole lot because there's not much resistance applied.

This spring is now going back and forth a whole lot because there's not much resistance applied. So as you can see, you can play with the stiffness damping. There is velocity. There's a few more like mass options that you can play around and use real physics that make animations a lot more realistic and trustable. And they feel like an app, uh, like the landing page was saying, it feels more happy than webby.

like the landing page was saying, it feels more happy than webby. Uh, spring animations are really cool. One limitation of springs, however, is they only really work for a start finish transitions. So here we go from x zero to X 800, and so the spring works, but if we wanted a more complex key frame animations where the square goes from zero to 200, then back to a hundred and then up to 300

where the square goes from zero to 200, then back to a hundred and then up to 300 or something like this, the spring would not work. Let me show you. So I will use a new syntax. And by the way, you can also do this with the web animations API. I don't think I've showed you, but if you want multiple values, you can go with an array and say go from zero to let's say 200, then back to a hundred, and then finish at 300.

and say go from zero to let's say 200, then back to a hundred, and then finish at 300. This will create a series of key frames. You can tweak the timings and all these things, but this is also going to break our animations. Check it out. Uh oh. Looks like the square doesn't want budge. Its stays in its starting position. Let's open the dev tools to find out why. All right, there is an error in the console

Let's open the dev tools to find out why. All right, there is an error in the console and that console is going to tell us what I just told you. Only two key frames currently supported with spring and inertia animations. And he tells me, Hey, you're trying to animate 0 200, 100, 300, which is cool, but it doesn't work with springs. So let's get rid of our type of spring and the stiffness and damping and the animation should work.

So let's get rid of our type of spring and the stiffness and damping and the animation should work. And you can see that it's going from zero to 200, then 100 and 300. Maybe let's make it last two seconds so you can see it properly. But that's a shame that we've lost our cool springy animations. There is a way to achieve that with multiple key frames, and I would show you in the next lesson.

There is a way to achieve that with multiple key frames, and I would show you in the next lesson.