blende64 Posted August 19, 2022 Share Posted August 19, 2022 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted August 19, 2022 Solution Share Posted August 19, 2022 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 1 Link to comment Share on other sites More sharing options...
blende64 Posted August 22, 2022 Author Share Posted August 22, 2022 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. Link to comment Share on other sites More sharing options...
GreenSock Posted August 22, 2022 Share Posted August 22, 2022 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now