The first library we're going to take a look at is called Motion Do Deaf. It's many people's favorite library and for very good reason, Motion falls within the mini animation tiny footprint category. It was originally called Frame of Motion and was a react only library. But since November, 2024, it's now just motion and it's independent and available for React View

But since November, 2024, it's now just motion and it's independent and available for React View or just JavaScript. Now the thing that sets this library apart beyond its ease of use is the fact that it actually uses the web animations API. And like we've talked about in the previous lesson, this means that you can achieve great performance while using JavaScript to create animations. So like I mentioned, motion is super easy to use

using JavaScript to create animations. So like I mentioned, motion is super easy to use and it sort of enhances the capabilities of what you can do that's not typically possible. It provides a simpler syntax to animate elements and while doing so, it also enhances the capabilities of stuff that is not possible with just the web animation API. So for example, it brings the ability to have, uh, spring animations.

So for example, it brings the ability to have, uh, spring animations. So you can see that this drag and drop a springy animation is super cool, feels very like they say, uh, native rather than webby. Let's keep scrolling. Another thing that you can do is animate layout properties like Grid or Flex, which is typically not very easy or possible, uh, which is super cool. And also sequence animations, uh, which is gets tricky.

or possible, uh, which is super cool. And also sequence animations, uh, which is gets tricky. You can do it, but it gets a bit tricky with just the raw animation API. Like I mentioned, this is a very popular and growing in popularity library. So you can see Motion has that hockey stick curve, uh, and the other competitors are left behind. Trust me, those competitors are great libraries as well, but you cannot deny the fact

Trust me, those competitors are great libraries as well, but you cannot deny the fact that motion is really gaining popularity due to its really small footprint and ease of use. So if we look at the documentation and we are going to, we could use any of these, but let's focus on the JavaScript one. Basically you can install it with your typical approach with NPM Package Manager or just a CDN script tag. If we look at how to create an animation,

with NPM Package Manager or just a CDN script tag. If we look at how to create an animation, you import the animate function from motion. And here you can see you can animate A CSS selector and you animate the rotation 360 degrees. And so rotate 360 will generate, uh, if I refresh the page, a 360 rotation. And the source code for that is super simple. We have a box styled with CSS and we ate it over one second, 360 degrees.

We have a box styled with CSS and we ate it over one second, 360 degrees. That simple and elegant syntax is a nice thin layer over the web animations API. It makes your life easier as a developer. And also, like I mentioned in terms of performance and capabilities, you step it up, you can animate CSS properties, SVG properties, uh, JavaScript objects. And the key thing is here, let me zoom in a bit.

JavaScript objects. And the key thing is here, let me zoom in a bit. With motion, you don't have to worry about achieving the best performance. If it can be hardware accelerated, it will be, in other words, you worry about your animation and the library worries about the performance in the browser. That means that you can expand the sort of stuff you can animate.

That means that you can expand the sort of stuff you can animate. And there's an example here using three Js and you can animate this cube in 3D, which is pretty cool. One super cool aspect is it has spring animations built in. So you can see here the animation is type spring and we define a stiffness. And so again, if I go here, you can see that nice buttery bounce back, which is generated with the spring animation.

that nice buttery bounce back, which is generated with the spring animation. The next very, very cool stuff that this library makes easy to do is to stagger animations or sequence them. So if you have multiple li items in a list, you can import the stagger function. And then here we animate each li uh, and delay them by a stagger of 0.1 second. So each element is going to be delayed by 0.1 second. And then, so if I go here

So each element is going to be delayed by 0.1 second. And then, so if I go here and refresh the page, you can see this staggered entry. I like the, I'll show you the spring utility. I find it super cool. So you have yes, a type of spring. Uh, but what I really like is the CSS implementation. And what I like about it is it's going to take a human readable syntax, spring duration, and then stiffness, and then it's going to translate this to a CSS linear function

and then stiffness, and then it's going to translate this to a CSS linear function that is definitely less human readable. So you can use it as a generator for a custom linear function with a sort of parameters that you could never figure out by head unless you're very, very, very clever. And I think that's pretty useful. Let me show you what I mean with this CSS generation here. So here's an example of a spring animation

Let me show you what I mean with this CSS generation here. So here's an example of a spring animation that is actually CSS. It's a linear function and you can see that it looks really cool. And if we look at how it's generated, we importing spring from motion. Uh, here it's using React motion, but let's focus on what is interesting here and it's this spring function with duration of 0.5

but let's focus on what is interesting here and it's this spring function with duration of 0.5 and then the stiffness, or I'm not sure what the second parameter is, 0.8. And basically this call here is going to translate to a linear function that is very custom. It's typically going to take your simple spring definition and generate a crazy linear function just like that. There's a lot more cool stuff that motion can do, but I can't show you all of this in this video.

There's a lot more cool stuff that motion can do, but I can't show you all of this in this video. I really encourage you though, to try it out. Motion is not the library you want to use. If you want to do Hollywood Crazy Awards website, scroll jacking with things flying everywhere, this is typically not in the realm of motion, but what Motion does, it does extremely well. It lets you animate any property SVG, JavaScript objects, 3D objects, anything that you can animate, any properties.

It lets you animate any property SVG, JavaScript objects, 3D objects, anything that you can animate, any properties. Mostly you can animate them in a super simple way and it has a tiny footprint motion that dev check it out. It definitely gets my thumbs up.