HTML
   HTML5
   CSS
   CSS3
   JavaScript
   jQuery
   AngularJS
   Articles
   Tech Articles
   Blog
Google News
logo
Anime.js Interview Questions
1 .
What is Anime.js?
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
2 .
How to create Timeline Animations using Anime.js?
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
3 .
How to Installation of anime.js?
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
});​
 
4 .
What are the basic properties used in anime.js?
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.
5 .
How to Creating an application and Project structure in Anime.js?
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
6 .
Specifying target elements in 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  
});
7 .
Animatable attributes in Anime.js
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'  
}); ​
 
8 .
Animate CSS transforms properties individually.
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'
});​
9 .
What is the Object property in Anime.js?
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);
  }
});
10 .
What are the property parameters in Anime.js?
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;
  }
});
11 .
What are the animation parameters in Anime.js?
Direction : Defines the direction of the animation.0
Accepts Infos
'normal' Animation progress goes from 0 to 100%
'reverse' Animation progress goes from 100% to 0%
'alternate' Animation progress goes from 0% to 100% then goes back to 0%

Example : 
 
anime({
  targets: '.dir-normal',
  translateX: 250,
  easing: 'easeInOutSine'
});

anime({
  targets: '.dir-reverse',
  translateX: 250,
  direction: 'reverse',
  easing: 'easeInOutSine'
});

anime({
  targets: '.dir-alternate',
  translateX: 250,
  direction: 'alternate',
  easing: 'easeInOutSine'
});


Loop : Defines the number of iterations of your animation.

Accepts Infos
Number The number of iterations
true Loop indefinitely

Example : 

anime({
  targets: '.loop',
  translateX: 270,
  loop: 3,
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-infinity',
  translateX: 270,
  loop: true,
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-reverse',
  translateX: 270,
  loop: 3,
  direction: 'reverse',
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-reverse-infinity',
  translateX: 270,
  direction: 'reverse',
  loop: true,
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-alternate',
  translateX: 270,
  loop: 3,
  direction: 'alternate',
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-alternate-infinity',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutSine'
});



Autoplay : Defines if the animation should automatically starts or not.

Accepts Infos
true Automatically starts the animation
false Animation is paused by default

Example : 
 
anime({
  targets: '.autoplay-true',
  translateX: 250,
  autoplay: true,
  easing: 'easeInOutSine'
});

anime({
  targets: '.autoplay-false',
  translateX: 250,
  autoplay: false,
  easing: 'easeInOutSine'
});
12 .
What are the Values in Anime.js?
Unitless : If the original value has a unit, it will be automatically added to the animated value.

Type Example
Number translateX: 250

Example : 
anime({
  targets: '.unitless-values-demo .el',
  translateX: 250, // -> '250px'
  rotate: 540 // -> '540deg'
});


Specific Unit : Forces the animation to use a certain unit and will automatically convert the initial target value.

Type Example
String width: '100%'

Example : 
 
anime({
  targets: '.specific-unit-values-demo .el',
  width: '100%', // -> from '28px' to '100%',
  easing: 'easeInOutQuad',
  direction: 'alternate',
  loop: true
});


Relative : Adds, substracts or multiplies the original value.

Accepts Effect Example
'+=' Add '+=100'
'-=' Substract '-=2turn'
'*=' Multiply '*=10'

Example : 
 
var relativeEl = document.querySelector('.el.relative-values');
relativeEl.style.transform = 'translateX(100px)';

anime({
  targets: '.el.relative-values',
  translateX: {
    value: '*=2.5', // 100px * 2.5 = '250px'
    duration: 1000
  },
  width: {
    value: '-=20px', // 28 - 20 = '8px'
    duration: 1800,
    easing: 'easeInOutSine'
  },
  rotate: {
    value: '+=2turn', // 0 + 2 = '2turn'
    duration: 1800,
    easing: 'easeInOutSine'
  },
  direction: 'alternate'
});


Color : anime.js accepts and converts Hexadecimal, RGB, RGBA, HSL, and HSLA color values.
  * CSS color codes ( e.g. : 'red', 'yellow', 'aqua' ) are not supported.

Accepts Example
Hexadecimal '#FFF' or '#FFFFFF'
RGB 'rgb(255, 255, 255)'
RGBA 'rgba(255, 255, 255, .2)'
HSL 'hsl(0, 100%, 100%)'
HSLA 'hsla(0, 100%, 100%, .2)'

