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