Jump to content

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

ScrollTrigger: intermittent scroll locking during snapping

Go to solution Solved by GreenSock,

Recommended Posts

Reproduction steps:

1. Scroll down to section "THREE"

2. Scroll down in a controlled fashion until the top of the next section is just below the text "THREE"  (screenshot below) image.png

3. Stop scrolling to allow ScrollTrigger to start snapping back to section "THREE"

4. During the snapping try to abort the snapping by scrolling
4. Relinquishment of scroll is not immediate making the page feel unresponsive

See the Pen VwKzEeZ by citylights (@citylights) on CodePen

  • Thanks 1
Link to comment
Share on other sites

  • Solution

Let me guess - you're on a Windows machine? I can't reproduce on a Mac, but I think this has to do with the fact that Windows devices scroll in "chunks" with the mousewheel, like "3 lines per wheel tick", for example. 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.) 


I think a valid solution would be for ScrollTrigger to listen for "mousewheel" events and cancel any in-progress snapping tween when one gets fired. I've implemented that in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js


Does that work better for you? 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

12 hours ago, GreenSock said:

Does that work better for you? 

Yep! No longer able to reproduce the described behavior. Exceptional work, thank you.

For anyone who lands on this thread, the Codepen attached includes a version of GSAP (v3.6.0) which is ahead of the latest stable release distributed via npm (v3.5.1). This means that the behavior described is currently no longer reproducible on the Codepen but is if you load v3.5.1 via a package manager.

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