ScrollTo jumps after user scroll

[QAnon 0 Likes (Newbie)]

In this demo I’m trying to create a navigation that scrolls horizontally to show more navigation items as the user scrolls down the page, the navigation allows the user to manually scroll horizontally and click on different nav items and will scroll to that section of the page. The issue comes when the user manually scroll horizontally, then click on a nav item, the navigation jumps. How can i control this part of the animation to create a smooth transition after the user scrolls the navigation horizontally?

See the Pen OJXeeoz by qusai (@qusai) on CodePen

[ZachSaucier 7,123 Likes (Superhero)]

Hey Qusai and welcome to the GreenSock forums.

 

First off, you're creating multiple copies of the same animation and ScrollTriggers inside of the sections.forEach function. That's no good. 

 

As for your question, the issue is logical: you're wanting both the user to have control over the scroll position of the nav and wanting the ScrollTrigger to have control over the scroll position of the nav. There's no way that you can have both simultaneously. 

 

The best you can do is disable the ScrollTrigger when someone scrolls the nav section. Then re-enable it when they either start scrolling the main section again or if they click one of the nav items:

See the Pen zYBgEpR?editors=0010 by GreenSock (@GreenSock) on CodePen