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.
