Jump to content
Search Community

ScrollToPlugin is scrolling from the top causing a weird 'jump'

ddi-web-team test
Moderator Tag

Recommended Posts

Hello All

 

I'm trying to create a very large documentation page. Because I know this page can get very long, I'm using scrollTrigger to

  1. Animate a progress bar. That code is basically copy/pasta from the scrollTrigger examples. Thank you 😁
  2. Tween an icon next to the nav item that tells the user what section they are in.

 

This works perfectly fine with scrolling. And now I'm trying to use the ScrollToPlugin so that when the user clicks on a nav item, the window tweens to the correct position. It seems to work perfectly fine if you are at the top of the page, and click on any nav item. But if you're clicking on a nav section when you're scrolled, the plugin seems to 'jump' the window to the top of the page before tweening to the correct position.

I tried googling this issue and did come across this where @OSUblake helpfully suggests removing smooth scrolling. I thought this would solve my issue as I did have that enabled. However, I'm still seeing the behavior after removing that.

 

Any help would be greatly appreciated.

See the Pen c31a6dbc4865ee35a400f1f04c2b8573 by DDI-Web-Team (@DDI-Web-Team) on CodePen

Link to comment
Share on other sites

Hey ddi-web-team. You can't use the ScrollTo plugin with smooth scrolling. Instead you should use the scroll animation method that the smooth scrolling library provides for you. And make sure that the smooth scrolling library is properly hooked up to ScrollTrigger. 

 

As for your issue without smooth scrolling, you need to prevent the default anchor click functionality if you're going to use anchors. For example:

document.getElementById('sideAnchor2').addEventListener('click', function(e) {
  e.preventDefault();
  gsap.to(window, {duration: 1, scrollTo: '#s2'});
});

Your code could also be improved by looping through a list of links and applying the click event listener to each. More info on that in my article about animating efficiently.

  • Like 3
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...