Anchor ScrollTo links are not working with ScrollTrigger

[Ronak]

Hi,

 

I am trying to use ScrollTo in conjunction with ScrollTrigger. I have attached a basic Codepen demo. The horizontal slider works fine on Scroll, but when there are sections above/below GSAP panels, ScrollTo doesn't seem to work as expected.

 

I am sure I am missing some basics. Could any one of you please help?

See the Pen WNOvPwZ by ronakbhhagdev (@ronakbhhagdev) on CodePen

[akapowl]

Hey @Ronak - welcome to the forum.

 

This thread here explains, that since the scrollduration and the amount of x-translation on your scrollTrigger and its tween are not equal, there is an offset that you will need to include into your calculations in a scenario as such.

 

 

 

 

In your case that would translate to this - hope it helps  

 

A sidenote:

Since the calculations are relying on window.innerWidth, I set your body to a width of 100vw (alongside overflow-x: hidden to hide the scrollbar) to make the calculations correct to begin with.

 

navLis.forEach((anchor, i) => {
  anchor.addEventListener("click", function (e) {
    
    const targetElem = document.querySelector(e.target.getAttribute("href"));

    const containerOffset = panelsSection.offsetTop + ( targetElem.offsetLeft * (3500 / (document.querySelector(".container").offsetWidth - window.innerWidth)) );
    
    gsap.to(window, {
      scrollTo: {
        y: containerOffset,
        autoKill: false
      },
      duration: 1
    });
    
  });
});

 

See the Pen c8dfc86b181211b00af3071b84bd92f0 by akapowl (@akapowl) on CodePen