Animation triggers too slow on page load

[Marcus Ayers 1 Likes (Newbie)]

So I have a Next js 13 app I'm working on and I just want the title in the middle of the screen to have a little animation when the page loads. The animation works fine when I switch pages, but not on the first load. The title starts at the final position, then after about 1-3 seconds the gsap animation plays. I have tried some janky workarounds and none really worked, didn't know if there was a proper way to handle this. Thanks!

[Rodrigo 5,885 Likes (Superhero)]

Hi @Marcus Ayers and welcome to the GreenSock forums!

 

Is really hard for us to debug issues without a minimal demo.

 

There are two things I can see from the snippet you posted. You're not using GSAP Context:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

The other thing is that this could be a Flash of Unstyled Content (FOUC) issue as mentioned here:

 

Finally I recommend you to take a look at the resources listed in this page:

 

You can create a minimal demo by forking one of the starter templates in this collection:

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

 

Hopefully this helps.

Happy Tweening!

[Marcus Ayers 1 Likes (Newbie)]

Ahh thank you very much! It was the flash of unstyled content and simply setting the visibility to 0 and using autoalpha on the animation it now works great!