Jump to content
Search Community

ScrollTo jumps after user scroll

QAnon test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...