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:
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.
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.
You can pass one or more CSS selectors as a value for the
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
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
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.
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
Any function that returns a DOM node or a NodeList can be used to set the value of the
targets key in Anime.js.
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.
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.
targets key. The following example should make it clearer:
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.
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.
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
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.
You can also animate different CSS transform properties using Anime.js. Translation along the x and y axes can be achieved using the
translateY properties. Similarly, it is possible to scale, skew or rotate an element along a specific axis by using the
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.
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
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.
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
There are five separate words in the heading and we will wrap each of them within their own
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
Here is a CodePen demo that shows the greeting animation we just created. Click on the Greet Me button to restart the animation.
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.