Elements load before Gsap animations happen

[Aaron Robb 0 Likes (Newbie)]

I'm using Gsap on a few elements on a local website I'm building.

While the animations do run well, the issue is that that the elements show up initially then trigger the animation, which is not what we want.

 

So for example, we have a page title that we're using SplitText with. When the page loads, it flashes the title for a few milliseconds, then runs the animation, which is a reveal-style, so it should not show at the start.

Same is happening for an image that should be hidden til scrolled to - you can see it flash on the page prior to animation.

 

My first thought is that gsap isn't loading fast enough - the page loads and then it triggers the animation.

Or perhaps because the main js file is deferring, its being delayed?

It is doing this locally and on my staging server.

 

Anyone have this issue before? Thoughts on fixing?

[PointC 14,010 Likes (Superhero)]

Hi @Aaron Robb 

 

Welcome to the forum and thanks for being a Club member.

 

That's a common problem (FOUC) and we have a quick tip about how to deal with it right here:

Happy tweening an welcome aboard.