bendc / animateplus

A+ animation module for the modern web

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Returning a Promise

JSteunou opened this issue · comments

Hi,

first thank you first this jewel, really a saviour!

Could you consider returning a Promise from animate call?

Would solve #6 and allow use of future async / await out of the box.

Agreed. The amount of spaghetti code I wrote trying to do a simple headline rotation sequence has lead me to giving animo a shot instead (it returns a promise, but uses a different approach).

What about using a simple wrapper?

function pranimate(params) {
  return new Promise(function (resolve, reject) {
    params.complete = resolve;
    animate(params);
  });
}
<h1>Hello</h1>
<script> 
  document.addEventListener("DOMContentLoaded", function(event) {    
    pranimate({
      el: "h1",
      translateX: [0, 200],
      duration: 1000
    }).then(function () {
      return pranimate({
        el: "h1",
	translateX: [200, 200],
        translateY: [0, 200],
        duration: 1000
      });
    }).then(function () {
      return pranimate({
        el: "h1",
	translateX: [200, 0],
        translateY: [200, 200],
        duration: 1000
      });
    }).then(function () {
      return pranimate({
        el: "h1",
        translateY: [200, 0],
        duration: 1000
      });
    });
  });
</script>

Fixed in v2.0.0