Full page snap kinetic scroll issue

[alpox]

Hi everyone, its my first time here.

Attached is a pen with a very basic full page scroll setup with ScrollTrigger & GSAP animations. The third page is on purpose bigger than a screen because in my real scenario there are sections higher than a screen as well and those have to normally scrollable.

The only problem however is that when using a MAC Touchpad (Maybe other touchpads as well?) instead of a mousewheel the browser keeps emitting scroll events even after the snap animation is done effecting in sliding more than one page.
As I add offsets to the ScrollTrigger it even happens that i'm not landing exactly on one page but a bit further into the offset due to additional scroll issued after the animation is done.

Do you know anything that can be done to prevent this kinetic scroll after the animation is done such that no offset-scroll is issued as well as not multiple pages are skipped when using a touchpad with kinetic scroll enabled?

See the Pen rNoOVNY by alpox (@alpox) on CodePen

[mvaneijgen]

Hi @alpox welcome to the forum!

 

It feels like you're trying to build your own snap feature. Have you seen the snap property on the ScrollTrigger docs? https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Snap:

 

Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following:

And there are much more settings to tweak it to your liking. Hope it helps and happy tweening! 

 

See the Pen BavoZaR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[alpox]

Hi @mvaneijgen many thanks for your response!

I have found `snap` before but it doesn't seem to be what I need. It only snaps after scrolling is done allowing to go multiple pages at once with one scroll intent. I have to be able to only go one page at a time and have no delay between stopping the scroll and "snapping". Much like the version I had at first but without the "scrolling too far" for touchpads.
Combining the snap and the section scroll animation kind-of works when I set `snap: 0.1` but it behaves a bit wonky and after the animation is done it still goes a bit too far and then back to the section again due to the snapping setting in late.

I also tried with some more settings for snap and also combined with the scroll-to animation but until now to no avail.

[mvaneijgen]

What you're describing sounds like the Observer plugin https://greensock.com/docs/v3/Plugins/Observer

 

ScrollTrigger is for native scrolling, but it sounds like you want to do an animation when someone scrolls. The Observer plugin can watch for scroll events and then do something, below a pen that mixes normal scrolling with the observer plugin, as you can see you can scroll as much as you like in the middle sections, but it will only ever animate one section at a time.

 

Hope it helps and happy tweening! 

 

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

[alpox]

Thank you very much for the effort and good insight! I did not yet know about the Observer plugin.
This does seems to fix the "scroll too much" issue.
Sadly its not very usable for us as we have native-scroll-position-initiated animations in the sections and overall would like to keep the native scroll (with scrollbar position relating to the single sections). Also, the observer seems to still have the "scroll two sections at once" issue due to kinetic scrolling.

Would you know a way to get closer to a solution while keeping the normal scroll positioning (and usable scrollbar) around?

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!