Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kristoffer

ScrollTrigger snap and inertia plugin?

Recommended Posts

Hi 

 

Can you use the inertia plugin for snapping with scrolltrigger for mousewheel/touchpad? Looking for similar scroll-to-snap behavior as with Draggable and InertiaPlugin for touch devices. 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Thanks. I think that's the same issue that I'm seeing on my mobile device. The horizontal overflow isn't hidden so your scrolls are being interpreted as scrolling that section whereas ScrollTrigger uses the main page's scroll.

Link to comment
Share on other sites

I have the same issue with the advanced version of this demo as well. any other scroll-to-snap demos other than those two I can try? 

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

5 minutes ago, kristoffer said:

but still not on the laptop.

What model laptop, OS, and browser?

 

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

 

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

It's a Lenovo Thinkpad P50s, Windows 10 (1909). It does not work on Chrome (83.0.4103.116) or Edge (83.0.478.54).  Opera and Firefox seems to work now 👍

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

I'd like to see a minimal demo of what you come up with if you're up for that :) 

Link to comment
Share on other sites

27 minutes ago, ZachSaucier said:

I'd like to see a minimal demo of what you come up with if you're up for that :) 

Yes I can do that, but I'm really slow so it will probably not be anytime soon. Thanks for the help.

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...

Hey I tried the demo on my PC and it doesn't snap at all - instead it inches a bit and stops midway never finishing the snap. 

Link to comment
Share on other sites

Hey @Clearly Vinay. There is currently a bug that causes this only on certain devices as this thread discusses. It's really hard for us to debug because none of our devices are acting up but we're working on a solution. In the mean time you can try using GSAP version 3.4.1 as we don't think the same issue occurs in that version.

Link to comment
Share on other sites

Oh I see - lemme know if there's any way I can help. I would really have loved the snap effect but it's not a deal breaker for my project so no rush. 

Link to comment
Share on other sites

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.
×