tk.kirill Posted February 16, 2022 Share Posted February 16, 2022 Hi team, First of all thank you for making our job easier.What i want to obtain: by clicking anchor links, while scrolling to section_3 (for ex.), another sections do not triggering. After I scroll up or down to section_2 or section_4 by wheel or anchor those sections must works like default behavior. I try to enable all timelines by ID on scrollTo complete. But it's seems not to work properly. Need help... See the Pen WNXXjyp by dspnwold-the-sasster (@dspnwold-the-sasster) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted February 16, 2022 Share Posted February 16, 2022 Hi tk.kirill, I'm not exactly sure what you're trying to do here, but you would just reference a function by name for a callback. gsap.to(window, { // bad - calls function immediately onComplete: enableSections() }); gsap.to(window, { // good onComplete: enableSections }); If you trying to avoid the animations, you should check out the new preventOverlaps and fastScrollEnd features. See the Pen ZEyXPGj by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
tk.kirill Posted February 16, 2022 Author Share Posted February 16, 2022 Hi Blake, Thank you for your answer. I just want to accomplish a couple of goals. Click on anchor number 3 > go to section 3 (without playing animation on sections 1 and 2). Then scroll to section 1 with the mouse wheel. And the animation 2 and 1 plays as it should. If I use enable() method then all sections automatically start playing all animations. Just updated codepen. The preventOverlaps and fastScrollEnd methods don't really work in my case. Because they play the animation fast, but I need it to be kind of paused. Sorry if I wasn't clear about what I meant. Link to comment Share on other sites More sharing options...
OSUblake Posted February 16, 2022 Share Posted February 16, 2022 There's probably not an easy to do that. I'm thinking that you will probably need to manually trigger the animations yourself in callbacks, and put conditions in those callbacks to pause the animation if doing a scrollTo animation. I only did it for the second animation, but maybe this will give you an idea about how handle it. See the Pen wvPPOZj by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
tk.kirill Posted February 18, 2022 Author Share Posted February 18, 2022 Thank's, but not in my case. I have 22 sections with animations in total. Therefore, a universal solution is needed. Maybe there are any possibility to pause toglleActions while scrolling? For example: $(anchor).on("click", function(){ ScrollTrigger.defaults({ toggleActions: "none" }); gsap.to(window, 1, { scrollTo:anchor, onComplete:()=>{ ScrollTrigger.defaults({ toggleActions: "play" }); } }) }); Link to comment Share on other sites More sharing options...
Solution OSUblake Posted February 18, 2022 Solution Share Posted February 18, 2022 5 hours ago, tk.kirill said: Maybe there are any possibility to pause toglleActions while scrolling? No, that's not possible. defaults only applies when you create a trigger. It doesn't change existing triggers. 5 hours ago, tk.kirill said: I have 22 sections with animations in total. Therefore, a universal solution is needed. There isn't one. If you need to customize the behavior, then you need to do something similar to what I showed. If you're worried about writing too much code, use a function to simplify it. See the Pen RwjQZoV by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
tk.kirill Posted February 18, 2022 Author Share Posted February 18, 2022 Thank's! One more little question. How could I change start position of all scrollTriggers on mobile? Trying to do ScrollTrigger.matchMedia({ "(max-width: 991px)": function() { sectionIDs.forEach(id => { let st = ScrollTrigger.getById(id); st.vars.start = "center center"; // no results }); ... Link to comment Share on other sites More sharing options...
GreenSock Posted February 18, 2022 Share Posted February 18, 2022 I think you're misunderstanding how you're supposed to set things up. You shouldn't be trying to change the start/end of existing ScrollTriggers. Instead, you do your initial setup using ScrollTrigger.matchMedia() so that all those things happen automatically - it deletes the old ScrollTriggers and recreates the new ones at the new size. Usually when I see someone trying to dynamically change ScrollTrigger instance values, it's more of a problem with how they're engineering things or their setup - it's not that they actually need to dynamically change things. If you think you've got a scenario where you genuinely need that functionality and cannot use the existing API, I'd love to see a minimal demo. 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