GSAP doesn't work on first load after using FontFaceObserver (React)

[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

[Rodrigo]

Hi @Meoki and welcome to the GSAP Forums!

 

Unfortunately there is not a lot we can do without a minimal demo. We have a collection of starter templates that use GSAP in React apps on staclblitz, you can fork one and try to replicate the issue:

https://stackblitz.com/@gsap-dev/collections/gsap-react-starters

 

Finally the way the loading works for the images looks a bit odd to me TBH. If I was to do that I'd load the images on the main App component and use conditional rendering and Suspense to render everything once the fonts are loaded:

https://react.dev/reference/react/Suspense

 

Hopefully this  helps.

Happy Tweening!