Jump to content
Search Community

Horizontal section. Snap scroll when wheel down/up

jimmy-a test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

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