alexb148 Posted September 4, 2020 Share Posted September 4, 2020 I am creating several timelines controlled using ScrollTrigger, and that's all working great so far! What I'd like is to temporarily pause and then later resume the scroll listener. Essentially, pause and be able to scroll the page without my timeline playing, whilst leaving everything in the state it was at the moment I paused it. Then resume, and have everything immediately start responding to the page's scroll position again. Is this possible? I can see that there is a "disable" method, but this appears to unpin and reset everything as if the page hadn't been scrolled at all, which is not what I want. I know that I can completely destroy and then re-create the timeline, but this results in a short visual flicker whilst everything is destroyed and re-generated again. Thanks for your help! 1 Link to comment Share on other sites More sharing options...
alexb148 Posted September 4, 2020 Author Share Posted September 4, 2020 Actually, my bad - "disable" doesn't reset everything, I misunderstood the documentation. For reference, I am giving all my ScrollTriggers an ID, and then using ScrollTrigger.getById(i).disable(); to pause the ScrollTriggers, and ScrollTrigger.getById(i).enable(); to resume again. Problem solved! Update: problem not solved - see new comment in the thread 2 Link to comment Share on other sites More sharing options...
alexb148 Posted October 6, 2020 Author Share Posted October 6, 2020 I am revisiting this post as I have realised that I in fact did not solve this issue after all. Anything with scrub: true is reset to the start, as if I had never scrolled at all. Is it possible to disable a scrubbing ScrollTrigger and leave everything in the exact state it is at the time I disable it, even if mid-tween? Link to comment Share on other sites More sharing options...
GreenSock Posted October 6, 2020 Share Posted October 6, 2020 Sure, you can tell it not to revert by passing false as the parameter, like trigger.disable(false); 3 Link to comment Share on other sites More sharing options...
alexb148 Posted October 6, 2020 Author Share Posted October 6, 2020 @GreenSock oh amazing, easy haha. By the way I can't currently see that mentioned in the docs though: https://greensock.com/docs/v3/Plugins/ScrollTrigger/disable() Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 6, 2020 Share Posted October 6, 2020 7 minutes ago, alexb148 said: I can't currently see that mentioned in the docs though Thanks for pointing that out. I've updated the docs to include it. You might need to hard refresh to see the update. 2 Link to comment Share on other sites More sharing options...
oligsap Posted October 7, 2020 Share Posted October 7, 2020 @ZachSaucier Could we do the same with the kill function ? like trigger.kill(false); ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 7, 2020 Share Posted October 7, 2020 4 hours ago, oligsap said: Could we do the same with the kill function ? like trigger.kill(false); ? That's quite a testable hypothesis Yes, you can do the same with the kill function. I updated the docs for that as well. 3 Link to comment Share on other sites More sharing options...
oligsap Posted October 7, 2020 Share Posted October 7, 2020 Awesome thanks Link to comment Share on other sites More sharing options...
TBWA-NY Posted June 8, 2022 Share Posted June 8, 2022 This is a great feature! Just a note, the .enable() documentation should have the same information as .disable() for the 'revert' parameter. The ScrollTrigger animation will jump from 0 to the current position on .enable() if you don't set 'revert' to false. 1 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