Okay, so these modifiers will alter the axis parameters and you can see here a modifier option. And here in the example you can see that they have a UTS dot wrap. And basically this is going to wrap the elements back to the left if it comes out to the right. Actually, let me show you. If I go to the right, it'll eventually come back on the other side and same up and down. So we could do that. But let's try something else.

and same up and down. So we could do that. But let's try something else. After the release ease, I will have a modifier. So this is going to modify both the x and Y axis. And you can also pass a function here, which is going to give you the value of the x and y axis. And so here I could do something like value divided by two. And so now if I try to drag this square all the way up, you can see that it only follows by half because basically we are dividing the value, uh, number

you can see that it only follows by half because basically we are dividing the value, uh, number and applying that result through the modifier. So you can do very, very cool stuff. Again, you can do that independently of both axis. So if I was to wrap this in the y axis, like so, I'm probably still able to go all the way to the right and left, but I can only go halfway top and bottom. So super cool controls. Interestingly enough, our vertical snap is now halfway

So super cool controls. Interestingly enough, our vertical snap is now halfway through, uh, two squares because we are dividing the position value by two. I wanna show you one more thing. So beyond all the settings and the modifier, you also have lot of, uh, callback methods. Something like on drag, on release, lots of events that you can fire, uh, functionality to.

Something like on drag, on release, lots of events that you can fire, uh, functionality to. So let's check this out. Let's say that we wanted to perform an other animation when we release the drag. If I type on, you will see that we have lots of, uh, options on drag, on grab, release, ize, settle, snap update. I think on release is what we want here. And so this is going to give you a function that you can run.

And so this is going to give you a function that you can run. And here, let's animate the square. Maybe we rotate it to the right. And by the way, this is why I have the black border on that square. So we will see the rotation a little bit more clearly. So here I'm going to go animate, which is another function from the library. We are going to animate the dot square

which is another function from the library. We are going to animate the dot square and the animation we want to perform is rotate 90 degrees. All right, so let's drag. And when we release b boop, it rotates by 90 degrees. And then if I do it again, uhoh, it looks like it only worked once. And now when I release it, it's not rotating anymore. Every time we are setting the rotation to 90 degrees, which at this point it already has.

Every time we are setting the rotation to 90 degrees, which at this point it already has. So we need a way to rotate by 90 degrees more than last time, instead of 90 degrees hot coded. And there is a nice way to have this relative rotation basically. And the way you do that is transforming your number to a string that is plus equals 90. So this time it's going to add 90 degrees

to a string that is plus equals 90. So this time it's going to add 90 degrees with each rotation. So I go here, release, it, snaps down here, I go here, release. And it keeps turning. You know what? Let me get rid of the modifier because it's uh, a little bit confusing more than anything. But as you can see, every time it's going to rotate, have the bouncy spring release and the rotation.

But as you can see, every time it's going to rotate, have the bouncy spring release and the rotation. And the rotation feels really slow. So maybe we can have an ease. Can we call the spring function here? And yeah, let's try to have the same damping. Uh, that should work much nicer. Let's give it a try a. That is pretty cool. I feel like we could make it even cooler with the slight delay.

I feel like we could make it even cooler with the slight delay. Uh, I imagine there is a delay and I promise you that I'm not fake learning. I actually don't know exactly the properties, but it's a pretty intuitive, and with TypeScript giving me all the options, I think it's in seconds. We'll find out. Let's try. Maybe it's in milliseconds. 100 milliseconds.

We'll find out. Let's try. Maybe it's in milliseconds. 100 milliseconds. Yeah. Okay. So if I go 300 milliseconds, it's gonna have that cool little bounce and rotate, bounce, rotate. Very really cool. I could play with this all day. Flick it against the wall. Come on. That's pretty cool, huh? Uh, have a play with it. Let me know what you come up with. I hope you enjoy this one. Let's keep going with the next library, green Sock animation platform.

Let's keep going with the next library, green Sock animation platform. Gsap.