Example : 
 
var colorsExamples = anime.timeline({
  endDelay: 1000,
  easing: 'easeInOutQuad',
  direction: 'alternate',
  loop: true
})
.add({ targets: '.color-hex',  background: '#FFF' }, 0)
.add({ targets: '.color-rgb',  background: 'rgb(255,255,255)' }, 0)
.add({ targets: '.color-hsl',  background: 'hsl(0, 100%, 100%)' }, 0)
.add({ targets: '.color-rgba', background: 'rgba(255,255,255, .2)' }, 0)
.add({ targets: '.color-hsla', background: 'hsla(0, 100%, 100%, .2)' }, 0)
.add({ targets: '.colors-demo .el', translateX: 270 }, 0);


From To : Forces the animation to start at a specified value.

Type Example
Array ['50%', '100%']

Example : 
 
anime({
  targets: '.el.from-to-values',
  translateX: [100, 250], // from 100 to 250
  delay: 500,
  direction: 'alternate',
  loop: true
});


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

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

Example : 
 
anime({
  targets: '.function-based-values-demo .el',
  translateX: function(el) {
    return el.getAttribute('data-x');
  },
  translateY: function(el, i) {
    return 50 + (-50 * i);
  },
  scale: function(el, i, l) {
    return (l - i) + .25;
  },
  rotate: function() { return anime.random(-360, 360); },
  borderRadius: function() { return ['50%', anime.random(10, 35) + '%']; },
  duration: function() { return anime.random(1200, 1800); },
  delay: function() { return anime.random(0, 400); },
  direction: 'alternate',
  loop: true
});
13 .
What are the Keyframes in Anime.js?
Animation keyframes : Animation keyframes are defined using an Array, within the keyframes property.
 Note : If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation's total duration divided by the number of keyframes.
Type Example
Array [ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000} ]

Example : 
anime({
  targets: '.animation-keyframes-demo .el',
  keyframes: [
    {translateY: -40},
    {translateX: 250},
    {translateY: 40},
    {translateX: 0},
    {translateY: 0}
  ],
  duration: 4000,
  easing: 'easeOutElastic(1, .8)',
  loop: true
});​

 

Property Keyframes : Similar to animation keyframes, property keyframes are defined using an Array of property Object. Property keyframes allow overlapping animations since each property have its own keyframes array.

Type Example
Array [ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000} ]

