Disabling ScrollTrigger scrub animation when an anchor link is clicked

[MMadeDigital]

Hello. I'm relatively new to GreenSock, so I'm still finding my way around, but hoping you could point me in the right direction.

I have a set up on my project that is very similar to the ScrollTrigger Anchor Link Menu on codepen. In that example, the "squares" section has a scrub animation that plays on scroll. If you click a link to scroll to a section below the "squares" section, as the page scrolls down and passes that section, the scrub animation plays really quickly, before the page reaches the linked section.

Is it possible to not play that squares scrub animation if the page is scrolling to a section below? So if I clicked "purple" it would scroll straight to purple, and ignore the animation that's been set up for squares.

Hopefully this make sense, and thank you in advance!

See the Pen NWYxBKO by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi @MMadeDigital and welcome to the GSAP Forums!

 

Thanks for being a GSAP Club member and supporting GSAP!

 

The only way I know to achieve that behaviour is this:

const t = gsap.to(".square", { x: -925, paused: true, ease: "none" });
let anchorClicked = false;

ScrollTrigger.create({
  trigger: "#scrollWrap",
  pin: true,
  start: "center center",
  end: "+=850", 
  pinSpacing: true,
  fastScrollEnd: true,
  onUpdate: (self) => {
    !anchorClicked && gsap.to(t, { progress: self.progress, duration: 1 });
  }
});

gsap.utils.toArray("#navigation-bar a").forEach(function (a) {
  let wrap = document.querySelector("#scrollWrap"),
      triggerEl = document.querySelector(a.getAttribute("href").substring(1)),
      st = ScrollTrigger.create({
        trigger: triggerEl,
        pinnedContainer: wrap.contains(triggerEl) ? wrap : null,
        start: "top 40"
      });
  a.addEventListener("click", function (e) {
    anchorClicked = true;
    e.preventDefault();
    console.log("animate to", e.target.getAttribute("href"));
    gsap.to(window, {
      duration: 1,
      scrollTo: {
        y: st.start
      },
      onComplete: () => (anchorClicked = false)
    });
  });
});

But that creates a different set of problems since your scrollTrigger instance still uses pinning and you still have to account to the sections that are before and after the squares in order to force the progress of the instance as well otherwise you'll get some really awkward jumps like this fork of your demo:

 

Another option you could try is to make your scrollTo instance shorter and use Fast Scroll End:

https://gsap.com/blog/3-8/#preventoverlaps-and-fastscrollend

 

Hopefully this helps.

Happy Tweening!

[MMadeDigital]

Hi @Rodrigo

Thanks for taking the time to answer - I'll give both of these a go. You've given me an idea of what direction to head in anyway, so I appreciate that.

Thank you!