For this, we can use any bundler (eg: Webpack). Compile ES6 to ES5 for use in browsers since all browsers can’t understand ES6 completely. For this, few things need to be done: export smoothScroll as the default function: export default smoothScroll. Please let me know if it works well for you. The final step is to expose the smoothScroll function to be used by applications.

Hopefully the new function solves any issues you were running into. If not, it kills it, assuming the user (or something else) influenced the scroll.Īnyway, it feels good to have that one figured out. Seems to work well, right?Īnd yes, the snapping logic already employs the technique you mentioned internally where it checks to see if the scroll position matches (or is at least very close to.because browsers are weird) the last one set by the snap tween. I updated the smoothScroll() function to sense that condition and work around it. The fundamental problem was that the scrollerProxy's setter needed to ALSO set the actual scroll position of the page (not just the 'fake' content scroll) so that they're synchronized, but doing so directly would create a funky loop because the main ScrollTrigger is set up to basically smooth out the 'real' scroll position, thus when we set it in the scrollerProxy(), it was being softened in a sense. Notice I pulled your custom code out of the smoothScroll() function. SmoothScroll.js is a lightweight JavaScript library that provides smooth scrolling functionality for your web projects. See the Pen WNpbeeW?editors=0010 by GreenSock ( on CodePen I want to smoothly scroll to an element without using jQuery just pure javascript. Phew! After many hours of digging into this, I think I've got it all worked out. Somewhere in ScrollTrigger, where the scroll handler is killing the snap tweenTo transition Scroll within dist of snap (back to start).Ī possible work around inside ScrollTrigger might be to check the current scroll position against the expected scroll position, if they don't match then it suggests a user has taken control of the scrolling, in which case kill the snap transition. The only problem with this approach is that it creates a loop. This makes sense, given a user scroll should kill the snapping transition right? To implement smooth scrolling to page anchors using JavaScript, you can follow these steps: Add an id attribute to the HTML element you want to scroll to. It appears setting the window position in setProp kills the snapping transition tweenTo in ScrollTrigger. The final step is to expose the smoothScroll function to be used by applications. Thanks for the incredible library btw, i've been an advocate for some time.

Smoothscroll js demo