Meoki

Hi everyone, I'm hoping to get some help with an issue I'm encountering while using GSAP. I've been trying to implement an animation using GSAP, but it doesn't seem to be working as expected. I have a few components that use GSAP, such as: function LargeText() { useGSAP(() => { const textElements = gsap.utils.toArray('.text'); const imgElement = imgRef.current; textElements.forEach((text) => { gsap.to(text, { backgroundSize: '100%', ease: 'none', scrollTrigger: { trigger: text, scrub: true, }, }); }); }, []); return ( <div className="largeText"> <div className="container"> <h1 className="text">Vietnam</h1> <h1 className="text">light novel</h1> <h1 className="text">ranking</h1> </div> </div> ); } Everything works fine, but after I configured FontFaceObserver to preload fonts like this: import FontFaceObserver from 'fontfaceobserver'; const font1 = new FontFaceObserver('Playfair Display'); const font2 = new FontFaceObserver('Lexend'); const font3 = new FontFaceObserver('Phudu'); const root = ReactDOM.createRoot(document.getElementById('root')); Promise.all([font1.load(), font2.load(), font3.load()]).then(() => { root.render( <React.StrictMode> <App /> </React.StrictMode>, ); }); Then GSAP does not work on the first load, it only works after I refresh the page again. I'm hoping someone might shed some light on this issue. Any suggestions or insights would be greatly appreciated. Thank you for your time and assistance. Video demo for issue: Youtube