Google News
logo
Anime.js Interview Questions
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'
});
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
});
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
});​
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,
});​
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​
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
});
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;​
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;
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;
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));
};