ScrollTrigger with ScrollTrigger observer and scrollToPlugin, scrollTo not scrolling pass observer

[lslee]

Hi guys and gals,

 

I am using the approach here using scrollTrigger and scrollTrigger observer from this thread

My problem is if I have an anchor button on the start that is an anchoring to another section that is after the animation, it is getting caught in the scrollTrigger observers pin. From what I have read, the ScrollTo is suppose to bypass the animation right?

See the Pen EayXVPV?editors=1111 by Lslee94 (@Lslee94) on CodePen.

[mvaneijgen]

Hi @lslee welcome to the forum! 

 

I don't see any mention of ScrollTo in the post you linked? 

 

But check out these comments @GreenSock made with helper functions that can scroll to specific points in all kinds of ways. Hope it helps and happy tweening! 

 

 

[lslee]

Hi @mvaneijgen, thanks for link to the other thread, will have a read on it.

 

On the other hand, the thread that I linked on the post was just on the ScrollTrigger and ScrollTrigger observer. I have added the ScrollTo on my own implementation following that thread.

 

What I was aiming to do was a button that is clicked to scroll past the scrollTrigger and ScrollTrigger observer to an anchored section that is not within the animation.

 

If you could see my CodePen, when scrolling to anchor using ScrollTo, it is caught by the observer pin before reaching the targeted anchor section. 

[mvaneijgen]

Yes, that specific reply I'd linked to has some helper functions to help ScrollTo to link to a specific point on a page keeping your ScrollTriggers and Observers in mind. 

[Rodrigo]

Hi,

 

What you need is a boolean that prevents the Observer from becoming enabled in this particular part of the code:

// pin swipe section and initiate observer
ScrollTrigger.create({
  //...
  onEnter: (self) => {
    // Prevent this block from executing if the anchor was clicked
    if (preventScroll.isEnabled === false && !scrollToClick) {
      self.scroll(self.start);
      preventScroll.enable();
      intentObserver.enable();
      gotoPanel(currentIndex + 1, true);
    }
  },
  //...
});

Then you need to update the index that the Observer callback and set the panels and other elements animated by the Observer callback to their end state as the user scrolls down, so when the user scrolls back up everything works as expected.

 

Here is a fork of your demo with that implementation:

See the Pen PwzjOGR by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[lslee]

Hi @Rodrigo and @mvaneijgen, thanks for the replies. I managed to get the anchor button working with your advices, by disabling and enabling the observers when it is clicked. The CodePen was helpful on my case. Thanks alot!