Enable/disable triggering on anchors

[tk.kirill]

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

[OSUblake]

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

 

 

[tk.kirill]

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.

 

[OSUblake]

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

 

[tk.kirill]

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"
    	});
      }
    })
});

 

[OSUblake]

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

 

[tk.kirill]

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
     });

...

 

[GreenSock]

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.