Optimize staggered reveal on reload

[blende64]

Hi

 

I have implemented a simple staggered reveal animation with ScrollTrigger.batch(). The below example was used as a template.

 

The problem: If the user scrolls all the way down and reloads the page (or in the case of CodePen the frame), it takes quite a while until the elements become visible. This is because the elements are revealed in order from top to bottom. Can I somehow optimize this so that only the currently visible elements and all subsequent elements are animated?

 

Thanks a lot!

See the Pen NWGPxGZ by GreenSock (@GreenSock) on CodePen

[GreenSock]

If you want to skip the callbacks for the ones "above the fold" initially altogether, you can use ScrollTrigger.config({limitCallbacks: true}) but it sounds to me like you want to just force those invisible ones to immediately be visible and then only stagger/animate the ones in the viewport in which case you could do this: 

See the Pen ZExwKqa?editors=1010 by GreenSock (@GreenSock) on CodePen

[blende64]

On 8/19/2022 at 7:42 PM, GreenSock said:

If you want to skip the callbacks for the ones "above the fold" initially altogether, you can use ScrollTrigger.config({limitCallbacks: true}) but it sounds to me like you want to just force those invisible ones to immediately be visible and then only stagger/animate the ones in the viewport in which case you could do this: 

 

 

This works great. Thank you so much.

 

In the CodePen I think a small error has crept in. Line 16 should read gsap.to(visible, {autoAlpha: 1, stagger: 0.1}). Just in case someone should wonder why the code does not behave as desired when reloading.

[GreenSock]

4 hours ago, blende64 said:

In the CodePen I think a small error has crept in. Line 16 should read gsap.to(visible, {autoAlpha: 1, stagger: 0.1}). Just in case someone should wonder why the code does not behave as desired when reloading.

Silly me - foggy brain. That's what I meant. Thanks for pointing the typo out. 

 

Glad it's working well for you.