A Beginner’s Guide to Using anime.js
Frustrated with learning a lot of CSS just to animate some simple things? anime.js has your back! This guide is for those who have no idea what anime.js is but are interested in learning and using it.
From the anime.js website itself:
Anime.js (
/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
If you’ve read any of my previous CSS blog posts, you may have noticed that I’ve been learning more about animation through CSS. It’s no coincidence that I stumbled upon this gold mine called anime.js and decided to figure out how to use it. After reading documentation and watching some YouTube videos, I managed to make some progress into figuring out how anime.js works. This blog aims to be a relatively short introduction (lots of pictures and gifs!) on how to get started with anime.js for someone who has never even heard of it before.
I’ll be using a Codepen, so feel free to follow along there. I’ll also be giving instructions on how to install anime.js if you’re using your own text editor.
Getting Started
On Codepen, start by creating a new pen and then adjusting the settings to import anime.js. Click on Settings in the top right corner. Then click on JS in the navigation bar on the left side. In the Add External Scripts/Pens section, search for anime.js and click on the first option. It should say “animejs” with a description of “Polyvalent Javascript Animation engine”. Now you’re all set to start coding!
For readers following along in their text editor of choice, start by installing the anime.js package through npm by typing this into your terminal/console:
npm install animejs --save
Afterwards, in your HTML file, link the anime.min.js file in one of your scripts. My file directory is structured this way, so I linked it as such:
Yours may be different so be careful with your file path. Remember to have your CSS and HTML files linked as well. Also, check out the live-server extension for immediate reloading when changes occur to any of your files.
HTML Setup
I’ll create a simple red circle 🔴 to use as the example for this guide. In the HTML section, we just need one line of code:
CSS Setup
To create the red circle, I’m going to give the circle the same height and width, round it out with border radius at 50%, and then set its background color to red.
This should create a little red circle in the top left corner of your screen. Now let’s get to animating it.
JavaScript Animations!
Here comes the part where we start using anime.js. We start by writing out anime and passing in a hash of key-value pairs as the argument. I use the targets key to specify which CSS selector I am looking to animate. In this case, I pass in the hash’s value as a string with the CSS selector in it as such:
This doesn’t animate the circle just yet. I specify what kind of CSS style properties I want changed with the circle. One of the first examples in the anime.js documentation is translate on the X axis, so I’ll start with that. I’ll add translateX and specify 250 (pixels). Let’s see what happens:
It moves to the right by 250 pixels with a defaulted ease out! This can be changed but I won’t be going over that in this guide. Now we can start playing with some other things that anime.js provides us, like staggering, color change, and direction!
I’ll add two more circles to the mix by duplicating our HTML twice. I’ll also add a little margin so we get some space between each circle.
Let’s start with stagger. I’ll add a delay and specify that I’ll be using anime’s stagger method, passing in the value of 100 for the amount of milliseconds to wait before the next object moves, as such:
Let’s see what happens!
Notice how the first circle has already started moving before our page even fully loaded? Let’s add some wait time before the animation begins by adding the start option for the stagger method and setting that start value to 1 second, or 1000 milliseconds, as well as bumping up the time between each stagger by another 100 ms to get some more dramatic pause:
Now we should be able to see their original position before they start moving and the circles should take a little longer to move after the previous has moved.
Subtle, but it makes a difference especially with the next property we’ll use. Let’s give it some color. I’ll add the hex code for blue using the background property:
I’ll also compare side by side what happens if we had left out the start delay:
Notice how in the animation with no delay, the first circle’s red color barely even shows since the animation has already started once the page reloads. Keep this in mind for user experience since not all users will have fast internet and be able to load page animations in under a second or two.
The last property I want to demonstrate is the direction change. There are three values to the direction property: normal, reverse, and alternate. Normal works as the examples shown above. Reverse simply flips the animation around. Alternate does the normal animation, followed by the reversed animation. The direction applies not only to movement, but to all other properties specified as well. Our JS code should look like this at this point:
Which would give us this animation:
Let’s change reverse to alternate and see what happens:
That’s it for the introductory guide!
Pretty cool right? It seems so simple at the moment but there’s so many more methods and animations that anime.js provides. This is only scratching the surface! I’ve actually implemented anime.js in my portfolio’s navigation bar to bring attention to it and have viewers want to click on it!
I hope this guide was helpful and piqued your interest in this amazing anime.js animation library. Feel free to message me on Twitter or LinkedIn and show me what you’ve created!
