Jump to content
Search Community

Prevent Skipping Section

Sajidul Islam test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

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