Introduction to Anime.js

JavaScript animation has been around for a while. There is a wide choice of JavaScript animation libraries for you to try out. Among the group, Anime.js has been gaining some significant popularity. If you’re not familiar with it, I hope this article will get you started with this lightweight and flexible animation library.

This library works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

Let’s create some animations using Anime.js.

Prerequisites

Download the library from GitHub or link it through cdnjs. If you are using npm or bower, you can do as follows:

npm install animejs

OR

bower install animejs

Then in your script file:

import anime from 'animejs'

Let’s add the following code snippet into our HTML < body >:

< div class="purple" >< /div >

< div class="darkgreen" >< /div >

< div class="darkred" >< /div >

Creating Animations

The first step is to initialize anime object:

anime({

//properties here

});

Within the object above, we will provide certain properties to instruct what and how the elements should animate.

anime({

targets: ['.purple', '.darkgreen', '.darkred'],

translateX: '70rem',

rotate: 360,

borderRadius: '50%',

duration: 3000,

loop: true

});

Here, the targets property defines the elements to animate. The property translateX moves the elements in horizontal direction. The property duration defines how long the animation lasts.

The loop property runs the animation indefinitely if it is set to true. If it is set to false, it runs just once.

Check out the complete demo here.

Wrapping Up

Working with Anime.js is easy and fun. It lets you create smooth animations and the API is easy to follow. It offers a lot of other cool features. If you wish to explore further, check out the documentation and examples here. I hope you will enjoy working with Anime.js.

One thought on “Introduction to Anime.js

Comments are closed.