Promise support

Would it be out-of-scope to provide a Promise for animation completion? Something like Web Animations finished Promise:

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});

myAnimation.finished.then(() => {
  /* ... */
});

[tbranyen]

Maybe something like this (inspired by jQuery) could work:

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});

// Wait for the current Promise to complete. Is called recursively
// upon the prior loop's completion.
function animationCompleted() {
  return myAnimation.promise().then(() => {
    console.log('Animation loop finished');
    return animationCompleted();
  });
}

// Kick off infinite-Promise resolution.
animationCompleted();

The promise() invocation would infer a new Promise that will resolve when the current animation completes. If loop: false is set, then the same Promise would be returned.

[rohan-deshpande]

I’ve built a promise based animation class. Works really well. Currently I’ve only got it working with “tweens” not looping animations but I’m working on it. I’m using it with threejs so not for DOM manipulations which is where something like anime is probably better suited.

Anyway the basic premise is that you start the animation and return a promise from that method, then resolve the promise with an end method. In my class the end method is private. There’s a public stop method that can be called which also returns the promise then calls end.

Anyway it’s really useful for chaining, a little cleaner than callback chains in the complete prop. Would be really cool to see anime support promises. It’s such a nice way of animating, makes it easy to do things like

animationA.start().then(function () {
 return animationB.start();
}).then(function () {
 return animationC.start();
}).then(function () {
 console.log('A, B & C are done');
});