Let's take motion that dev for a quick spin to see how powerful and fun to work with it is. For this example, we are going to have two little squares and the first one is animated with the web animations API. And so when I refresh the page, you will see the first square animated. Now we are going to recreate that animation and then take it way further with motion that dev. Alright, so this is the Wapi implementation. We first get the square element, we document query selector,

Alright, so this is the Wapi implementation. We first get the square element, we document query selector, and then we use the dot animate function. And we change the transform properly to translate X by a hundred pixels. We do this over 800 milliseconds with an ease out, uh, easing. So let's try recreate this with the square dash dash two and motion that depth. The first thing we need to do is install the motion library

and motion that depth. The first thing we need to do is install the motion library from N-P-M-N-P-M-I motion. But here I already have it installed so I won't do that. But if I go in my package, that JSON file, you can see that we have the motion dependency here. Alright, so now let's import motion. We are specifically going to import the animate function from motion, just like that. And so we can go down here.

from motion, just like that. And so we can go down here. Here we are going to directly use the animate function and we can use a CSS selector to target what we want to animate with the first argument. So here I can go that square dash dash two. So this is referring to this selector, which is that second square. And then we can specify the properties that we want to animate.

And then we can specify the properties that we want to animate. So just like up here, we want to translate X by a hundred pixels and with motion we have a much nicer TS syntax. I can simply go X 100, let's save that by itself. And aha, you can see already that we had some animation happening. It actually looks pretty nice, it has that nice easing effect.

It actually looks pretty nice, it has that nice easing effect. So one of the first benefits you can notice with using motion is we have sensible defaults for an animation that looks good. We didn't have to specify a duration, a animation fill mode, an easing timing function, and everything has pretty nice standards defaults that can of course be tweaked but look great out of the box. As a comparison with the web animation API,

of course be tweaked but look great out of the box. As a comparison with the web animation API, if I did not have a duration, you can see that there is no animation whatsoever. The square is jumping into the final position. Similarly, if I had a duration but no animation fill mode, the default behavior would annoyingly jump back to the starting position. And if we didn't have an easing timing function,

to the starting position. And if we didn't have an easing timing function, we would have that boring linear animation. So out of the box without specifications, even if I had to put a duration here, you can see that our second square is looking a lot better with a lot less code. Alright, so let's bring back these two definitions and we're going to try to make the second square match the animation.

and we're going to try to make the second square match the animation. So I'm going to add a duration. So first argument is the selector for the element you want to animate, then the properties you animate. And the third argument can be the options. So here I can go duration and let's go not 800, but 0.8. We'll do this in seconds. And haha, something interesting happened here.

We'll do this in seconds. And haha, something interesting happened here. Did you notice as soon as we specified a duration, the sort of springy default animation switched to an ease out animation? And as a result, both animations look exactly the same. Check it out, the two squares are perfectly in sync. And if we look at the web animations API implementation, you can see that the easing is out is basically going to be the default for an animation.

you can see that the easing is out is basically going to be the default for an animation. I've just noticed that if you don't have any specific duration, let me remove that. It sort of, uh, reverts to this bouncy elasticy uh, springy effect. But once you have a duration ease out, it seems to be the default easing. So let's bring that back and we can see the exact same behavior.

So let's bring that back and we can see the exact same behavior. But if I was changing the ease to let's say, ease in out, for example, and another benefit of this library is it's all with TypeScript. So you have auto complete suggestions like you've just seen, and now the second square should start slow and and slow and accelerate in the middle, which is ease in out. So let me remove that

and accelerate in the middle, which is ease in out. So let me remove that and I'm going to compact everything on one line, like so, okay, it doesn't work with the uh, text wrap because of my, uh, split window, but if I put it sort of like this, uh, and you look at this and you compare it to that, there's already a nice, uh, ergonomics gains. We didn't have to go transform translate X and then have a string.

We didn't have to go transform translate X and then have a string. We instead have X and the number 100, the forwards fill mode and the ease out transition timing functions are the defaults and we can set the duration in seconds. And so it's much nicer to recreate the same animation. But if all motion that dev provided was a TS syntax, I mean it would already be pretty cool, but it's a lot more than that.

I mean it would already be pretty cool, but it's a lot more than that. So let's take the example further.