Odd behavior with GSAP ScrollTrigger "snap"

[StevenStavrakis]

When paired with GSAP ScrollTrigger, the scrolling works fine. However, if you try to use ScrollTriggers snap feature, instead of snapping back to the intended position, the container crawls back several pixels at a time.

The behavior can be seen by applying snap: 1 to any ScrollTrigger in the GSAP x ASScroll demo.

Here is a short video showing the effect.

Having looked through the ScrollTrigger documentation and other slightly similar issues, I haven't been able to find any good reason this would occur. In fact, looking at the other smooth scroll demos GSAP provides on their website, I'm seeing similar behavior with locomotive scroll, but this is not an issue with the "smooth-scrollbar" library. I imagine this means that there's something about how GSAP handles these external libraries, but maybe there's an internal solution for ASScroll.

[StevenStavrakis]

I actually seem to have found a solution. In the initial configuration of the scrollerProxy, rather than using

scrollTop(value) {
        return arguments.length ? asscroll.scrollTo(value) : asscroll.currentPos;
    }

I used

scrollTop(value) {
        return arguments.length ? asscroll.currentPos = value : asscroll.currentPos;
    }

So far, everything seems to be working perfectly on desktop. Perhaps this is just an issue with the initial scollerProxy configuration?

[ashthornton]

Great catch @StevenStavrakis, in my extensive usage of ScrollTrigger on other projects I've never used the snap property which is why I've never noticed this! When I think about it, setting currentPos instead of using .scrollTo() in that context makes complete sense since you wouldn't want it to lerp to the position, just immediately set it. Thanks for finding the solution, I've updated the Codepen example 😄