Jump to content
Search Community

Prevent scrolling past snap? (And other snap behavior)

Thisjustin test
Moderator Tag

Recommended Posts

Hello,

 

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: 

https://greensock.com/docs/v3/Plugins/Observer

 

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