Jump to content


Prevent scrolling past snap? (And other snap behavior)

Recommended Posts



I'm trying to animate a slideshow using ScrollTrigger & scrub. I have snap set up and it works ok, but if you scroll with too much momentum you'll blow right past a slide/snap point. Is there a way too make the snaps mandatory? I don't think I can use CSS as the slides are absolutely positioned on top of one another.


Also with less momentum the snap animation seems to take a very long time to start. I would like the snap to happen at roughly the same speed regardless of momentum, is that possible?


Apologies if this has been covered somewhere else, I did my best to read the docs and search the forum.

See the Pen XWYqGOg by Thisjustin3141 (@Thisjustin3141) on CodePen

Link to comment
Share on other sites

It sounds like you're looking for what Observer can provide: 



Here's a demo: 

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


The whole point is that you can't really base it on "real" scroll position because that'll cause logic problems. As a user, if I see the scrollbar on the side and I grab it an go all the way to the bottom or if I wheel really fast, it will be VERY annoying if the browser forces it to come to a sudden halt or yanks it from under my pointer as I'm dragging it down, you know? So you have to approach it in a very different way that's more event/gesture driven and not true scrolling. 


I hope that helps!

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.