Specifying target elements in Anime.js?

Anime.js - Interview Questions

To create animations in Anime.js, we must use the callanime() function by passing it with key-value pairs to specify target elements. Once the target element is specified, the attributes can be easily animated using the key. This key tells Anime.js which element needs to be animated. It can accept different formats. Some of the target elements are at this moment discussed below.

CSS Selector : We can easily pass more than one CSS selector to the as targets the value of the key. Below is the example.

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 this code snippet, Anime.js will use the useblueThe class that animates all the elements under it. In the following case, Anime.js will use the userredorblueThe class to specify red or blue to all the elements. Next, it will use subclassessquareAnimation to perform animations to subclasses. The final step includes usage of noredCategorysquareThe to animate the elements category-wise.

DOM node/NodeList : We can use the DOM property to manipulate nodes by using NodeListastargetsThe key. The following code snippets depict its application.

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 this example, we internally used usedgetElementById() function which fetches special elements and querySelector() function to get each blue class element. To match the selector group, we use querySelectorAll() to get all the elements present in the document selector group.

However, we can use as many as other functions to get the target element to animate them. For instance, we can use usegetElementByClasasName() to fetch elements of a specific class and can access usegetElementsByTagName() to fetch tag names. Almost any such function can be used to return the DOM node or NodeList along with the key value.

Object : This option can be used with JavaScript objects that have astargetsThe value is assigned to the key. The key also constitutes values used as identifiers, and these values are later used as numbers that require animation. We can use these numbers to display the animation even in HTML elements. The sample usage of these numbers has been shown in the code snippet below.

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;  
  }  
}); â€‹

In this code snippet, we have used animation numbers ranging from 0 to 1000 and infected files ranging from 0 to 8. Remember, we can only animate them using these absolute values provided in the range. If we try to animate a key from "AAA" to "BOY", it will roll out an error.

In the next instance, we used the correct update key for the callback function that will animate every frame while the animation is running. It is used to update infected and scanned files. We can even go a step further to display an error message to the user if the threshold is reached due to crossing the limit of infected files.

Array : When we want to animate various elements belonging to different categories, there is a need for some function that specified targets; JavaScript arrays come in handy. For instance, if we want to animate a DOM mode based on CSS selectors, we can put all of them in an array and specify astargetThe value to the key so that all elements can be manipulated. Below is the snippet which makes this concept clear.

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