Jump to content
GreenSock

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

ScrollTrigger feature request: "onSnapInterrupt" callback

Go to solution Solved by GreenSock,

Recommended Posts

Similar to the "onInterrupt" option for gsap tweens,  "onSnapInterrupt" is a callback that fires when snapping is interrupted/cancelled due to user action.

Link to comment
Share on other sites

Hey CityLights. Couldn't you use whatever event causes the interruption instead?

 

The more you're able to show the usefulness of feature requests the more likely we are to seriously consider them. There needs to be enough reason to warrant the extra file size and run time execution cost for all users :) 

  • Like 1
Link to comment
Share on other sites

As explained by @GreenSock, detecting a snap interruption is not so trivial.
 

On 12/22/2020 at 12:47 AM, GreenSock said:

The way ScrollTrigger senses when it must kill the snapping is by checking if the current scroll position is the one that was previously set (or the time before that) by the tween itself. We can't just listen for a "scroll" event or something because those would get dispatched by the snapping itself, and the scrolling may be triggered by various different things (mousewheel, user drags the scrollbar, use JavaScript, touch-scroll on a mobile device, etc.) 


Since a mechanism to determine a snap interruption already exists as part of the library internals, creating application code for the same purpose is simply needless suffering. Not only would it be redundant code, but also painstakingly hard to maintain as it must closely imitate the library internals. So for users who need to detect snap interruptions, the upside of being able to leverage the library internals via the "onSnapInterrupt" hook is immeasurable and saves a ton of technical debt. 

 

On the other hand, the downside for users not using the hook is negligible. They will only suffer the additional runtime cost of a conditional statement checking for the presence of the 'onSnapInterrupt' callback when a snap interruption happens (which depending on the snap duration, is not so common anyways). I can't see such logic being expensive in terms of extra file size either.

Link to comment
Share on other sites

The next release (3.6.1) already has a new onStart callback in your snap:{} object which I assume would suffice for you, right? 

Link to comment
Share on other sites

No, I already know when a snap starts by providing a function as the snapTo property to snap. What I wish for is a callback for when a snap is cancelled/interrupted due to user input.

Link to comment
Share on other sites

Couldn't you toggle a variable in the onSnapStart and onSnapComplete? Then if a wheel or whatever event fires in between those two you know the snap is interrupted? 

Link to comment
Share on other sites

And if the user interrupts the snap by scrolling using the scrollbar instead of the mouse wheel? Or if the user is on mobile? Which events do you advise listening to, to account for those cases?

Link to comment
Share on other sites

On browsers that support it, pointer events should work for both of those I believe. If you need to support the browsers that don't then I believe it'd be mouse and touch events.

Link to comment
Share on other sites

With that approach, I face difficulties on both desktop and mobile.
 

On desktop: since it is not possible to attach event listeners to the scrollbars, only to their associated elements, pointermove events (following a pointerdown event) which happen somewhere on the element but outside of its scrollbar would be mistaken for scrollbar scrolling, unless I made some nasty assumptions about scrollbar width, which can vary from browser to browser. Makes for a very brittle solution.

On mobile: a pointerdownevent followed by pointermove events does not necessarily indicate scrolling. If the events land on a child element with touch-action: none, no scrolling would occur.

Link to comment
Share on other sites

  • Solution

Okay, I updated the beta version of ScrollTrigger 3.6.1 which you can get here: https://assets.codepen.io/16327/ScrollTrigger.min.js and it lets you define onStart, onInterrupt, and onComplete callbacks inside the snap object like: 

snap: {
  snapTo: "labels",
  onStart: self => console.log("started snapping"),
  onInterrupt: self => console.log("interrupted!"),
  onComplete: self => console.log("finished snapping")
}

Let me know if that works okay for you. 

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