Horizontal section. Snap scroll when wheel down/up

[jimmy-a]

Hi there!

 

I'm trying to make this horizontal section to "stick" or "snap" the next or prev slide based on the scroll wheel event, but i'm unable to do so. 

The main goal is, no matter how long the scroll event lasts, it should simple move/scroll to the next or prev slide. 

 

Am taking the wrong approach for that (using scrollTrigger and end())?

 

 

I've tried copying this Codepen since it achieves what i'm looking for, but had no success with that. 

 

See the Pen eoyrWK?editors=0010 by mikeK (@mikeK) on CodePen

 

See the Pen jOWaZZV by jimmyadaro (@jimmyadaro) on CodePen

[GreenSock]

If I understand the effect you want correctly, that's a bit of a UX nightmare ScrollTrigger was intentionally engineered NOT to do scroll-jacking. What you're asking for is to essentially grab control of the scrollbar and refuse to let the user input affect things in certain scenarios. I'm sure there's a way to do that, but...

• As a user, that'd drive me nuts. (I realize that doesn't really matter here - you're not building the site to please me)
• ScrollTrigger may not be the tool for you. It's not going to give you tools to scroll-jack (well, at least not in a simplistic manner). 

Frankly, I think the way your demo currently works is already pretty cool with the section snapping. ?

[ZachSaucier]

Hey Jimmy. Here are a couple of examples where ScrollToPlugin is paired with ScrollTrigger to jump to sections:

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

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

 

Notice that both of these examples have scrolling only in the y direction. To do it also in the x direction, you'd have to use calculations to figure out exactly where in the scroll they need to jump to and where to start the jump. It's doable but not the most straightforward. And as Jack mentioned, it probably doesn't make for the best experience.