What are targets in Anime.js?

What is Anime.js?

Anime.js is a lightweight and easy-to-use JavaScript library for creating animations.

Note: If you are unfamiliar with anime.js, click here to read a basic overview first.

To animate any element, we call the anime() function and pass a parameter object with certain key-value pairsPairs of two related elements 'key' and 'value' where the key defines the value. One of these keys is the targets key.

The value of the targets key is the element or elements we want to animate.

The value can be the following:

• A CSS selector
• A DOM nodeAn object in the DOM or list of DOM nodes
• A JavaScript object
• An array of the previously mentioned values

CSS selector

We can use any CSS selector as a target. This includes class selectors and ID selectors, to name a few.

Note: Click here to learn more about CSS selectors.

However, since pseudo-elementsA keyword attached to a CSS selector that is used to style specific parts of the selected element are not part of the DOM, they can not be selected by JavaScript and are not valid values for the targets key.

Explanation

The above example demonstrates target selection using type, class, and ID. We use a <p> tag and two <div> tags for each selection.

• Line 1–6: We create an animation using the anime() function. We set the targets key to 'p'. This selects all the paragraph elements. The animation itself is a color shift from black to red over three seconds.
• Line 7–12: We create an animation with the targets key set to '.box'. All elements having the box class will be selected for the animation. We specify the animation to change the box's color to green over three seconds.
• Line 13–18: We create an animation with targets key set to '#box2'. Only the element with the ID, box2, will be animated to move vertically.

DOM node or list of DOM nodes

Another way to choose elements for animation is by passing a DOM object or a list of DOM objects as the value for targets.

Explanation

In the above example, we first select objects from the DOM and then apply animations to each object.

• Line 1: We select the element with the ID, bluebox, from the DOM and store it in the blue_box variable.
• Line 2: We select all elements with the pink class from the DOM and store them in pink_boxes.
• Line 3–8: We create an animation with targets set to blue_box. We specify the animation to translate the box left by 500px. As a result, the element with the ID bluebox is translated.
• Line 9–14: We create an animation with targets set to pink_boxes. By this point, pink_boxes is a list of five DOM nodes. We specify the animation to rotate each box by 360 degrees. As a result, all elements with class pink are rotated.

JavaScript object

We can also pass a JavaScript object as a target value. However, the object must contain at least one numerical value.

Explanation

In this example, we animate a simple loading-progress meter.

• Line 1: We select the element with the ID, loadingDisplay, from the DOM. This element will be used to display the JavaScript object that we want to animate.
• Line 2–5: We create a JavaScript object with one numerical value, progress.
• Line 6–15: We create an animation and pass the loading object as a target. We can now specify animations on the numerical values of the loading object. In this case, we want the progress value to transition to 100.
• Line 13–15: We use the update callback to update the p element after each animation frame.

Array

We may also mix and match our method of selecting a target by using an array. The array can consist of any of the previously discussed target values.

Explanation

For this example, we consider a <p> tag, and two <div> tags. Each tag is selected using one of the previously described methods.

• Line 1: We select the element with the ID, box2, from the DOM.
• Line 2: We select the element with the ID, counter, from the DOM. This element will be used to display the JavaScript object (counterObj) that we animate.
• Line 4–6: We create a JavaScript object, counterObj, with a numerical value.
• Line 8–20: We create an animation. For the targets key, we have passed an array consisting of a CSS selector ('.box'), a DOM node (box2), and a JavaScript object (counterObj).
• Line 11–13: We specify the animation to move the boxes vertically downwards and increase the count value of counterObj to 999.