Issues with ScrollTrigger and ScrollSmoother with scrollTo on Pinned element

[Liridon]

I'm having issues using ScrollTrigger and ScrollSmoother with scrollTo function on pinned element.

I need the left side items to follow the right side sections, to do that I pinned the section, but then triggering scrollTo on click doesn't work as it should, and never lands on the right place. 
If you change the codepen view to vertical, you can see the issue better.

Thanks in advance.

See the Pen vYPpaYe by liridond (@liridond) on CodePen.

[Rodrigo]

Hi @Liridon and welcome to the GSAP Forums!

 

I don't have time now to dig into your setup but when you use pinning the anchor position is not really a reliable way to get the vertical scroll position of the elements.

 

Maybe these demos can help you to see how is done:

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

 

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

 

Hopefully this helps.

Happy Tweening!

[Liridon]

@Rodrigo the first solution seems to fix most of it, now the scroll isn't jumping too far, but sometimes it still doesn't get exactly to the element leaving a little space in the bottom or at the top. Do you think I should try the second solution for this fix or is the problem somewhere else. I updated the code pen to work with the provided first solution.

 

Thanks a lot for your help.

[Rodrigo]

Hi,

 

This works:

nav_links.forEach(function (nav_link, i) {
  nav_link.addEventListener("click", function (e) {
    e.preventDefault();
    const st = tween.scrollTrigger;
    gsap.to(window, {
      scrollTo: {
        y:
          st.start + 11 - (8 * i) + (st.end - st.start) * (i / (nav_links.length - 1)),
        autoKill: false
      },
      duration: 0.5
    });
  });
});

Now this part makes me uncomfortable:

st.start + 11 - (8 * i)

The 11 is due to half the padding you have plus the border that's ok, but the 8 factor is what's normally called a magic number and, while it works, it might not be a reliable workaround, so you should investigate the reason for it:

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

 

Hopefully this helps.

Happy Tweening!