animate-value/dist/animateValue.js

🏃 animates a numeric value

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.animateValue = factory());
}(this, (function () { 'use strict';

var now = (function () {
  return Date.now();
});

var calcStartEnd = (function (delay, duration) {

  var start = delay + now();
  var end = start + duration;

  return { start: start, end: end };
});

var easeIn = (function (power) {
  return function (t) {
    return Math.pow(t, power);
  };
});

var easeOut = (function (power) {
  return function (t) {
    return 1 - Math.abs(Math.pow(t - 1, power));
  };
});

var easeInOut = (function (power) {
  return function (t) {

    if (t < .5) {
      return easeIn(power)(t * 2) / 2;
    } else {
      return easeOut(power)(t * 2 - 1) / 2 + 0.5;
    }
  };
});

// based on these https://gist.github.com/gre/1650294#gistcomment-1806616
// all credit to @lindell

var ease = {

  linear: easeInOut(1),

  easeInQuad: easeIn(2),
  easeOutQuad: easeOut(2),
  easeInOutQuad: easeInOut(2),

  easeInCubic: easeIn(3),
  easeOutCubic: easeOut(3),
  easeInOutCubic: easeInOut(3),

  easeInQuart: easeIn(4),
  easeOutQuart: easeOut(4),
  easeInOutQuart: easeInOut(4),

  easeInQuint: easeIn(5),
  easeOutQuint: easeOut(5),
  easeInOutQuint: easeInOut(5)

};

var calcProgress = (function (start, duration, easing) {

  var prog = (Date.now() - start) / duration;
  return ease[easing](prog);
});

var tick = function tick(data, label, resolve) {
  var _data = data,
      start = _data.start,
      end = _data.end,
      easing = _data.easing,
      to = _data.to,
      from = _data.from,
      duration = _data.duration,
      change = _data.change,
      done = _data.done,
      loop = _data.loop,
      rewind = _data.rewind,
      loopDelay = _data.loopDelay;


  if (start && end) {

    var prog = calcProgress(start, duration, easing);
    data.value = from + (to - from) * prog;

    if (now() <= end) {

      if (change && now() >= start) change(data.value);

      label = requestAnimationFrame(function () {
        return tick(data, label, resolve);
      });
    } else {

      if (change) change(data.to);

      if (loop) {

        if (rewind) {
          var _data2 = data,
              _from = _data2.from,
              _to = _data2.to;


          data.from = _to;
          data.to = _from;
        }

        var _delay = loopDelay;

        data = Object.assign({}, data, calcStartEnd(_delay, duration));

        if (data.iteration) {

          data.iteration += 1;

          var _data3 = data,
              _iteration = _data3.iteration;


          if (rewind) _iteration = _iteration / 2;

          if (loop === true || _iteration <= loop) {
            label = requestAnimationFrame(function () {
              return tick(data, label, resolve);
            });
          } else {
            if (done) done();
            resolve();
          }
        }
      } else {
        if (done) done();
      }
    }
  }
};

var index = (function () {
  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};


  return new Promise(function (resolve) {
    var _options$from = options.from,
        from = _options$from === undefined ? 0 : _options$from,
        _options$to = options.to,
        to = _options$to === undefined ? 1 : _options$to,
        _options$easing = options.easing,
        easing = _options$easing === undefined ? 'easeInQuad' : _options$easing,
        _options$duration = options.duration,
        duration = _options$duration === undefined ? 600 : _options$duration,
        _options$delay = options.delay,
        delay = _options$delay === undefined ? 0 : _options$delay,
        _options$loopDelay = options.loopDelay,
        loopDelay = _options$loopDelay === undefined ? 0 : _options$loopDelay,
        _options$rewind = options.rewind,
        rewind = _options$rewind === undefined ? false : _options$rewind,
        change = options.change,
        done = options.done;
    var _options$loop = options.loop,
        loop = _options$loop === undefined ? 1 : _options$loop;

    if (loop === false) loop = 1;

    var data = {
      from: from,
      to: to,
      duration: duration,
      delay: delay,
      loopDelay: loopDelay,
      loop: loop,
      easing: easing,
      rewind: rewind,
      change: change,
      done: done
    };

    data = Object.assign({}, data, calcStartEnd(delay, duration));
    data.iteration = 1;

    var raf = requestAnimationFrame(function () {
      return tick(data, raf, resolve);
    });
  });
});

return index;

})));