[React Scalar/Number Transition using GSAP]

const AnimatedNumber = ({ delay, displayValue, fontSize }) => {
  
  const ref = useRef()
  const foo = useRef({ bar: 0 })

  useEffect(() => {
    gsap.to(foo.current, {
      bar: Math.round(displayValue),
      duration: 1,      
      ease: 'power2.out',
      delay: delay,
      onUpdate: function () {        
        ref.current.innerText = Math.round(foo.current.bar) + '%'
      },
    })
  })

  return (
    <h4 ref={ref} className="font-weight-bold " style={{ fontSize: fontSize }}>
      <span>this will be overridden</span>
    </h4>
  )
}

Thanks for the example @Andrew Harris.

I got better performance by manipulating the dom manually and avoiding using react 's usestate. As i understand it - the useState hook might not run for every update, so your animation can end up looking janky.