Jump to content
Search Community

ScrollTrigger snap and inertia plugin?

kristoffer test
Moderator Tag

Recommended Posts

34 minutes ago, ZachSaucier said:

Hey kristoffer. ScrollTrigger has its own snapping functionality. And ScrollTrigger also works great with CSS scroll snap positions. Have you already tried using those? See the ScrollTrigger docs for more info.

 

Hi Zach, thank you for replying. Yes I have tried both. The CSS snap behavior is very odd IMO, scroll deceleration is very non-linear, looks really bad (not a ScrollTrigger issue, just don't like how the CSS snap works). The ScrollTrigger built-in snap doesn't work for me, not sure why. Tried on chrome, edge, firefox,..nothing, maybe something to do with touchpad driver (Synaptics, Lenovo Thinkpad P50s). When scrolling it appears as if there is no snap at all. I tried this: 

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

.

The best snap behavior I have ever seen is the Draggable with inertia plugin when used on touch device, very smooth. Good example is PointC's slider (on a touch device): 

See the Pen MzWzyv by PointC (@PointC) on CodePen

 

Link to comment
Share on other sites

4 minutes ago, kristoffer said:

The ScrollTrigger built-in snap doesn't work for me, not sure why. Tried on chrome, edge, firefox,..nothing, maybe something to do with touchpad driver (Synaptics, Lenovo Thinkpad P50s)

So the demo that you link to doesn't do any snapping when you scroll on your devices?

Link to comment
Share on other sites

12 minutes ago, ZachSaucier said:

So the demo that you link to doesn't do any snapping when you scroll on your devices?

nope. I have just tried on my laptop with touchpad. I did a screen capture mp4, is there a way to share it here?

Link to comment
Share on other sites

2 minutes ago, kristoffer said:

I did a screen capture mp4, is there a way to share it here?

We request that you upload it somewhere else (like YouTube) and share the link here. That was we don't have to host it :) 

 

I'm working on that demo, I noticed some issue on my mobile device. 

Link to comment
Share on other sites

Hey @kristoffer. There seems to be an issue with overflow-x being ignored on some older mobile devices. I created a work around using a similar but different approach in this demo:

See the Pen cab879e04d29d1e8ff3014ff2703cb74?editors=0100 by GreenSock (@GreenSock) on CodePen

 

Please try it on your mobile devices and see if snapping works. Here's a direct link that's easier to test: https://cdpn.io/GreenSock/debug/cab879e04d29d1e8ff3014ff2703cb74?editors=0100

 

It also uses a beta version of ScrollTrigger to fix an issue where the scroll value was being reported incorrectly.

Link to comment
Share on other sites

Ok, so it works on my mobile, but still not on the laptop.

I see that the snapping behaves similar to the CSS snap... as you scroll and let go of the finger the scroll slows down, but then to accelerate as the scrolltrigger-snap "takes over" and finally slows down as it approach the snapping point. The Draggable and Inertia has an incredibly smooth deceleration from you let go of the finger all the way to the snapping point, no matter the scroll speed.

Link to comment
Share on other sites

7 minutes ago, kristoffer said:

The Draggable and Inertia has an incredibly smooth deceleration from you let go of the finger all the way to the snapping point, no matter the scroll speed.

Yeah, that's a totally different beast because with Draggable, we know EXACTLY when the drag ends (we listen for pointer/mouse/touch events) whereas that's impossible with scrolling. Users might grab the scrollbar to move it, they could flick their mouse wheel, they, could swipe their fingers on a touchpad, they could hit the spacebar, they could have JavaScript controlling the scroll position, etc., etc. Plus scrolling is often handled on a different thread. The only way to have any confidence that scrolling is "done" is to wait for a certain amount of time to elapse between "scroll" events, thus you cannot get that perfectly fluid interaction like Draggable with inertia. If you've got any ideas for making that work, I'm all ears. But from what I can tell, it's logically impossible (at least without major down sides). 

 

I really wish we had a magic bullet for ya. :) Or maybe a strategy exists that we could employ and I'm simply unaware. 

  • Like 1
Link to comment
Share on other sites

50 minutes ago, GreenSock said:

Yeah, that's a totally different beast because with Draggable, we know EXACTLY when the drag ends (we listen for pointer/mouse/touch events) whereas that's impossible with scrolling. Users might grab the scrollbar to move it, they could flick their mouse wheel, they, could swipe their fingers on a touchpad, they could hit the spacebar, they could have JavaScript controlling the scroll position, etc., etc. Plus scrolling is often handled on a different thread. The only way to have any confidence that scrolling is "done" is to wait for a certain amount of time to elapse between "scroll" events, thus you cannot get that perfectly fluid interaction like Draggable with inertia. If you've got any ideas for making that work, I'm all ears. But from what I can tell, it's logically impossible (at least without major down sides). 

 

I really wish we had a magic bullet for ya. :) Or maybe a strategy exists that we could employ and I'm simply unaware. 


Ok I see the complexity with all the different scroll inputs. That's too bad, the Draggable / intertia combo is phenomenal (at least the codepen demos I've looked at) when it comes to scroll snapping. The ScrollTrigger plugin is an awesome addition to GSAP, love it, makes things a lot easier than scrolling timelines!!

  • Like 1
Link to comment
Share on other sites

45 minutes ago, ZachSaucier said:

You could make it snap immediately like what I do in this thread:

 

Yes I saw that post the other day. I was really hoping to find a balance between smoothing/snapping and the default browser scrollbar behavior to minimize scroll-hijacking.... I will probably end up with the scrolltrigger snap for non-touch devices and the draggable/inertia (with gsap club membership) for touch devices.

  • Like 1
Link to comment
Share on other sites

Hey kristoffer. The above demo that I posted seems to work fine for me on Windows in every browser I tried including Edge and Chrome. Are you sure that you weren't using a cached version of the files? Please try a hard refresh and let us know if the issue still persists.

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

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.
×
×
  • Create New...