JavaScript-Based Animations Using Anime.js, Part 1: Targets and Properties

Anime.js is a lightweight JavaScript-based animation library. You can use it to animate different CSS properties, SVG or DOM attributes on a webpage. The library allows you to control all aspects of the animation and provides a lot of ways for you to specify the elements that you want to target or the properties that you want to animate.

You have full control over the sequence in which the animations are played or how synchronized the animations of different elements are with respect to each other. The library supports all modern browsers, including IE10+.

In this tutorial series, you will learn about all the features of Anime.js so that you can use them in real-life projects with ease.

Before diving deep into the topic, let’s install the library first. You can use either npm or Bower to perform the installation by running the following commands:

npm install animejs

bower install animejs

You can also download the library and include it in your project or directly link to the latest version of the library hosted on a CDN.

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

After a successful installation, you are now ready to use this library to add interesting animation to your elements. We will start with the basics of the library, focusing on one particular area at a time.

Specifying Target Elements

To create any animations using Anime.js, you will have to call the anime() function and pass it an object with key-value pairs that specify the target elements and properties that you want to animate, among other things. You can use the targets key to tell Anime.js which elements you want to animate. This key can accept values in different formats.

CSS Selectors

You can pass one or more CSS selectors as a value for the targets key.

var blue = anime({
  targets: '.blue',
  translateY: 200
});

var redBlue = anime({
  targets: '.red, .blue',
  translateY: 200
});

var even = anime({
  targets: '.square:nth-child(even)',
  translateY: 200
});

var notRed = anime({
  targets: '.square:not(.red)',
  translateY: 200
});

In the first case, Anime.js will animate all the elements with a blue class. In the second case, Anime.js will animate all the elements with either the red or blue class. In the third case, Anime.js will animate all the even children with a square class. In the last case, Anime.js will animate all the elements with a square class that don’t have a red class.

DOM Node or NodeList

You can also use a DOM node or a NodeList as a value for the targets key. Here are a few examples of setting the targets as a DOM node.

var special = anime({
  targets: document.getElementById('special'),
  translateY: 200
});

var blue = anime({
  targets: document.querySelector('.blue'),
  translateY: 200
});

var redBlue = anime({
  targets: document.querySelectorAll('.red, .blue'),
  translateY: 200
});

var even = anime({
  targets: document.querySelectorAll('.square:nth-child(even)'),
  translateY: 200
});

var notRed = anime({
  targets: document.querySelectorAll('.square:not(.red)'),
  translateY: 200
});

In the first case, I have used the getElementById() function to get our special element. The querySelector() function is used to get the first element that has the blue class. The querySelectorAll() function is used to get all the elements within the document that match the specified group of selectors.

There are a lot of other functions as well that you can use to select your target elements that you want to animate. For example, you can get all the elements with a given class name using the getElementsByClassName() function. Similarly, you can also get all the elements with a given tag name using the getElementsByTagName() function.

Any function that returns a DOM node or a NodeList can be used to set the value of the targets key in Anime.js.

Object

You can also use a JavaScript object as a value for the targets key. The key of that object is used as an identifier, and the value is used as a number that needs to be animated.

You can then show the animation inside another HTML element with the help of additional JavaScript. Here is the code to animate the values of two different keys of an object.

var filesScanned = { count: 0, infected: 0 };

var scanning = anime({
  targets: filesScanned,
  count: 1000,
  infected: 8,
  round: 1,
  update: function() {
    var scanCount = document.querySelector('.scan-count');
    scanCount.innerHTML = filesScanned.count;
    
    var infectedCount = document.querySelector('.infected-count');
    infectedCount.innerHTML = filesScanned.infected;
  }
});

The above code will animate the scanned files count from 0 to 1,000 and the infected files count from 0 to 8. Keep in mind that you can only animate numerical values this way. Trying to animate a key from ‘AAA’ to ‘BOY’ will result in an error.

We have also used a callback function for the update key that is called on every frame while the animation is running. We have used it here to update the count of scanned and infected files. However, you could go a step further and show users an error message when the number of infected files goes over a certain threshold.

Array

The ability to specify a JavaScript array as the target comes in handy when you have to animate a bunch of elements that fall under different categories. For example, if you want to animate a DOM node, an object and a bunch of other elements based on CSS selectors, you can do so easily by putting all of them inside an array and then specifying that array as a value for the targets key. The following example should make it clearer:

var multipleAnimations = anime({
  targets: [document.querySelectorAll('.blue'), '.red, #special'],
  translateY: 250
});

Properties That Can Be Animated in Anime.js

Now that you know how to specify different elements that you want to animate, it is time to learn about all the properties and attributes that can be animated using the library.

CSS Properties

