Jump to content
Search Community

GSAP ScrollTrigger Stop instantly

TerraHQ test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

hello, merry christmas lol! 😝 🎅
I have a question that a client has asked me and I really don't how to approach, since I'm not an expert with this library.
I attach a very simple pen.

My client is asking for the following: "Once you stop scrolling, the sections still move, easing down, which should not be the case. Once the user stops scrolling (whether taking finger off spacebar or up/down arrow, or stop scrolling with the mouse), the sections should stop moving as well, instantly".

I know that is not the default scroll behaviour, and already has the "ease: "none"".
I'm 80% sure that is not possible, but I'm 100% sure there is a technical explanation that I can give to my client.

Thanks in advance.

See the Pen yLzPNPN by andresclua (@andresclua) on CodePen

Link to comment
Share on other sites

From what I can tell your pen already does this, at least with spacebar, and my mouse.

The only time it doesn't stop immediately is with my trackpad 'flick' scroll. But that trackpad flick causes a kind of inertia scrolling on all websites, even this forum and google. It's expected behaviour - so if they're coming at it from a 'better UX' perspective I'd push back.

If it's definitely a requirement I'm sure there's a way to achieve it - I'm not sure how though. I was thinking to use scrollEnd, but that fires at the same time as the 'ease' stops. Not before. 
 

ScrollTrigger.addEventListener("scrollEnd", () => console.log("scrolling ended!"));


I guess you'd need to listen to touch gestures? Detect when the finger is lifted from the trackpad.

  • Like 1
Link to comment
Share on other sites

1 hour ago, Cassie said:

The only time it doesn't stop immediately is with my trackpad 'flick' scroll. But that trackpad flick causes a kind of inertia scrolling on all websites, even this forum and google. It's expected behaviour - so if they're coming at it from a 'better UX' perspective I'd push back.

 

+ 1 on this. That behavior is built in to certain browsers, so you shouldn't be trying to modify it as messing with user's expectations is very bad UX. And that behavior should not happen when using a normal mouse, except for maybe Microsoft Edge on Windows as it does smooth scrolling. So it's really a touch thing, like with a trackpad or mobile device.

 

 

  • Like 1
Link to comment
Share on other sites

  • Solution
26 minutes ago, landtco said:

That being said, what should be the approach if I don't have any other choice but doing it?

That's not something we can really help you with. We try to keep these forums focused on GSAP-specific questions (please see the forum guidelines). I agree with Blake and Cassie - strongly discourage your client from messing with native OS or browser-level behavior. This might be one of those times to say "that isn't feasible" (although I'm not 100% sure that's the case - there may be some way to hack things). One thing you could try is to listen for when the user releases (pointerup/touchend/mouseup) and set the scroll position to maybe 1px different than what it currently is. 

 

Good luck!

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