anime.js to make animations with JavaScript

See example Download

Animations are a key part of any modern interface. When I started working with animations beyond simple CSS transitions, I quickly encountered a clear limitation: when behavior depends on logic, states, or dynamic data, CSS falls short. That’s where anime.js comes in, a lightweight but surprisingly powerful JavaScript library for creating complex animations with very little code.

In this post, we will see how to use the JavaScript animation library called anime.js; in general, it is a very easy-to-use library that will remind us quite a bit of how CSS animations and CSS transitions work.

The advantage we have is the possibility of creating dynamic animations that can depend on many scenarios that we can easily handle with JavaScript, without the need to add/remove classes every so often to vary the behavior of any animatable element; besides being more extensible, which brings us more possibilities for use.

What is anime.js and why use it for JavaScript animations?

anime.js is a JavaScript-based animation library that allows you to animate:

• CSS properties
• Transformations (translate, scale, rotate…)
• SVG attributes
• DOM attributes
• JavaScript object properties

What caught my attention most when I first tried it is that its API is very reminiscent of CSS animations, but with the total flexibility of JavaScript. You don't need jQuery or additional frameworks, and you can control every detail of the timing, sequence, and behavior of the animation.

• In real projects, this makes a difference when:
• Animations depend on conditions
• They are triggered on demand
• They change in real-time
• You need to avoid constantly adding and removing classes

Advantages of anime.js over CSS animations

CSS is perfect for simple animations, but as the project grows, problems appear. In my experience, anime.js stands out because:

• It allows dynamic animations controlled by JavaScript
• It avoids complex CSS class management
• It facilitates on-demand animations
• It controls sequences, delays, and loops from a single place
• It makes it very easy to create complex effects with little code

When an animation depends on multiple scenarios (scroll, events, states, data…), anime.js is a real alternative to pure CSS.

Downloading the JavaScript animation library

You can download the animation library at the following link: anime.js on Github; to use the library, we simply add the following link:

<script src="anime.min.js"></script>

Or for the compressed version:

<script src="anime.js"></script>

For the development version; if you want to see more examples or the official documentation, you can consult the following link: anime.js official page.

Installation with npm or bower:

$ npm install animejs $ bower install animejs

Performing an example animation

First animation example with anime.js

Let's go with a simple example to understand the basics. Suppose you have a div with the class .box:

<div class="box"></div>

The animation would be as simple as:

anime({
 targets: '.box',
 translateX: 250,
 duration: 800,
 easing: 'easeInOutQuad'
});

With this, the element moves 250 pixels on the X-axis with a smooth transition. Here we already see the base pattern: a call to anime() with a configuration object.

There are many examples which you can find at the following link: anime.js experiments but to start and see the versatility of this library, we will work with a coded version of the following experiment anime.js stress test which is quite simple but achieves very attractive final visual effects as we will see below.

As indicated above, the experiment is quite simple to perform; we only need a bit of CSS and JavaScript as we can see in the following three parts that compose it:

CSS of the animated experiment

Define the CSS for the container that will hold (redundancy intended) each of the squares we defined previously; for that, a box with the following dimensions will be created:

section { width: 400px; height: 400px; }

And each of the colored squares that will be contained within the section defined above:

div {
  display: inline-block;
  width: 20px;
  height: 20px;
}

Generating the HTML via JavaScript

Now we must create the maximum number of divs inside the section; performing a simple mathematical operation, we realize that:

(400*400)/(20*20) = 400

We need about 400 small squares/divs to completely fill our section, which obviously we won't do by hand unless you are very bored; to perform this, we use the following JavaScript:

var maxElements = 400;
var colors = ['#FF324A', '#31FFA6', '#206EFF', '#FFFF99'];
var createElements = (function() {
  var sectionEl = document.createElement('section');
  for (var i = 0; i < maxElements; i++) {
    var el = document.createElement('div');
    el.style.background = colors[anime.random(0, 3)];
    sectionEl.appendChild(el);
  }
  document.body.appendChild(sectionEl);
})();

Dynamic animations with random values

