Transition numbers over time with easing

numberTransition.js

/*
Options
---
{
  from: 1,                              // <Number> start number, default: 0
  to: 100,                              // <Number> end number, required
  duration: 1000,                       // <Number> total duration on transition, required
  step: console.log,                    // <Function> function to execute on each update, receives current number as argument, required
  ease: x => x,                         // <Function> custom easing function, default: linear
  tick: fn => window.setTimeout(fn, 20) // <Function> ticker, default: requestAnimationFrame
}

Example usage
---
function handleStep (x) {
  console.log(Math.round(x).toLocaleString())
}

function easeInCubic (t) {
  return t * t * t
}

function tick (fn) {
  window.setTimeout(fn, 20)
}

numberTransition({ from: 1, to: 5000, duration: 1000, step: handleStep, ease: easeInCubic, tick })
*/

export default function numberTransition({ from = 0, to, ease = linear, tick = raf, ...rest }) {
  tick(() => next({ startTime: new Date(), delta: to - from, from, ease, tick, ...rest }))
}

function next(args) {
  const { startTime, delta, from, ease, duration, step, tick } = args
  const elapsed = new Date() - startTime
  const factor = Math.min(elapsed / duration, 1)

  step(from + delta * ease(factor))
  if (factor !== 1) {
    tick(() => next(args))
  }
}

function linear (x) {
  return x
}

function raf (fn) {
  window.requestAnimationFrame(fn)
}