scrolltrigger How to properly disable ScrollTrigger and Observer instance when scrolling to the anchor link?

[iamruletik]

Hello! Glad to be back on this great forum with new questions. Recently, I stumbled upon a problem with my animation. I'm trying to combine a few sections with simple scrub animations, but one section in the middle uses an observer to stop scrolling and animate through a few slides. I was using some of the forum's insights from posts about combining ScrollTrigger and Observer.

However, my issue is that I'm using the Lenis library for smooth scrolling. Instead of manually stopping scrolling and saving its position, I just call lenis.stop() and lenis.start(), which works like a charm. But I have a few anchor links on my site, and when I use the lenis.scrollTo() function to scroll to the needed section, I encounter a problem. When I try to scroll to the footer, which is below the section using the observer, my scroll just stops.

I thought, "Okay, just disable Observer and ScrollTrigger, and after scrolling, enable them again." This leads to my final problem. It works, but when Lenis scrolls to the footer and onComplete enables ScrollTrigger, the scroll position resets to the top of the site, and when I scroll, it resets back to the section that uses the observer. I made a simple CodePen to try to fix that issue, but I'm stuck. Please help me! 😊

 

See the Pen bGyqLRy by iamruletik (@iamruletik) on CodePen

[Rodrigo]

Hi Alex,

 

Sorry for the late answer, this one went through the weekend cracks 🙏

 

I'm not 100% sure of what exactly is going on here TBH, I fiddled with your demo for a bit and try different approaches and the only one that seems to work is this:

btn.addEventListener(
  "click",
  (e) => {
    portfolioScrollTrigger.disable();
    scrollObserver.disable(false, false);
    lenis.scrollTo("#footer", {
      onComplete: () => {
        portfolioScrollTrigger.enable();
        lenis.stop();
        gsap.set(window, {
          scrollTo: "#footer",
          onComplete: () => lenis.start(),
        })
      }
    });
  },
  true
);

It predicates on loading the ScrollTo Plugin as well.  I tried this:

btn.addEventListener(
  "click",
  (e) => {
    portfolioScrollTrigger.disable();
    scrollObserver.disable(false, false);
    lenis.scrollTo("#footer", {
      onComplete: () => {
        portfolioScrollTrigger.enable();
        lenis.stop();
        lenis.scrollTo("#footer", {
          immediate: true, // ignore duration and lerp
          onComplete: () => lenis.start(),
        })
      }
    });
  },
  true
);

But the scroll position was off, while the ScrollTo Plugin lands on the right spot.

 

Is not the prettiest solution but it gets the job done.

 

Hopefully this helps.

Happy Tweening!

[iamruletik]

@Rodrigo Thank you so much for your reply) Really appreciate it. I tried your solution and realised that I just can use scrollTo plugin instead of lenis scrollTo and it works even without need to disable observer and scrollTrigger. Yeah, I have a little bump, but it's okay.) 

[Rodrigo]

5 hours ago, iamruletik said:

eah, I have a little bump, but it's okay

Yeah, that's because Lenis is updating it's whole mechanism when the scroll position is updated, that's why I added lenis.stop() on the click event handler and lenis.start() on the onComplete callback.

 

Happy Tweening!