Anime.js lets you animate a lot of CSS properties, like the width, height, and color, for different target elements. The final values of different animatable properties like background-color and border-width are specified using a camel case version of that property. Therefore, background-color becomes backgroundColor, and border-width becomes borderWidth. The following code snippet shows how to animate the left position and the background color of a target element in Anime.js.

var animateLeft = anime({
  targets: '.square',
  left: '50%'
});

var animateBackground = anime({
  targets: '.square',
  backgroundColor: '#f96'
});

The properties can accept all kinds of values that they would have accepted when used in regular CSS. For example, the property left could be set to 50vh, 500px, or 25em. You could also specify the value as a bare number. In this case, the number would be converted to a pixel value. Similarly, the background color could be specified as a hexadecimal, RGB or HSL color value.

CSS Transforms

You can also animate different CSS transform properties using Anime.js. Translation along the x and y axes can be achieved using the translateX and translateY properties. Similarly, it is possible to scale, skew or rotate an element along a specific axis by using the scale, skew and rotate property corresponding to that specific axis.

You can specify different angles either in terms or degrees or in terms of turn. The value of 1 turn is equal to 360°. This can make the calculation easier when you know how much you want to turn the elements in terms of complete rotations. The following example shows how to animate the scaling, translation or rotation of an element on an individual basis as well as all at once.

var animateScaling = anime({
  targets: '.square',
  scale: 0.8
});

var animateTranslation = anime({
  targets: '.square',
  translateX: window.innerWidth*0.8
});

var animateRotation = anime({
  targets: '.square',
  rotate: '1turn'
});

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

SVG Attributes

It is possible to animate attributes of different SVG elements using Anime.js. The only condition is that the value of those attributes should be numerical. This ability to animate different attributes opens up the possibility of creating some really cool effects. Since you are just starting to learn about Anime.js, we will keep the examples in this tutorial very basic.

As we move forward, you will learn how to create more complex animations. Here is the code to animate the cx, cy and stroke-width attributes of a circle. Just like the CSS properties, you need to use a camel case version of stroke-width for the code to work.

var animateX = anime({
  targets: '.circle',
  cx: window.innerWidth*0.6
});

var animateStrokeWidth = anime({
  targets: '.circle',
  strokeWidth: '25'
});

DOM Attributes

You can also animate numerical DOM attributes just like you animated the SVG attributes. One situation where animating a DOM attribute can be useful is the HTML5 progress element. This element has two attributes, value and max. In our example, we will be animating the value attribute to show the progress of our file transfer process. Here is the code to animate the value attribute.

var animateProgress = anime({
  targets: 'progress',
  value: 100,
  easing: 'linear'
});

Dynamic Element Selection

We have now learned how to use different types of selectors to target specific group of elements for animation. We also know how to specify the value of different CSS properties that we want to animate.

Lets use this knowledge to show a greeting to our visitors where each word of the greeting fades in and drops from the top. Since we want to animate each word separately, we will have to place each word within its own wrapper span tags. We have done this so far by manually creating a wrapper inside the HTML. Now, we will learn how to let JavaScript take care of the markup. Here is our heading element:

<h1>Have a Great Day Ahead</h1>

There are five separate words in the heading and we will wrap each of them within their own span tags. We can do that with the following JavaScript:

var greeting = document.querySelector('h1');
greeting.innerHTML = greeting.textContent.replace(/(\w+)/g, "<span>$&</span>");

Basically, we are using Regex to identify different words and then wrapping the selection within span tags. The final result is then assigned to the innerHTML of the heading element.

The heading will initially be invisible and fade in while dropping down. This means that the initial opacity of each span tag should be zero. Here is the CSS that we use to style our heading and span tags.

h1 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 8rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  color: white;
}

h1 span {
  opacity: 0;
}

This is the JavaScript that we use to animate the words:

anime({
  targets: 'h1 span',
  opacity: 1,
  translateY: 100,
  delay: anime.stagger(1000)
});

We target the words using h1 span as our selector. The final value of opacity property is set to 1 and each element moves down by 100px from the initial position due to the translateY property. We have also used staggered delay in our animation initialization. You will learn more about staggering in Anime.js in the next tutorial of the series.

Here is a CodePen demo that shows the greeting animation we just created. Click on the Greet Me button to restart the animation.

Final Thoughts

In this tutorial, you learned about all the ways of selecting target elements in Anime.js and how to animate different CSS properties and attributes related to them. At this point, we are not controlling anything related to the actual animation.

In the next tutorial of the series, you will learn how to control the easing, delay and duration of the animation for different properties as a group as well as individually. You will then learn how to control all these animation parameters for individual elements.

If there are any questions related to this tutorial or if you have used Anime.js in any interesting projects, please let us know in the comments.