Alright, let me show you a couple more things. I'm getting a bit tired of refreshing the page or saving over and over to trigger the animation. So why don't we go and make the animation repeat indefinitely with repeat infinity, just like in the web animations API. So now the animation is going to repeat, but as you can see, it jumps from the end spots to the start spots. This makes sense because we end here in a different position

spots to the start spots. This makes sense because we end here in a different position than we started with. So we can either have a fourth step that goes back to zero zero or we can change the order. It's not called direction, but it's called repeat type. And the options we let TypeScript suggest, uh, loop, which is currently the default mirror, which I guess goes back and forth and reverse. That goes backwards. So let's try mirror

which I guess goes back and forth and reverse. That goes backwards. So let's try mirror and now the animation should go and then come back. All right, it's going forward and it looks like, uh, a 1.5 delay. The at up here is causing some problems because of the spring animations. So let's get rid of the that. And so it should go back to a more fluid back and forth.

So let's get rid of the that. And so it should go back to a more fluid back and forth. I don't really under, maybe this is the duration that is competing against the springs. Let's go with three seconds. It almost looks like from 300 x zero y to 100 each. It does the x axis first and then the Y axis. Anyway, let's go with that. It's kind of cool. Anyway, what I wanna show you now is just like the web animations API, you can have a playback controls,

Anyway, what I wanna show you now is just like the web animations API, you can have a playback controls, uh, with the animation. So something like start pose, uh, let's play with this. So when you define an animation like this here, it's going to return you an animation playback controls with then type. So let's have that stored in KS animation. So that's later on. I can do things like animation that, and you can see play speed, start time, stage stop.

I can do things like animation that, and you can see play speed, start time, stage stop. Then, uh, very powerful API. So let's go animation pose and that should well pose the animation. There we go. So here, let's try something cool. Instead of posing the animation immediately when the page loads we want to pose on hover. So we could do that with CSS, but here we are doing JavaScript animations

So we could do that with CSS, but here we are doing JavaScript animations and turns out the motion that dev API has a hover function that I'm going to show you. Now, back at the top, I will also import the hover function. I will delete this. And very similarly to the animate function. The hover function takes an element which can be a selector. Here we want the square two,

The hover function takes an element which can be a selector. Here we want the square two, but instead of an object, it's going to give you a callback function here. And so inside of there I could go animation that pose. And remember the animation is this sequence animation. So now the animation runs, but if I hover this square at any point, it's going to pose the animation. The problem is when I go away

it's going to pose the animation. The problem is when I go away and stop hovering, the animation never starts again. And it's because we've used the hover function to pause the animation, but we never really release it. Luckily the hover function is pretty clever about this. So instead of having a hover out or un hover, you can return a function that is going to fire when the hover is no longer. And here, just like suggested,

to fire when the hover is no longer. And here, just like suggested, we can animation that play again. So let's give that a try. The animation is running. I hover to pause it and I un hover to release it. And you can see that at any stage where I hover over this square, it's going to pause exactly where it's at and then resume whenever we release it. So that's already really cool. But to finish this lesson in style,

So that's already really cool. But to finish this lesson in style, let's add another animation on hover and then revert this animation when we hover out, uh, to show how powerful the combination of animations can be. And maybe one quick thing I'll do to make my life easier so I don't have to chase that square is when I hover the whole wrapper around the square, I want the animation post to occur. So if I go in the markup, you can see

I want the animation post to occur. So if I go in the markup, you can see that our square is wrapped in a wrapper element. And so why don't we use that here instead, which means that now whenever I hover anywhere on the wrapper element, maybe let's give this a quick style background yellow. There we go. So whenever I hover anywhere on this yellow background, it's gonna pose the animation. And when I leave that it starts again. So that makes it a little bit easier to trigger on and off.

And when I leave that it starts again. So that makes it a little bit easier to trigger on and off. So check this out. Whenever we hover, we post the animation, let's do another call to the animate function. We want to target our square two one more time and let's change, yeah, scale 1.5 to make it obvious. So if I do just that, we might have a pretty big problem. So it's pos and it's scaled, but when I release the scale doesn't go away. And I'm sure you understand why.

but when I release the scale doesn't go away. And I'm sure you understand why. It's because we need to hear in the return function. Let's have a block around this so we can have multiple statements and I'm going to duplicate that and bring the scale back to one. And why don't we add some rotation, rotate 45 and then here rotate zero, which is going to look much cooler.

and then here rotate zero, which is going to look much cooler. I really like that. And as you can see now, we have a very springy natural feeling, uh, physicsy specy animation, which is way beyond what we could have done with just key frames and CSS by itself. I mean, we could have tried to get close to this with, uh, linear functions to do some spring-like animations, but this would've taken forever and I'm pretty sure we would never get that close.

but this would've taken forever and I'm pretty sure we would never get that close. Also, it's cool that you can have hover stars combined with the default animation that poses and resumes without resetting. It's pretty powerful. And if we take a full review of the codes that we've written for this, I think it's pretty cool. We import, animate and hover from motion. Uh, and then we have that sequence with three

We import, animate and hover from motion. Uh, and then we have that sequence with three distinctive steps that we can sequence. And then the animation animates the sequence over three seconds. And then we use the hover function on the wrapper element. When it fires, we post the animation and scale and rotate our square. And then the return function here is kind of like the undo or cleanup function.

And then the return function here is kind of like the undo or cleanup function. Whenever hover ceases to be true, uh, we play the animation again and we change the scale back to one and rotation back to zero. And that, my friend, I think is really cool. Hopefully that gave you the interest to dig a little bit deeper with motion dev. I really think you should. It's fun, it's lightweight,

to dig a little bit deeper with motion dev. I really think you should. It's fun, it's lightweight, it's easy to install, easy to get started. Go check it out. Let me know what you think about it, and I will see you in the next video.