Javascript Animation

Animation.js

static class Easing {
  // no easing, no acceleration
  static linear(t) { return t; }
  // accelerating from zero velocity
  static easeInQuad(t) { return t*t; }
  // decelerating to zero velocity
  static easeOutQuad(t) { return t*(2-t); }
  // acceleration until halfway, then deceleration
  static easeInOutQuad(t) { return t<0.5 ? 2*t*t : -1+(4-2*t)*t; }
  // accelerating from zero velocity 
  static easeInCubic(t) { return t*t*t; }
  // decelerating to zero velocity 
  static easeOutCubic(t) { return (--t)*t*t+1; }
  // acceleration until halfway, then deceleration 
  static easeInOutCubic(t) { return t<0.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; }
  // accelerating from zero velocity 
  static easeInQuart(t) { return t*t*t*t; }
  // decelerating to zero velocity 
  static easeOutQuart(t) { return 1-(--t)*t*t*t; }
  // acceleration until halfway, then deceleration
  static easeInOutQuart(t) { return t<0.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; }
  // accelerating from zero velocity
  static easeInQuint(t) { return t*t*t*t*t; }
  // decelerating to zero velocity
  static easeOutQuint(t) { return 1+(--t)*t*t*t*t; }
  // acceleration until halfway, then deceleration 
  static easeInOutQuint(t) { return t<0.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; }
}

class Animation {
  _value;
  
  static setValue(value) {
    return new Animation(value);
  }
  
  constructor(value) {
    this._value = value;
  }
  
  interpolate(x, y) {
    return x + (this._value * (y-x));
  }
  
  static animate(animation, props) {
    return Animation._animate(animation, props.to, props.duration, props.delay, props.easing);
  }
  
  static _animate(animation, to, duration, delay, easingFunction) {
    return new Promise((resolve) => {
      let from = animation._value;
      let startTime = -1;
      
      setTimeout(_ => {
        startTime = Date.now();
        tick();
      }, delay || 0);

      function tick() {
        let value;
        let spend = Date.now() - startTime;
        if (spend > duration) {
          setValue(to, true);
        }
        var position = spend/duration;
        if (easingFunction && typeof easingFunction === "function"){
          value = from+((to-from))*easingFunction(position);
        }
        else{
          value = from+((to-from)*position);
        }
        setValue(value, false);
      }
      
      function setValue(value, end) {
        try {
          animation._value = value;
          if (end) {
            return resolve();
          }
          requestAnimationFrame(tick);
        }
        catch (e){ reject(e); }
      }
    });
  }
}

class Example {
  transformAnimation = Animation.setValue(0);

  constructor() {
    this.transformAnimation.interpolate(100, 200);
  }

  startTransformAnimation() {
    Animation.animate(this.transformAnimation, {
      to: 1,
      duration: 300,
      easing: Animation.Easing.linear
    }).then(() => {
      console.log('animation end');
    })
  }
}