Skilltech Posted April 19, 2022 Share Posted April 19, 2022 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: Notice the back to top button on the bottom right start scrolling a couple of times and while the scrolling animation is still running click the "back to top" button You'll notice that the result (location where the scroll ends) is inconsistent, usually not hitting the target precisely. 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 More sharing options...
PointC Posted April 19, 2022 Share Posted April 19, 2022 Seems to work okay for me if I switch it to the built-in .scrollTo() method of ScrollSmoother. See the Pen 948a4848a8641522e7563b55224cb887 by PointC (@PointC) on CodePen https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo() Hopefully that helps. Happy tweening. 3 Link to comment Share on other sites More sharing options...
Skilltech Posted April 19, 2022 Author Share Posted April 19, 2022 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 More sharing options...
PointC Posted April 19, 2022 Share Posted April 19, 2022 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. 1 Link to comment Share on other sites More sharing options...
Skilltech Posted April 19, 2022 Author Share Posted April 19, 2022 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 More sharing options...
PointC Posted April 19, 2022 Share Posted April 19, 2022 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. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 19, 2022 Share Posted April 19, 2022 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 3 Link to comment Share on other sites More sharing options...
Skilltech Posted April 20, 2022 Author Share Posted April 20, 2022 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. Link to comment Share on other sites More sharing options...
Skilltech Posted April 20, 2022 Author Share Posted April 20, 2022 @PointC @OSUblake It's this rule: @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } I hunted it down for you (an myself). 1 Link to comment Share on other sites More sharing options...
GreenSock Posted April 20, 2022 Share Posted April 20, 2022 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. 2 Link to comment Share on other sites More sharing options...
Skilltech Posted April 20, 2022 Author Share Posted April 20, 2022 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 More sharing options...
smallio Posted February 25, 2023 Share Posted February 25, 2023 On 4/19/2022 at 9:09 PM, PointC said: Seems to work okay for me if I switch it to the built-in .scrollTo() method of ScrollSmoother. https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo() Hopefully that helps. Happy tweening. Hello old friend @PointC, How would you achieve this when the href is on another page? EG navigate from Blog page to href on Home page and have it scroll to the href like in your example. Stumped on this one for some reason. Cheers, Smallio Link to comment Share on other sites More sharing options...
GSAP Helper Posted February 26, 2023 Share Posted February 26, 2023 Hey @smallio. If you'd like some help, please make sure you provide a super simple minimal demo (no need to be elaborate). If you're asking what I think you're asking, you'd probably just parse the URL to grab the anchor link and then use ScrollToPlugin to scroll to that element. If you still need help, here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now