Google News
logo
Anime.js Interview Questions
Anime.js is a small, lightweight JavaScript library with a simple and small powerful API. It works with the DOM element, CSS, and JavaScript object.
 
Prerequisite :  
* HTML, CSS, JavaScript
* Basic of Animation
Anime.js is a  lightweight JavaScript library with a simple and small powerful API. It works with the DOM element, CSS, and JavaScript object.
 
Prerequisites :
 
* Basic knowledge of HTML
* Basic knowledge of CSS
* Basic knowledge of Javascript
There are two ways to use anime.js in your project:
 
Step 1 : You can download the anime.min.js file and directly use it.

Download
* Via npm
$ npm install animejs --save
or manual download.
 
Usage

* ES6 modules
import anime from 'animejs/lib/anime.es.js';
* CommonJS
const anime = require('animejs');
* File include
 
Link anime.min.js in your HTML :
<script src="anime.min.js"></script>
 


Step 2 : Just google anime.js CDN and you will get the link and just put it in your script tag as shown below.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js”></script>​

Example :

Hello world
anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});​
 
targets : The Css Selectors to target and identify on which animation has to apply.

duration : Time in milliseconds for which animation should last.

delay : Time in milliseconds after which animation starts.

translateX :  Places element at that x coordinate.

translateY : Places element at Y coordinate.

offset : This gives delay between different animations. i.e. to start another animation after x seconds of the previous one.
This is a simple webPage. All we need to do is create a project and inside it create an HTML File named index.html.
mkdir animation && cd animation
touch index.html 
Example 1 :
 
Save index.html file :
<!DOCTYPE html>
<html>
   <head>
      <title>A nice example for timeline</title>
      <script src=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js">
      </script>
      <style>
         html{
         min-height: 200vh;
         }
         .ball {
         width: 60px;
         height: 60px;
         margin-top: 120px;
         margin-left:200px;
         border-radius: 50%;
         background-color: pink;
         float: left;
         }
      </style>
   </head>
   <body>
      <body>
         <div class="ball first"></div>
         <div class="ball second"></div>
         <div class="ball third"></div>
         <script>
            let animation = anime.timeline({
            duration: 500, 
            easing: 'easeInOutSine',
            direction: 'alternate',  
            autoplay:false,
            loop: true
            });           
              
            animation.add({
            targets: '.first',
            translateY: -50,
            backgroundColor: 'rgb(255, 0, 0)'
            }).add({
            targets: '.second',
            translateY: -50,
            backgroundColor: 'rgb(0, 255, 0)'
            }).add({
            targets: '.third',
            translateY: -50,
            backgroundColor: 'rgb(0, 0, 255)'
            });
            window.onscroll=()=>{
            animation.play();
            }
         </script>
   </body>
</html>

 

Output : Click on index.html to open it in browser :

Anime JS
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  
});  
Now that we are familiar with the different target element specifications that we want to animate, it is the right time to learn more about specific properties and attributes than animate with Anime.js.
 
CSS Properties : Anime.js allows us to animate various CSS properties like color, width, and height for different target elements. The final values are specified using a camel case version that specifies background color, border-radius, etc. For instance, consider we are using background color. Hence, after camel casing, it becomes backgroundColor, and for border radius, it becomes border-radius. See the below code snippet of how these CSS properties work.
var animateLeft = anime({  
  targets: '.square',  
  left: '50%'  
});  
   
var animateBackground = anime({  
  targets: '.square',  
  backgroundColor: '#f96'  
}); ​
 
The above-shown properties can accept various types of values in regular CSS. For instance, we can change the attribute to 50vh or 500px, or 25em. All of these formats are acceptable in CSS properties. We can specify these values as a bare number with instances like background color in hexadecimal, RGB, or HSL values.
 
CSS Conversion : We can use Anime.js to animate different transition properties in CSS. This can be done using use translateX with translateY properties along with an axis centered to X and Y. Similarly, skewwithrotateThe value can be used with scale and can be rotated along a specific axis. Moreover, for angle properties, orturnAngle can be used to specify a revolution which is 360 degrees. This helps us to make calculations easier. Below is a sample code snippet that shows how to animate the zoom, translate or rotate an element with all these animations taking place 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'  
}); ​
 
SVG Attributes : We can make use of Anime.js even to animate SVG elements. The only condition that we need to follow is to keep the value of the attributes in numbers. The usage of numbers makes it relatively easy to animate some excellent stuff, which seems complicated with average SVG properties. Let's visualize this using a sample code snippet shown below.
var animateX = anime({  
  targets: '.circle',  
  cx: window.innerWidth*0.6  
});  
   