Example : 
anime({
  targets: '.property-keyframes-demo .el',
  translateX: [
    { value: 250, duration: 1000, delay: 500 },
    { value: 0, duration: 1000, delay: 500 }
  ],
  translateY: [
    { value: -40, duration: 500 },
    { value: 40, duration: 500, delay: 1000 },
    { value: 0, duration: 500, delay: 1000 }
  ],
  scaleX: [
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
    { value: 1, duration: 900 },
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
    { value: 1, duration: 900 }
  ],
  scaleY: [
    { value: [1.75, 1], duration: 500 },
    { value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },
    { value: 1, duration: 450 },
    { value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
    { value: 1, duration: 450 }
  ],
  easing: 'easeOutElastic(1, .8)',
  loop: true
});​
14 .
What are the TIMELINE BASICS in Anime.js?
Timelines let you synchronise multiple animations together.
By default each animation added to the timeline starts after the previous animation ends.
 
Creating a timeline :
var myTimeline = anime.timeline(parameters);
Argument Type Info Required
parameters Object The default parameters of the timeline inherited by children No

Adding animations to a timeline :
myTimeline.add(parameters, offset);

 

Argument Types Info Required
parameters Object The child animation parameters, override the timeline default parameters Yes
time offset String or Number Check out the Timeline offsets section No

Example : 
// Create a timeline with default parameters
var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

// Add children
tl
.add({
  targets: '.basic-timeline-demo .el.square',
  translateX: 250,
})
.add({
  targets: '.basic-timeline-demo .el.circle',
  translateX: 250,
})
.add({
  targets: '.basic-timeline-demo .el.triangle',
  translateX: 250,
});​
15 .
What is the Time offsets in Anime.js?
Time offsets can be specified with a second optional parameter using the timeline .add() function. It defines when a animation starts in the timeline, if no offset is specifed, the animation will starts after the previous animation ends.

An offset can be relative to the last animation or absolute to the whole timeline.

Type Offset Example Infos
String '+=' '+=200' Starts 200ms after the previous animation ends
String '-=' '-=200' Starts 200ms before the previous animation ends
Number Number 100 Starts at 100ms, reagardless of the animtion position in the timeline

Example : 
// Create a timeline with default parameters
var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

tl
.add({
  targets: '.offsets-demo .el.square',
  translateX: 250,
})
.add({
  targets: '.offsets-demo .el.circle',
  translateX: 250,
}, '-=600') // relative offset
.add({
  targets: '.offsets-demo .el.triangle',
  translateX: 250,
}, 400); // absolute offset​
16 .
What is the parameters instance timeline in Anime.js?
Some parameters set in the parent timeline instance can be inherited by all the children.

* targets
* easing
* duration
* delay
* endDelay
* round
var tl = anime.timeline({
  targets: '.params-inheritance-demo .el',
  delay: function(el, i) { return i * 200 },
  duration: 500, // Can be inherited
  easing: 'easeOutExpo', // Can be inherited
  direction: 'alternate', // Is not inherited
  loop: true // Is not inherited
});

tl
.add({
  translateX: 250,
  // override the easing parameter
  easing: 'spring',
})
.add({
  opacity: .5,
  scale: 2
})
.add({
  // override the targets parameter
  targets: '.params-inheritance-demo .el.triangle',
  rotate: 180
})
.add({
  translateX: 0,
  scale: 1
});
17 .
What are the PLAY/PAUSE Controls in Anime.js?
Plays a paused animation, or starts the animation if the autoplay parameters is set to false.
animation.play();
Pauses a running animation.
animation.pause();

 

Example : 
var animation = anime({
  targets: '.play-pause-demo .el',
  translateX: 270,
  delay: function(el, i) { return i * 100; },
  direction: 'alternate',
  loop: true,
  autoplay: false,
  easing: 'easeInOutSine'
});

document.querySelector('.play-pause-demo .play').onclick = animation.play;
document.querySelector('.play-pause-demo .pause').onclick = animation.pause;​
18 .
What is the RESTART Control in Anime.js?
Restarts an animation from its initial values.
animation.restart();

 

Example : 
var animation = anime({
  targets: '.restart-demo .el',
  translateX: 250,
  delay: function(el, i) { return i * 100; },
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutSine'
});

document.querySelector('.restart-demo .restart').onclick = animation.restart;
19 .
What is the REVERSE Control in Anime.js?
Reverses the direction of an animation.
animation.reverse();
Example : 
var animation = anime({
  targets: '.reverse-anim-demo .el',
  translateX: 270,
  loop: true,
  delay: function(el, i) { return i * 200; },
  easing: 'easeInOutSine'
});

document.querySelector('.reverse-anim-demo .reverse').onclick = animation.reverse;
20 .
What is the SEEK Control in Anime.js?
Jump to a specific time (in milliseconds).
animation.seek(timeStamp);
Can also be used to control an animation while scrolling.
animation.seek((scrollPercent / 100) * animation.duration);
Example : 
var animation = anime({
  targets: '.seek-anim-demo .el',
  translateX: 270,
  delay: function(el, i) { return i * 100; },
  elasticity: 200,
  easing: 'easeInOutSine',
  autoplay: false
});

var seekProgressEl = document.querySelector('.seek-anim-demo .progress');
seekProgressEl.oninput = function() {
  animation.seek(animation.duration * (seekProgressEl.value / 100));
};
21 .
What are the TIMELINE CONTROLS in Anime.js?
Timelines can be controled like any other anime.js instance.
timeline.play();
timeline.pause();
timeline.restart();
timeline.seek(timeStamp);
Example : 
var controlsProgressEl = document.querySelector('.timeline-controls-demo .progress');

var tl = anime.timeline({
  direction: 'alternate',
  loop: true,
  duration: 500,
  easing: 'easeInOutSine',
  update: function(anim) {
    controlsProgressEl.value = tl.progress;
  }
});

tl
.add({
  targets: '.timeline-controls-demo .square.el',
  translateX: 270,
})
.add({
  targets: '.timeline-controls-demo .circle.el',
  translateX: 270,
}, '-=100')
.add({
  targets: '.timeline-controls-demo .triangle.el',
  translateX: 270,
}, '-=100');

document.querySelector('.timeline-controls-demo .play').onclick = tl.play;
document.querySelector('.timeline-controls-demo .pause').onclick = tl.pause;
document.querySelector('.timeline-controls-demo .restart').onclick = tl.restart;

controlsProgressEl.addEventListener('input', function() {
  tl.seek(tl.duration * (controlsProgressEl.value / 100));
});
22 .
What are the begin() and complete() callbacks in Anime.js?
begin() callback is triggered once, when the animation starts playing.
 
complete() callback is triggered once, when the animation is completed.
 
Both begin() and complete() callbacks are called if the animation's duration is 0.

Type Parameters Info
Function animation Return the current animation Object

Example : 
 
anime({
  targets: '.begin-complete-demo .el',
  translateX: 240,
  delay: 1000,
  easing: 'easeInOutCirc',
  update: function(anim) {
    progressLogEl.value = 'progress : ' + Math.round(anim.progress) + '%';
    beginLogEl.value = 'began : ' + anim.began;
    completeLogEl.value = 'completed : ' + anim.completed;
  },
  begin: function(anim) {
    beginLogEl.value = 'began : ' + anim.began;
  },
  complete: function(anim) {
    completeLogEl.value = 'completed : ' + anim.completed;
  }
});
23 .
What are the loopBegin() and loopComplete() callbacks in Anime.js?
* loopBegin() callback is triggered once everytime a loop begin.
 
* loopComplete() callback is triggered once everytime a loop is completed.

Type Parameters Info
Function animation Return the current animation Object

Example : 
 
var loopBegan = 0;
var loopCompleted = 0;

anime({
  targets: '.loopBegin-loopComplete-demo .el',
  translateX: 240,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutCirc',
  loopBegin: function(anim) {
    loopBegan++;
    beginLogEl.value = 'loop began : ' + loopBegan;
  },
  loopComplete: function(anim) {
    loopCompleted++;
    completeLogEl.value = 'loop completed : ' + loopCompleted;
  }
});
24 .
What are the changeBegin() and changeComplete() callbacks in Anime.js?
* changeBegin() callback is triggered everytime the animation starts changing.
 
* changeComplete() callback is triggered everytime the animation stops changing.
 
Note : Animation direction will affect the order in which changeBegin() and changeComplete() are triggerd.

Type Parameters Info
Function animation Return the current animation Object

Example : 
 
var changeBegan = 0;
var changeCompleted = 0;

anime({
  targets: '.changeBegin-chnageComplete-demo .el',
  translateX: 240,
  delay: 1000,
  endDelay: 1000,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutCirc',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  },
  changeBegin: function(anim) {
    changeBegan++;
    beginLogEl.value = 'change began : ' + changeBegan;
  },
  changeComplete: function(anim) {
    changeCompleted++;
    completeLogEl.value = 'change completed : ' + changeCompleted;
  }
});
25 .
What is the FINISHED PROMISE in Anime.js?
Every animation instances return a finished promise when the animation finised.
animation.finished.then(function() {
  // Do things...
});
Note : Promises are not suported in IE < 11.

Example : 
var progressLogEl = document.querySelector('.promise-demo .progress-log');
var promiseEl = document.querySelector('.promise-demo .el');
var finishedLogEl = document.querySelector('.promise-demo .finished-log');
var demoPromiseResetTimeout;

function logFinished() {
  anime.set(finishedLogEl, {value: 'Promise resolved'});
  anime.set(promiseEl, {backgroundColor: '#18FF92'});
}

var animation = anime.timeline({
  targets: promiseEl,
  delay: 400,
  duration: 500,
  endDelay: 400,
  easing: 'easeInOutSine',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  }
}).add({
  translateX: 250
}).add({
  scale: 2
}).add({
  translateX: 0
});

