Why does the animation move first before windows finishes loading?

[Bayu Handono]

Why does the animation move first before windows finishes loading?

See the Pen VwgwZqV by byhndo (@byhndo) on CodePen

[Cassie]

Hiya - 

Your loader isn't tied to any loading state at all - it's simply a delayed tween that's fading a black div.

The following animations also don't have any association with that loader or the imaginary loading time at all.

Their starting points are triggered when a specific scroll point is passed - on page load the first element's trigger point is already passed - so the animation plays immediately.

See the Pen bGzGdZd?editors=0010 by GreenSock (@GreenSock) on CodePen

If you'd like to wait until the user scrolls you could clamp your triggers? You'll need to update to a more recent version though, your pen is using old versions of GSAP & ScrollTrigger.

 

https://gsap.com/blog/3-12/#:~:text=Clamp Your Triggers,where your triggers are placed.

See the Pen bGzGdZd?editors=0010 by GreenSock (@GreenSock) on CodePen

Alternatively - you could refactor so that all the images below the fold are triggered by scrollTrigger but the top image and the loader are on a timeline.

See the Pen YzBzXog?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Hope this helps!