Anime.js, A Simple Way of Adding Animation to Your JavaScript Project

Author: Leonides Lemus

Whats is Anime.js? Anime.js is a library of code that allows you, the programmer, to add animation into your JavaScript project. Let’s see how Anime.js works.

anime({
  targets: '.css-selector-demo .el',
  translateX: 250
});

This is a basic outline of what code Anime.js imports. This calls an anime method. Inside this method, we have an object with certain instructions that Anime.js needs for the method to work. First we grab our targets for what we want to animate. As you can see, we are able to use CSS Selectors to pick what we want to animate. Since CSS is a wide spread coding language, it is very easy for many programmers to be able to get the hang of this JavaScript Library. Next we see an object key called translateX. This is telling JavaScript to animate our target(s) moving 250 along the x-axis. Now that you have been walked through the code, check out the visualization of what this code does below.

This animation only runs once but it can be change to loop. This is a powerful library if you want to add more spice to your JavaScript projects. I hope that with this brief introduction of Anime.js you would have gain some interest in this library and might be willing to use it in your next projects. the documentation and instructions to download this library are located on this website: https://animejs.com/ . You can also find great example made by other programmers at: https://codepen.io/collection/XLebem/?cursor=ZD0wJm89MCZwPTEmdj00

Source(s): https://animejs.com/documentation/