FREELessons: 5Length: 46 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 How to Install Anime.js

Anime.js is a JavaScript animation library. You can use it to create animations on the web. Beyond simple animations, like moving an object around the page, you can also create pretty complex ones, like the one you saw in the introduction lesson. Let’s find out more and see how to install Anime.js.

Related Links

2.1 How to Install Anime.js

All right, let's talk about anime.js. This is a JavaScript animation library, or animation engine, or whatever you wanna call it. Basically, you can use it to create animations on the web. And not just simple ones like moving an object around the page. You can also create pretty complex animations like the one you saw In the introduction lesson. If you're curious as to what else you can create with anime.js, please check out the official code pen collection I linked down below. Now apart from the awesome things you can do with anime.js, there are two things I really like about it. Number one is its weight. In its minified form, it weighs just over 11 kilobytes, which is fantastic. And number two, it's written in Vanilla JavaScript so there are no other dependencies that you need to load. So with that out of the way let's go ahead and see how to install it. And also see a very basic example. So the first way to install it is the more obvious, you go to its GitHub page and you clone, or download the repository and then you'll load either anime.js or anima.min.js in the footer of your page. However, if you're using the command line and you're used to it, you can use Bower to install it. So you would simply do, you would of course first navigate to the directory that you are working on and you would Bower. Let's do a search just to make sure that, yep, that's the one, and you would do bower install animejs. And of course that will create a bower_components folder/animejs. And then you can go into your code editor. I have my code editor here, and if I'm gonna go ahead and show the bower components folder, you're gonna see animejs and I would load the one that I need just like I did right here. All right, now let's see a very simple example on how to use anime.js. And I've set up a relatively simple page here. I have a single div and I styled it, gave it a width, height, and a background color. And our test page currently looks like this. But let's say that I wanna move this div to the right 500 pixels over one second, how would I do that? Well, very simple. I'm gonna call anime and I'm gonna pass in an object. These are the parameters basically or the options. I'm gonna say targets, this is used to target the elements that I want to animate, in my case I'm using a CSS selector to target all the divs. Then what exactly do I want to animate, what properties? Well, I'm gonna use a transform actually, translateX the value of 500, duration 1000. I'm gonna talk about these properties more in depth in future lessons. But for now this is a very basic example. And what this is doing? Refresh, it moves that div, it animates it to the right, also applying a nice easing effect. So again, all you have to do is include anime and call it, pass in an object where you define the target and the properties that you want to animate and you're all done. And that's how you get started with anime.js. Now let's dig a little deeper and see what else this library has to offer. And in the next lesson you're going to learn how to target the elements that you want to animate and also what kind of properties can be animated. I'll see you there.

Back to the top