The next animation library I want to look at is called anime js. It's a step up from motion that dev. It's a lot less minimal and it might have the best documentation you've ever seen. All right, I hope you're ready for some s tier level landing page and documentations. I'm just gonna get out of the way and let's take a look. Alright, anime, jazz, all in one animation engine. Uh, I'm just gonna scroll down

Alright, anime, jazz, all in one animation engine. Uh, I'm just gonna scroll down and we are going to discover this, uh, apple release project looking type of, uh, animations. So it's a little bit over the top, but it explains everything that the animation library can do right out of the box. You can see that it can control the web animation API like motion dev. You can do stagger s VG spring stuff

like motion dev. You can do stagger s VG spring stuff that we've seen already, but it just get into so much more details and power than something like motion that Dev would. All right, let's keep scrolling and spinning that. Whatever that is a very sophisticated, uh, zoom lens for DSLR camera. I think that's what it is. Uh, despite the advanced capabilities, it's surprisingly easy to use.

I think that's what it is. Uh, despite the advanced capabilities, it's surprisingly easy to use. You can see the code here is very similar to something like motion.dev. You have an animate function, you have a selector and some properties that you change. A really powerful feature is that you can apply multiple transforms and then blend them together, which is scanner. You can see composition blend, super advanced stuff.

and then blend them together, which is scanner. You can see composition blend, super advanced stuff. It has a really robust scroll observer. So you can see this animation that is tied to scrolling up and down, uh, varied. Just the examples are amazing. I love this advanced stagger effect that you can do. There would be way too much to cover. So I think when we do a little demo, we'll play with this draggable uh, API because it's super nice

So I think when we do a little demo, we'll play with this draggable uh, API because it's super nice and you can see that really nice bouncy effect. You can create a draggable for any element and then have some spring animations. So we'll play with that in a second. If I keep scrolling, uh, you'll see that there is a lot more, definitely more than I could cover. So check this out. Actually, this is really cool animation

definitely more than I could cover. So check this out. Actually, this is really cool animation that can adjust with the viewport size. So you can see the stacking of the bouncing balls is changing depending on the width of the container. Crazy cool. Despite being super powerful and a little bit larger than motion that dev, it's very reasonable in terms of file size, considering the power that you get out of it.

it's very reasonable in terms of file size, considering the power that you get out of it. All right, and let's finish the onboarding. Some sponsors backing the project and an invitation to get started. So this landing page was cool and gives us a nice overview of what library can do, but once you dive in the documentation, this is where things starts to blow your mind. Let's take a look at how to get started.

where things starts to blow your mind. Let's take a look at how to get started. And the layout here is sort of, uh, odd at start with these big boxes, but soon you will see that these boxes on the left have crazy, crazy cool examples of how to use various APIs that they provide. So you have the documentation on the right and then these boxes are used to provide really cool examples.

and then these boxes are used to provide really cool examples. I'm sure you will love this. So if I click even the installation will have an animation of like some sort of shell command. You can see that you can install the package and then import, animate, very much like motion of dev. There's various ways to do it, CDN and so on. Also, uh, just like motion of dev, you can use it with vanilla js or with React.

Also, uh, just like motion of dev, you can use it with vanilla js or with React. We are going to try to stay framework agnostic here. All we're going to look at is going to be with vanilla js, but you can see here the example we import, animate, and drag ball and different things. And what you see here, the code on the right is actually an example here. So you can see the logo here that is scaling to 1.25, but the logo is also a draggable with a spring release.

So you can see the logo here that is scaling to 1.25, but the logo is also a draggable with a spring release. So I can probably drag this and release it, drag it, release it, shake it, shake it, spin it, spin it, release it. There's also a rotation animation here, rotate logo. Every time the function gets called, we increments the rotations. So the first time I click, it's going to do one lap increments by one here.

So the first time I click, it's going to do one lap increments by one here. And so it should do a second lap and the third lap, oh 5, 6, 7. As you can see, everything is really smooth. I'm pretty sure that I can spin and drag at the same time and everything gets, uh, blended and composed together. So you should really check out this website, anime js.com. Everywhere you go in the documentation, you have this pattern of demos on the left code,

Everywhere you go in the documentation, you have this pattern of demos on the left code, samples on the right, and it's such a great way to learn with visual examples. Let's check a few more. So in the sidebar, here we go in animation, again, you can scroll the documentation, but I love discovering the animation by clicking on the different elements here. So this is very similar to uh, what you have in motion.

by clicking on the different elements here. So this is very similar to uh, what you have in motion. That dev, you can animate with a CSS selector and then some properties. Uh, you can also animate JavaScript objects. I think motion that dev also does that. So here we have an object with X and y with a number value. Uh, but you can see that they had started at zero zero. So if I rerun the animation, these values should animate, uh, number-wise from zero to the finished value.

So if I rerun the animation, these values should animate, uh, number-wise from zero to the finished value. Uh, what else we've got animatable properties is the CSS properties you want to change. So you can animate CSS properties, but you can animate CSS transforms. You can animate CSS variables, which is very cool. So if we take a look at what it looks like, we are setting some styles to these square selector with some CSS variables,

we are setting some styles to these square selector with some CSS variables, and then we animate the variable itself instead of a property. Very, very cool stuff. You can animate SVGs and change the shape. You can animate numerical values like we've seen before. Lots of cool stuff. But this is just the animation. So if I collapse this and we step it up to timelines,

So if I collapse this and we step it up to timelines, now we are really cooking with fire. I don't think that, uh, motion that dev has dedicated timelines. There's a way to stagger elements or chain them like you've seen with a sequence, with an array of arrays. But timeline is a lot more powerful concept that really lets you orchestrate different animations.

But timeline is a lot more powerful concept that really lets you orchestrate different animations. Uh, let's take a look. So you have a create timeline function that you can import. And then the way you use it is you can add animations to the timeline. You can synchronize them, you can call them, give them labels, et cetera. And really the best way to think of a timeline is to think of this animation.

And really the best way to think of a timeline is to think of this animation. You have three animations. The first one fires. Then at this point here, the second one fires while the first one is still going. And then the third one fires. Let's look at it one more time. This is an orchestration of animations. What else can we look at? Uh, there's some cool text effects that you can do line

What else can we look at? Uh, there's some cool text effects that you can do line by line, word by word, or character by character. Oh, this one is really cool. There are lots of helpful utilities, uh, like stagger. So you can stagger an animation. This is not really impressive, but remember the heart, uh, animation in the landing page. So here, if I go stagger grid, look at this, that is now really cool.

So here, if I go stagger grid, look at this, that is now really cool. So this one sort of changes the centering of where it's being focused. Really cool stuff like the possibilities are really limitless as you can see. And you get the idea, the list of cool things goes on and on. And what I like about anime js is that the immersive experience from the documentation is a

And what I like about anime js is that the immersive experience from the documentation is a great way to learn about the library. You read the documentation, you can see the code patterns, and you can see the visual example. And it's sort of like a interactive, uh, learning experience. So in the next lesson, we're going to take one of this feature draggable and have a play with it. See you there.

of this feature draggable and have a play with it. See you there.