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} />