All right, why don't we go and play with Anime's Draggable feature. I think you're gonna like it. Okay, so our starting point is this simple square here, center on the page. You can see it's a div with a class of square. There's nothing particular about the styles except maybe I've given it a black border and you'll understand why in a bit. But there is also this nice mesh grid background

and you'll understand why in a bit. But there is also this nice mesh grid background that hopefully comes through on the video and here's the code for it. So I'm using a background image and I'm doing a linear gradient. And basically this gradient repeats over and over every 64 pixels. It's a grid of 64 pixel cells, and conveniently the square is also 64 pixels,

It's a grid of 64 pixel cells, and conveniently the square is also 64 pixels, which means it fits nicely. Okay? So for now, our square is just a div. There's nothing specific about it. I can definitely not drag it, move it around. But this is where anime js comes into play. We'll jump over to the anime JS website and its gorgeous documentation. And why don't we search for draggable?

and its gorgeous documentation. And why don't we search for draggable? So in its simplest form, you can see that we can import create draggable from anime js and then create a draggable with that. So the first step is to NPM install anime js. Once again, I've already done this so I won't do it here, but this is what you would do to begin with. And if I check the package JSON, you will see that anime JS is here

And if I check the package JSON, you will see that anime JS is here and gsap also since we're going to look at it afterwards. Alright? And so I have this anime that ts file that is ready and wired up with a template. And basically we're gonna do our work here. So let's start by importing this function from anime js. And remember it's called create draggable. First argument of the create draggable function is the target, which can be a CSS selector or dumb element.

First argument of the create draggable function is the target, which can be a CSS selector or dumb element. So we can target a square this way. Alright, so let's try to use it on that square. So create draggable and I will target the that square selector, which is a square and let's leave it at that for now. Surely that's not gonna do much by itself or will it? Let's give it a try. Uh oh look at this little hand and looks like I can drag my square around

Let's give it a try. Uh oh look at this little hand and looks like I can drag my square around and looks like I can also flick it around. Oh, oh, I've almost lost it and I've lost it. Actually I can scroll down to find it again. Uh, but I'm sure there are better ways to do that and I'm pretty sure that this is what the second argument the parameters here is for. So let's take a look at what uh parameters are allowed. It's an object of draggable axis parameters,

So let's take a look at what uh parameters are allowed. It's an object of draggable axis parameters, settings, and callbacks. Huh, interesting. It looks like the axis parameters allow you to do things like snap. Why don't we go and try do that. So after the square I will have an object and let's try X and let's try the snap functionality. And let's go 64 since this is the grid cell size and do the same for y Snap 64.

And let's go 64 since this is the grid cell size and do the same for y Snap 64. So now let's go try and drag our square and drop it somewhere here. Aha, did you see that it snapped right into place, uh, within the cell? And that's why I've put a background pattern that kind of mimics the 64 pixel grid so we can understand this snapping mechanism. Very cool. Uh, I can drop it, uh, wherever I want

so we can understand this snapping mechanism. Very cool. Uh, I can drop it, uh, wherever I want and it's always going to snap in a cell of the grid. Now you would typically use this if you wanted separate values for X and Y. So maybe 1 28 here. So that now vertically it'll skip a grid. If I drop it here, it should go to the next one. It only snaps every second uh, row, but it still does every row horizontally.

It only snaps every second uh, row, but it still does every row horizontally. If you wanted to snap in every grid cell there's a shorthand instead of X and y separately, you can just go snap 64. And I believe that's going to behave the exact same. And yep, it does. It can go in every cell. But as you can see from my last flick, uh, we still have that problem where the square nearly disappears or fully disappears if I flick it right off. So the next thing we wanna figure out is

or fully disappears if I flick it right off. So the next thing we wanna figure out is how we can contain this square within our view port. Aha. So yep, settings, trigger container. Here's the circle. And I imagine we cannot send it outside of the frame because it's gonna bounce back in. It's exactly what I want. We could totally use the body selector for our container so that uh, we cannot flick out of the container. So let's try this in here container.

that uh, we cannot flick out of the container. So let's try this in here container. Sure enough, we can go body. And now I feel like if I try to flick my, uh, that was a bit weak, if I try to flick the square hards outside, it looks like it bounces back in. Let's try a really hard one. Ah, you can see that it's literally bouncing off the walls and refusing to get out of there. Very cool. I've seen before a container padding properly.

and refusing to get out of there. Very cool. I've seen before a container padding properly. So container padding, well 64 so the square should not be able to go within. Yeah, you can see the resistance here. It's going to refuse to go anywhere near the wall. Even if I launch it against, it's gonna bounce back by 64 pixels and I believe on the top two. So that's pretty cool. And as you can see on the left, uh, there is a lot of things

So that's pretty cool. And as you can see on the left, uh, there is a lot of things that you can do to further customize the feel and behavior of that drag drag speed release ease. Let's try release ease. I guess this is where you go with the spring and yet you can pass springs. Uh, we always love a good spring. So there it is. I'm going to copy that and let's add it to our settings. Looks like I need to import the spring

I'm going to copy that and let's add it to our settings. Looks like I need to import the spring function from anime js. There it is. Okay, so let's go try our spring release now. Ah, you can see that it bounces back and forth in a spring manner. Remember if the stiffness is bigger, it gets a lot stiffer. So if I was to go 1000 like we did in a previous lesson, it's going to be very, and indeed it's let's get that little jelly behavior.

it's going to be very, and indeed it's let's get that little jelly behavior. If you wanted less pronounced, you would beef up the damping a little bit. Let's go 22. Very scientific measurements. And now we got a kind of cool, uh, looking spring release ease. Okay? So there are a lot of settings that you can play with to customize the feel of this, uh, draggable. And there's also modifiers.

to customize the feel of this, uh, draggable. And there's also modifiers. Let me show you one pretty cool way you can use modifiers.