animate.js

/*
 * Copyright 2017 dialog LLC <[email protected]>
 * @flow
 */

/* eslint no-mixed-operators:0 */

type Config = {
  start: number,
  end: number,
  duration: number,
  onUpdate: (value: number) => void,
  animation: (x: number) => number
};

function animate(config: Config): void {
  const startTime = Date.now();

  const step = () => {
    const elapsed = Date.now() - startTime;
    if (elapsed >= config.duration) {
      config.onUpdate(config.end);
    } else {
      const animation = config.animation(elapsed / config.duration);

      config.onUpdate(config.start + (config.end - config.start) * animation);

      requestAnimationFrame(step);
    }
  };

  step();
}

export default animate;