animation.finished.then(logFinished);
26 .
What is the SVG Motion Path in Anime.js?
Animates an element relative to the x, y and angle values of an SVG path element.
var myPath = anime.path('svg path');
The path function returns a new Function that returns the specified property.
 
Note : Motion path animations are responsive since v3

Parameters Example Info
'x' myPath('x') Return the current x value in 'px' of the SVG path
'y' myPath('y') Return the current y value in 'px' of the SVG path
'angle' myPath('angle') Return the current angle value in 'degrees' of the SVG path

Example : 
 
var path = anime.path('.motion-path-demo path');

anime({
  targets: '.motion-path-demo .el',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 2000,
  loop: true
});
27 .
What is the SVG Morphing in Anime.js?
Creates transition between two svg shapes.
 
Note : Shapes must have the same number of points!

Example : 
anime({
  targets: '.morphing-demo .polymorph',
  points: [
    { value: [
      '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369',
      '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369']
    },
    { value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' },
    { value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' },
    { value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' }
  ],
  easing: 'easeOutQuad',
  duration: 2000,
  loop: true
});
28 .
What is the Line Drawing in Anime.js?
Creates path drawing animation using the 'stroke-dashoffset' property.

Set the path 'dash-offset' value with anime.setDashoffset() in a from to formated value.
strokeDashoffset: [anime.setDashoffset, 0]
Example : 
anime({
  targets: '.line-drawing-demo .lines path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: function(el, i) { return i * 250 },
  direction: 'alternate',
  loop: true
});
29 .
What are the Penner's Easing Functions in Anime.js?
Penner's easing functions : 
easing: 'easeInOutSine'
Availabe easings :
 
in out in-out out-in
'easeInQuad' 'easeOutQuad' 'easeInOutQuad' 'easeOutInQuad'
'easeInCubic' 'easeOutCubic' 'easeInOutCubic' 'easeOutInCubic'
'easeInQuart' 'easeOutQuart' 'easeInOutQuart' 'easeOutInQuart'
'easeInQuint' 'easeOutQuint' 'easeInOutQuint' 'easeOutInQuint'
'easeInSine' 'easeOutSine' 'easeInOutSine' 'easeOutInSine'
'easeInExpo' 'easeOutExpo' 'easeInOutExpo' 'easeOutInExpo'
'easeInCirc' 'easeOutCirc' 'easeInOutCirc' 'easeOutInCirc'
'easeInBack' 'easeOutBack' 'easeInOutBack' 'easeOutInBack'
'easeInBounce' 'easeOutBounce' 'easeInOutBounce' 'easeOutInBounce'

Example : 
 
var demoContentEl = document.querySelector('.penner-equations-demo');
var fragment = document.createDocumentFragment();
var easingNames = [
  'easeInQuad',
  'easeInCubic',
  'easeInQuart',
  'easeInQuint',
  'easeInSine',
  'easeInExpo',
  'easeInCirc',
  'easeInBack',
  'easeOutQuad',
  'easeOutCubic',
  'easeOutQuart',
  'easeOutQuint',
  'easeOutSine',
  'easeOutExpo',
  'easeOutCirc',
  'easeOutBack',
  'easeInBounce',
  'easeInOutQuad',
  'easeInOutCubic',
  'easeInOutQuart',
  'easeInOutQuint',
  'easeInOutSine',
  'easeInOutExpo',
  'easeInOutCirc',
  'easeInOutBack',
  'easeInOutBounce',
  'easeOutBounce',
  'easeOutInQuad',
  'easeOutInCubic',
  'easeOutInQuart',
  'easeOutInQuint',
  'easeOutInSine',
  'easeOutInExpo',
  'easeOutInCirc',
  'easeOutInBack',
  'easeOutInBounce',
]

function createEasingDemo(easing) {
  var demoEl = document.createElement('div');
  demoEl.classList.add('el', 'square', 'stretched', 'easing-'+easing);
  anime({
    targets: demoEl,
    translateY: [50, -50],
    direction: 'alternate',
    loop: true,
    delay: 100,
    endDelay: 100,
    duration: 1000,
    easing: easing
  });
  fragment.appendChild(demoEl);
}

easingNames.forEach(function(easeName) {
  createEasingDemo(easeName);
});

demoContentEl.innerHTML = '';
demoContentEl.appendChild(fragment);
30 .
What is the Suspend on Visibility Change in Anime.js?
anime.suspendWhenDocumentHidden = false; // default true
By default all animations are paused when switching tabs, useful if you want to make sure the user sees everything and doesn't miss an important part of your animation.

But you can choose to let the animation runs normally without any pause, like a video or an audio track that can continuously plays in the background.
 
Example : 
var visibilitychangeLogEl = document.querySelector('.visibilitychange-log');

anime({
  targets: '.visibilitychange-demo .el',
  translateX: 270,
  direction: 'alternate',
  easing: 'easeInOutQuad',
  loop: true,
  duration: 2000,
  update: function(a) {
    visibilitychangeLogEl.innerHTML = 'animation progress ' + Math.round(a.progress);
  }
});
Advertisement