How to make an animated number counter?

Ask the community
,
21

This is how you should have done:

const createTimer = (element, interval) => (startTime, endTime) => {
  let count = startTime
  const counter = setInterval(() => {
    element.text = count.toLocaleString() // update text
    count++
    count === endTime && clearInterval(counter)
  }, interval)
  return counter
}
$w.onReady(() => {
  const timer1 = createTimer($w('#text57'), 1) // element and interval
  const timer2 = createTimer($w('#text59'), 1) // element and interval
  const timer3 = createTimer($w('#text58'), 100) // element and interval
  
  $w('#text57').onViewportEnter(() => timer1(9456, 10001)) // startTime and endTime
  $w('#text58').onViewportEnter(() => timer2(198650, 200001)) // startTime and endTime
  $w('#text59').onViewportEnter(() => timer3(1, 101)) // startTime and endTime
})