var animateStrokeWidth = anime({  
  targets: '.circle',  
  strokeWidth: '25'  
});​
  
In the example snippet, it is finely illustrated how numbers can be put to use in SVG elements. Although to create more complex animations, we can opt for rounds, cywithstroke-width for the property animation. Just like we use CSS properties, we can use usesstroke-widthThe camel case version to make our code work out.
 
DOM Attributes : DOM attributes can also be easily animated, just like SVG attributes. One example where the DOM attribute can be animated is the HTML5 progress element. This element can have two attributes like valuewithmax and valuewithmin. In the below example, it is shown how the file transfer progress animation takes place. It will make the use of makevalueThe code for the property animation.
var animateProgress = anime({  
  targets: 'progress',  
  value: 100,  
  easing: 'linear'  
}); ​
 
It's possible to specify different timing for each transforms properties, more details in the specific property parameters section.

Valid properties Default unit
'translateX' 'px'
'translateY' 'px'
'translateZ' 'px'
'rotate' 'deg'
'rotateX' 'deg'
'rotateY' 'deg'
'rotateZ' 'deg'
'scale'
'scaleX'
'scaleY'
'scaleZ'
'skew' 'deg'
'skewX' 'deg'
'skewY' 'deg'
'perspective' 'px'

Example :

anime({
  targets: '.css-transforms-demo .el',
  translateX: 250,
  scale: 2,
  rotate: '1turn'
});​
Any Object property containing a numerical value can be animated.

Example value
prop1 50
'prop2' '100%'

Example : 
var objPropLogEl = document.querySelector('.js-object-log');

var myObject = {
  prop1: 0,
  prop2: '0%'
}

anime({
  targets: myObject,
  prop1: 50,
  prop2: '100%',
  easing: 'linear',
  round: 1,
  update: function() {
    objPropLogEl.innerHTML = JSON.stringify(myObject);
  }
});
Duration : Defines the duration in milliseconds of the animation.


Type Default Example
Number 1000 3000
anime.stagger See staggering section anime.stagger(150)
Function See function based parameters section (el, i) => i * 150

Example :
anime({
  targets: '.duration-demo .el',
  translateX: 250,
  duration: 3000
});


Delay : Defines the delay in milliseconds of the animation.


Type Default Example
Number 0 1000
anime.stagger See staggering section anime.stagger(150)
Function See function based parameters section (el, i) => i * 150

Example : 
anime({
  targets: '.delay-demo .el',
  translateX: 250,
  delay: 1000
});


End Delay :  Adds some extra time in milliseconds at the end of the animation.
 
Type Default Example
Number 0 1000
anime.stagger See staggering section anime.stagger(150)
Function See function based parameters section (el, i) => i * 150

Example :
anime({
  targets: '.end-delay-demo .el',
  translateX: 250,
  endDelay: 1000,
  direction: 'alternate'
});


Easing : Defines the timing function of the animation.


Type Default Example
String 'easeOutElastic(1, .5)' easing: 'easeInOutQuad'

Example : 
anime({
  targets: '.easing-demo .el',
  translateX: 250,
  easing: 'easeInOutExpo'
});


Round : Rounds up the value to x decimals.


Type Default Example
Number 0 round: 10

Example : 
var roundLogEl = document.querySelector('.round-log');

anime({
  targets: roundLogEl,
  innerHTML: [0, 10000],
  easing: 'linear',
  round: 10 // Will round the animated value to 1 decimal
});


Specific Property Parameters : 
Defines specific parameters to each property of the animation using an Object as value.
Other properties that aren't specified in the Object are inheritted from the main animation.


Type Example
Object rotate: { value: 360, duration: 1800, easing: 'easeInOutSine' }

Example : 
anime({
  targets: '.specific-prop-params-demo .el',
  translateX: {
    value: 250,
    duration: 800
  },
  rotate: {
    value: 360,
    duration: 1800,
    easing: 'easeInOutSine'
  },
  scale: {
    value: 2,
    duration: 1600,
    delay: 800,
    easing: 'easeInOutQuart'
  },
  delay: 250 // All properties except 'scale' inherit 250ms delay
});

Function Based Parameters :

Get different values for every target and property of the animation.
The function accepts 3 arguments :

Arguments Infos
target The curent animated targeted element
index The index of the animated targeted element
targetsLength The total number of animated targets

Example : 
anime({
  targets: '.function-based-params-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  delay: function(el, i, l) {
    return i * 100;
  },
  endDelay: function(el, i, l) {
    return (l - i) * 100;
  }
});