Creating an animation based on JavaScript using the Anime.js library

Anime.js Intro

Anime.js is a small library for creating JavaScript-based animations. With it, you can animate CSS properties, SVG images, or DOM tree attributes on a web page. The library allows you to control all aspects of the animation and provides many ways to designate elements that need to be set in motion.

You completely control the sequence of animation playback and control the synchronization of animation of different elements relative to each other. The library supports all modern browsers, including IE10 and newer.

In this series of tutorials, you’ll learn about all the features of Anime.js and can use the library in your projects.

Note If you are completely new to JavaScript, we invite you to read the introductory article on this programming language.

Library installation

To install, you can use the commands npmor bower:

npm install animejs

bower install animejs

You can also download the library and include it in your project or refer to its latest version via CDN.

After a successful installation, you can use Anime.js to add interesting animations to your elements. Let’s start with the basic library features.

Definition of target elements

To create an animation using Anime.js, you need to call a function anime()and pass an object with key-value pairs that define the target elements and properties that you want to animate. You can use a keyword targetsto make the library understand that you need to animate. This keyword can be in different formats.

CSS selectors : you can pass one or more selectors as values for a keyword targets.

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 elements with a class blue. In the second – blueor red. In the third case, Anime.js will animate all child even elements with a class square. And in the latter case, the library will interact with all elements with a class squarethat do not have a class red.

See the Pen Setting Target as a CSS Selector by Monty (@Shokeen) on CodePen.0

DOM nodes (DOM node) or node collection (NodeList): you can also use a DOM node or a NodeList as a value for a keyword targets. Look at an example of using a DOM node for targets.

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, the function was used getElementById()to refer to a specific element. The function was querySelector()used to refer to the element with the class blue. And the function querySelectorAll() was used to access all elements within the document that correspond to a group of certain selectors or, on the contrary, do not belong to it.

There are many functions that you can also use to select a target element. For example, you can refer to elements with a specific class using a function getElementsByClassName(). Or to elements with a specific tag using a function getElementsByTagName().

Any function that returns a DOM node or a NodeList can be used to set the value targetsin Anime.js.

See the Pen Setting Target as a DOM Node or Node List by Monty (@Shokeen) on CodePen.0

Object: You can use JavaScript objects as values for targets. The key of this 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 additional JavaScript code. Below is an example of the animation of the values of two different keys of the same 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 code above will drive the scan counter from 0 to 1,000 and the infected file count from 0 to 8. Remember that you can only animate numeric values in this way. When you try to animate the key from AAAin, you BOYwill receive an error message.

In addition, the code used a key callback function update, which is called for each frame during the animation. Here it was used to update the number of scanned and infected files. However, you can go ahead and show users an error message when the number of infected files exceeds a certain threshold.

See the Pen Setting Target as an Object by Monty (@Shokeen) on CodePen.0

Array: the ability to specify a JavaScript array as a value targetswill be useful if you need to animate a multitude of elements that fall into different categories. For example, if you want to animate a DOM node, an object, and many other elements based on CSS selectors, you can do this by placing them in an array, and then define an array as the value for targets. The example below should clarify the situation.

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

See the Pen Setting Target as an Array by Monty (@Shokeen) on CodePen.0

What properties can you animate with Anime.js

Now you know how to identify the different elements that need to be animated. It’s time to find out which properties and attributes can be animated using the library.

CSS properties

These include, for example, width, height and color for different target elements. The final values of different animated properties are background-colordefined using lowerCamelCase. Thus background-colorturns into backgroundColor. The code below illustrates the animation of the object’s position left and background color ( backgroundColor) of the target object.

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

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

See the Pen Animating CSS Properties in Anime.js by Monty (@Shokeen) on CodePen.0

Properties can take on different kinds of values that they would accept using regular CSS. For example, the property leftmay have such values 50vh, 500pxor 25em. You can also omit the unit after the number, but in this case it will become pxthe default. Similar actions can be performed with background-color, specifying the color in the form of a hexadecimal value or using the RGB or HSL code.

CSS transform

Conversion along the X and Y axes is achieved using the translateXand properties translateY. Similarly, you can scale, tilt or rotate an element along a specific axis using the properties: scale(scaling), skew(tilting) or rotate(rotating) corresponding to that particular axis.

It is possible to define different angles either in degrees or using a property turn. A turn value of 1 corresponds to 360 degrees. This allows you to make calculations easier, because you know how much you need to rotate the elements about its axis. The example below shows how the animation of scaling, transition, or rotation of a single property, or 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' });

See the Pen Animating CSS Transforms in Anime.js by Monty (@Shokeen) on CodePen.0

SVG attributes

The only condition is that the value of the attributes must be numeric. The ability to animate various attributes opens up possibilities for creating some cool effects. Since this article is an introductory article, it will provide simple examples.

As you go deeper into the library, you will learn how to create more complex animations. Below is the code for animating the attributes of a circle cy, cxand stroke-width. As with other CSS properties, you stroke-widthmust use CamelCase for the code to work correctly.

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

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

See the Pen Animating SVG Attributes in Anime.js by Monty (@Shokeen) on CodePen.0

DOM Attributes

You can animate numeric DOM attributes just like you animated SVG attributes. This can be useful for working with an element progressin HTML5 . It has two attributes: valueand max. In the example below value, the attribute will be animated to demonstrate the progress of moving the file to the hard disk.

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

Conclusion

You learned about all the options for selecting elements in Anime.js, and also learned how to animate different CSS properties and attributes associated with them.

In the next article, you will learn how to control the smoothness, delay, and duration of the animation for both individual properties and for a group. Then you learn to control all these parameters for each individual item.

The post Creating an animation based on JavaScript using the Anime.js library appeared first on Creador.