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