ScrollTriggers, preloader, and timing

[gmullinix]

I'm using ScrollTrigger to animate elements on a scrolling page, and I’ve run into a tricky timing issue related to a preloader screen. The preloader covers the entire page until all assets are loaded, and I'd like the ScrollTrigger animations to start only after the preloader has fully disappeared.

 

What I want:
As soon as the preloader vanishes, play the animations.

 

The issue:

If I wait until the preloader is gone to create the animations, I get a FOUC (most of the Scrolltriggers are .from's).

But if I create them earlier (such as while the preloader is vanishing), I don't have precise control over when they actually start animating, and they often trigger before the preloader is gone.

 

Ideally, I was hoping there'd be a way to create the ScrollTriggers in a disabled state (like a timeline with paused: true), and then manually enable them at the exact time I want. What are some other options for handling this kind of timing scenario?

See the Pen PwPNqrZ by gem0303 (@gem0303) on CodePen.

[Rodrigo]

Hi,

 

Maybe something like this:

See the Pen JoYXKZj by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[gmullinix]

Thanks, this works great! 🏆

 

Some notes for anyone who stumbles across this thread and needs to solve the same problem:

• Scrub animations will play all the way through with this solution, so you'll need to do an extra check for them.
• It also doesn't work for animations using batch due to how they're structured.

Here's what I ended up with:

let negativeStartArray = [];
ScrollTrigger.getAll().forEach(function(ST) {
  if (ST.start < 0 && !ST.vars.scrub && ST.animation) {
    negativeStartArray.push(ST.animation.pause(0));            
  }
});