Prevent Skipping Section

[Sajidul Islam]

Hi, Me again,

I know there are lot of experienced developer on this forum. As a beginner I need help with an issue. 

 

I have made a scrollTrigger option and wanted to scroll only 1 section at a time. But I'm not sure how to do it. No matter how fast or slow I scroll I always want to scroll/pass only 1 section.

Please see my demo and any help would be appreciated.

 

Thanks Guys!

See the Pen ZExejMr by sajidulislam0 (@sajidulislam0) on CodePen

[SteveS]

I find myself regularly trying to get the same effect, but honestly, it never really ends up being that good. I'm of the opinion that it is usually bad UX to interrupt user scroll anyway. You are a beginner, so you might not understand some of what I'm about to list off, but it should be a good jumping off point for asking questions and doing research.

There's about four options (that I am aware of) to achieve the effect you are looking for. In order from simplest to most complex:

1. You have a scrub and set it up so that the distance between section animations is about one scroll length away.
2. You use the default scrollTrigger pin feature in combination with 1
3. You prevent users from scrolling once they enter the section and then use observer to look at what gesture they make, then use ScrollTo to animate to that page position + scrub the animation
4. There is a way, and I haven't figured out how yet, to use the Draggable plugin such that you get a very clean, highly desirable interpolation from scroll to the next section

I think that option 2 is the easiest with good results. 3 is much more hands on but can deliver a smoother experience. 4 is (AFAIK) fairly advanced.
Perhaps someone with more experience can jump in and give a more direct suggestion.

 

[Sajidul Islam]

Thanks for your suggestions,

 

Any Idea how to apply #2 on my code. Could you please help to give me a modified pen URL?

[SteveS]

Unfortunately I'm busy right now so I can't provide a codepen, but look at the ScrollTrigger docs for Scroll snapping

 

[GreenSock]

I assume maybe you're looking for something like what's in the Observer docs?: 

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

 

The concept is relatively simple - just use Observer to sense when the user makes a scroll-like action in a particular direction, and trigger whatever kind of transition you want to a new section. But obviously this isn't using an "real" scroll. If you actually want to use native scroll, I think this is generally a bad idea because it leads to poor UX. Like what if the user grabs the scrollbar and drags all the way down to the bottom of the page and you've got 5 "sections" but you don't want to allow more than one to transition at a time? You either wrestle control of the scrollbar away from the user (super annoying in my opinion) or you eliminate your rule of "only allow it to go one section at a time max".