requestAnimationFrame usage example

requestAnimationFrame.ts

function animate(animation: AnimationFunction, ...args: unknown[]): Promise<void> {
  let start

  return new Promise<void>((resolve) => {
    function step(timestamp) {
      start ??= timestamp
      const isRunning = animation(timestamp - start, ...args)
      if (isRunning) {
        window.requestAnimationFrame(step)
      } else {
        resolve()
      }
    }

    window.requestAnimationFrame(step)
  })
}

function animation(elapsed: number) {
  const duration = 2000
  const from = 1000
  const to = 9999

  const p = Math.min(elapsed / duration, 1)
  const count = Math.ceil(from + (to - from) * p)

  console.log(count)

  return p < 1
}

animate(animation).then(() => console.debug('Animation completed'))