One of the things I like most about anime.js is that you can use functions instead of fixed values. This opens the door to very eye-catching dynamic animations.

In one of my first experiments, I generated an animation with random values for position, scale, and rotation.

Now the moment for magic has arrived; we are going to use the anime.js library to create an animation composed of the following code:

anime({
  targets: 'div',
  translateX: function() { return anime.random(-6, 6) + 'rem'; },
  translateY: function() { return anime.random(-6, 6) + 'rem'; },
  scale: function() { return anime.random(10, 20) / 10; },
  rotate: function() { return anime.random(-360, 360); },
  delay: function() { return 400 + anime.random(0, 500); },
  duration: function() { return anime.random(1000, 2000); },
  direction: 'alternate',
  loop: true
});

As we can see, we define a series of parameters composed of random numbers in a range that we can customize as we want; we define the translation on each of the 2D axes with translateX and translateY as well as the scaling with scale, the animation delay delay, rotation rotate, duration duration and we indicate that the animation executes infinitely loop and a very important parameter which is direction with the value alternate that allows reconstructing the scene once the animation is finished (something like performing the animation but in reverse upon reaching its end).

With this we get:

See example Download

3D transformations with anime.js

Animations are a fundamental element in any type of application today; seeing animations in applications created on Android or iOS is quite common today, and of course, the queen, web developments cannot be left behind, and in this entry, we will see how to generate animations with anime.js in which several 3D transformations are applied; previously we saw how to create the following animation:

Anime.js has complete control over the sequence and order in which each animation will be performed and this library is supported in modern browsers as you can consult on the official website of this powerful but lightweight library.

Defining grid animations with anime.js

Now we will see how to create an animation like the one shown in the promotional image of this entry; this experiment was also taken from the official page: CodePen; now we proceed to explain its composition and see how simple it is to use the anime.js library to perform animations:

Defining the HTML and CSS

In this example that we will see below, the first thing we have to do is specify the base HTML we have below; as you will see, it is a simple section element in which we are going to populate all those animated grids with anime.js that we saw previously:

<section class="wrapper"></section> 

And with CSS we indicate the total size of the container previously shown as base HTML; as we see it will occupy the entire size of the screen, in this way the animated grids can be shown in all their magnitude, and just in case of resizing or any grid that goes out of line, we hide anything that does not fit within the body of our website; we indicate that it will be of absolute position located above everything and we give it a 3D perspective, and this is so that those 3D movements of transformations supported by CSS3 can be seen:

  .wrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    perspective: 800px;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
  }

The CSS for each of the rectangles or grids is really simple, only defining its size, which being a square, the width and height are the same; these grids are the ones contained within the previous tag:

  div {
    width: 10vw;
    height: 10vh;
  }

Using the anime.js library - defining the JavaScript

In this section, we are going to go fully into JavaScript and we are going to create the elements that we are going to animate with anime.js and then we proceed to perform the animation with the library that offers us a wide range of options as we will see below.

Creating the grid to animate with JavaScript

As in the previous example, JavaScript is used to build the different components of the container; notice that we create the element with basic JavaScript, you don't have to use jQuery, basic JavaScript is more than enough, we add a class to it and finally we add the square that we are going to animate a little later to the parent element, we do this about 60 times as you can see in the following code:

 function createEl(className) {
      var el = document.createElement('div');
      el.classList.add(className);
      wrapperEl.appendChild(el);
    }
    for (var i = 0; i < numberOfThings; i++) {
      createEl('red');
      createEl('blue');
      createEl('green');
      createEl('yellow');
    }

Animating the grid with anime.js

And the function in charge of performing the animation, which is the section where we use the anime.js library:

  anime({
      targets: 'div',
      translateZ: 720,
      rotateX: 180,
      rotateY: 180,
      delay: function(el, i) {
        return i * 5;
      },
      loop: true,
      direction: 'alternate',
      easing: 'easeOutQuad',
    });

As an interesting point, we have the value of the translateZ property which translates all the previous squares on the Z-axis, resulting in the sensation that these containers "increase" in size, this in conjunction with the rotations gives an interesting result that can be used in web applications as an element selection process.

