Jump to content
GreenSock

Skilltech

ScrollSmoother and ScrollTo conflict with anchor links while scrolling

Recommended Posts

I'm using ScrollSmoother (trial, testing before I purchase commercial license) and ScrollTo combination and I'm having issues with anchor links.

 

I followed your documentation from:

 

ScrollTo docs:

https://greensock.com/docs/v3/Plugins/ScrollToPlugin

 

Linking to your codepen on "basic example using anchors":

See the Pen ExKNEXY by GreenSock (@GreenSock) on CodePen

 

As well as ScrollSmoother docs:

https://greensock.com/docs/v3/Plugins/ScrollSmoother

 

Linking to this codepen:

See the Pen KKXZOyZ by GreenSock (@GreenSock) on CodePen

 

I used those references and created an example pen where you can see that "basic example using anchors" doesn't work correctly while scrolling is active.

 

To replicate:

  1. Notice the back to top button on the bottom right
  2. start scrolling a couple of times and while the scrolling animation is still running click the "back to top" button
  3. You'll notice that the result (location where the scroll ends) is inconsistent, usually not hitting the target precisely.
  4. I left a yellow marker at the top center of the page so you could make sure the top is reached.

 

I'm assuming a conflict is happening between ScrollSmoother and ScrollTo.

 

Is there any way to edit the JS in my pen to stop the current ScrollSmoother animation if an anchor link is clicked and ScrollTo's animation has started and reinitiate/unpause ScrollSmoother afterward?

 

P.S. Another approach:

 

On my actual site I'm building, I also tried this code:

$('*[href^="#"]').each(function() {

        $( this ).on( 'click', function( event ) {

            smoother.scrollTo( $( this ).attr( 'href' ), true, "top top" );

        });
        
    });

Now this code does scroll to the target pixel-precise BUT the scrolling animation starts "jerky"/crazy, like it's being slingshoted to the top (goes quickly down and then starts scrolling to top very fast and overall looks jerky and cartoony). On a clean pen this doesn't happen, but I can't get rid of the "jerk" on my site even when I eliminate everything except GSAP, Bootstrap and jQuery. Is it maybe the trial version of ScroolSmoother acting funny?

See the Pen xxpMdMK by MrGordonFreeman (@MrGordonFreeman) on CodePen

Link to comment
Share on other sites

27 minutes ago, PointC said:

Seems to work okay for me if I switch it to the built-in .scrollTo() method of ScrollSmoother.

 

Thanks, but I tried that as well. That's the P.S. scenario from the original post. For some reason the animation then launches "jerky" on my actual site even though it looks OK in the pen (descibed above). Did you try to load the trial ScrollSmoother version in a local environment? Maybe it's that.

Link to comment
Share on other sites

Works fine for me locally too. :) 

 

Are you trying to use the CodePen version of ScrollSmoother locally? I ask because that's a Club plugin and I don't see a Club badge by your avatar yet. The CodePen version won't work outside of that environment.

  • Like 1
Link to comment
Share on other sites

10 minutes ago, PointC said:

Are you trying to use the CodePen version of ScrollSmoother locally?

 

I am, it didn't say that it wouldn't work. It actually says it's a trial and that it will work locally and on codepen. And it does work, I mean smooth scrolling is working. The issue is with anchor links having either slow, jerky or imprecise animations.

 

I plan on purchasing business green but I need to test it so I could be sure I won't get these exact type of issues when I pay. Behavior like this with MIT scripts is the main reason why I'm planning to join the GreenSock club.

 

Are you saying that there is no way to test out Club scripts localy other than buying the license?

Link to comment
Share on other sites

hmmm.. I'm not sure why it would be jerky and imprecise locally. Perhaps there is something else interfering with it or maybe a CSS transition is causing trouble. Hard to say. It's working correctly for me locally and the fork of your demo seems to be fine.

 

6 minutes ago, Skilltech said:

Are you saying that there is no way to test out Club scripts localy other than buying the license?

AFAIK that is the case. That's why they're available on CodePen and codesandbox to try. Club @GreenSock does have a 100% satisfaction guarantee so I think you can feel pretty safe in joining the Club and using that version. If there are issues, we can assist you further or you can request a full refund if it truly doesn't meet your needs.  

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

1 hour ago, Skilltech said:

Are you saying that there is no way to test out Club scripts localy other than buying the license?

 

Yes, you can test the Club scripts locally, like the ones you see on CodePen, like...

https://assets.codepen.io/16327/ScrollSmoother.min.js

 

Just make sure you run it on server using localhost:somePort instead of something like 127.0.0.1:somePort.

 

Alternatively if you use npm/yarn, you can install gsap-trial instead of gsap.

https://www.npmjs.com/package/gsap-trial

 

  • Like 3
Link to comment
Share on other sites

18 hours ago, OSUblake said:

Just make sure you run it on server using localhost:somePort

Thanks. I tried it now and I get the same jerky behavior on anchor link animation.

 

19 hours ago, PointC said:

Perhaps there is something else interfering

It's bootstrap 5 main CSS file. I did a process of elimination and narrowed it to that.

 

This definitely needs your guys' attention since Bootstrap is a major requirement on most of my projects but more importantly on a great deal of projects worldwide. Please let me know if you can recreate it. Just to be on the same page,  this JS code from PonitC's pen is the version I'm testing.

20 hours ago, PointC said:

Seems to work okay for me if I switch it to the built-in .scrollTo() method of ScrollSmoother.

 

Here's my original code updated with PointC's switch to .scrollTo() method and the only addition is I loaded Bootstrap CSS file in the pen's CSS.

See the Pen xxpMdMK by MrGordonFreeman (@MrGordonFreeman) on CodePen

Link to comment
Share on other sites

@PointC @OSUblake

 

It's this rule:

 

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

I hunted it down for you (an myself).

  • Like 1
Link to comment
Share on other sites

Yep, so all you need to do is: 

gsap.set("html, body", {scrollBehavior: "auto"});

I'll add it to the next release of ScrollSmoother as a convenience. 

  • Like 2
Link to comment
Share on other sites

Nice. Thanks. I just switched CSS to scroll-behavior: initial; and I'll wait for the new release.

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.
×