CountUp

import { animate } from 'framer-motion'
import { useEffect, useRef } from 'react'
 
interface CountUpProps {
  from: number
  to: number
}
 
function CountUp({ from, to }: CountUpProps) {
  const nodeRef = useRef(null)
 
  useEffect(() => {
    const node = nodeRef.current
 
    const controls = animate(from, to, {
      duration: 2.4,
      ease: 'easeOut',
      onUpdate(value) {
        node.textContent = value.toFixed(0)
      },
    })
 
    return () => controls.stop()
  }, [from, to])
 
  return <span ref={nodeRef}>{to}</span>
}
 
export default CountUp

import { animate } from 'framer-motion'
import { useEffect, useRef } from 'react'
 
interface CountUpProps {
  from: number
  to: number
}
 
function CountUp({ from, to }: CountUpProps) {
  const nodeRef = useRef(null)
 
  useEffect(() => {
    const node = nodeRef.current
 
    const controls = animate(from, to, {
      duration: 2.4,
      ease: 'easeOut',
      onUpdate(value) {
        node.textContent = value.toFixed(0)
      },
    })
 
    return () => controls.stop()
  }, [from, to])
 
  return <span ref={nodeRef}>{to}</span>
}
 
export default CountUp

<CountUp from={0} to={100} />

<CountUp from={0} to={100} />