The rest of the properties are easy to understand, we have the rotations of 180 degrees on the X and Y axis, translations on the Z axis, the type of animation that you can delve deeper into on the API website and that it is a loop, meaning that when the animation ends it must start again.

Massive animations: generating elements with JavaScript

Another real case was animating hundreds of elements at once. For this, I first dynamically generated the nodes:

var maxElements = 400;
var colors = ['#FF324A', '#31FFA6', '#206EFF', '#FFFF99'];
(function() {
 var sectionEl = document.createElement('section');
 for (var i = 0; i < maxElements; i++) {
   var el = document.createElement('div');
   el.style.background = colors[anime.random(0, 3)];
   sectionEl.appendChild(el);
 }
 document.body.appendChild(sectionEl);
})();

This approach demonstrates something important: anime.js scales very well, even when animating many elements simultaneously.

2D transformations with anime.js

2D transformations are the most common and anime.js handles them very naturally:

• translateX
• translateY
• scale
• rotate

Combined example:

anime({
 targets: '.square',
 translateX: window.innerWidth * 0.8,
 scale: 0.8,
 rotate: '1turn'
});

You can also use degrees (deg) or full turns (turn), which is very convenient when working with complex rotations.

3D animations with anime.js

Anime.js also supports 3D transformations when combined with CSS3. In one of my experiments, I used translateZ, rotateX, and rotateY to create an animated grid with depth:

anime({
 targets: 'div',
 translateZ: 720,
 rotateX: 180,
 rotateY: 180,
 delay: (el, i) => i * 5,
 loop: true,
 direction: 'alternate',
 easing: 'easeOutQuad'
});

Using translateZ generates a very interesting sense of depth, ideal for interactive interfaces or more advanced visual effects.

Animation control: duration, delay, loop, and direction

One of the strengths of anime.js is total flow control:

• duration: length of the animation
• delay: delay before starting
• loop: infinite or controlled repetition
• direction: normal, reverse, or alternate

The value direction: 'alternate' is especially useful, as it plays the animation and then automatically reverses it, creating fluid effects without writing more code.

Real use cases of anime.js in web projects

In practice, anime.js is ideal for:

• Entry and exit animations
• Transitions between views
• Interactive dashboards
• Visual effects on landing pages
• Interfaces with dynamic states
• SVG animations
• Micro-interactions

In projects where animation responds to events, data, or user interaction, anime.js simplifies the work greatly.

Compatibility, performance, and browser support

Anime.js is supported by all modern browsers (including IE10+). Internally it uses requestAnimationFrame, which guarantees smooth performance.

My recommendation is:

• Prioritize transform and opacity
• Avoid animating properties that trigger reflow (width, height, top, left)
• Keep animations simple when there are many elements

FAQs about anime.js

• Is Anime.js better than CSS for animations?
  • It depends on the case. For dynamic animations controlled by logic, yes.
• Can anime.js be used without jQuery?
  • Yes, it is designed for pure JavaScript.
• Does Anime.js support 3D animations?
  • Yes, by combining it with CSS3 transformations.
• Does it work well with SVG?
  • Perfectly. It is one of its strong points.

Conclusions

These are basic animations that you can use on your websites; they are effects that you can achieve very eye-catchingly and in this entry you could appreciate in detail through an example how to create an animation that seems complex very easily; this is a great JavaScript library that contains important effects that you can use in a multitude of things, in elements like images, texts, sections, you can pair it or work it with other resources, APIs, frameworks or whatever you find out there on the internet like bootstrap, jQuery, basic CSS etc., and create your own tricks so that your website looks like never before.

With anime.js we can animate many other CSS properties such as width, height, and color and make those animations that with CSS would make our lives very complicated, especially when we must perform an animation or effect on demand; with anime.js this is very easy to do.

After working with anime.js on several projects, my conclusion is clear:

• If you need simple animations → CSS is fine
• If you need dynamic, complex, or on-demand animations → anime.js is an excellent choice

It is a lightweight library, easy to learn and very powerful. With few parameters you can create attractive and professional visual effects, without complicating your life or depending on heavy frameworks.