Increasing perceived scroll distance / sensitivity on fixed based slide sections

[spearquit]

Hi all,

 

I wondered if anyone has any thoughts, approaches or help on an issue I’m facing.

 

I’m nearly at completion on a site that has a fixed scrolling / slide based effect. Here’s a stripped back pen of the global set up, based on a previous post: 

 

It works how it should. But we’re approaching the end of the build… and have received some feedback. 

 

You can imagine that on the full site, particularly when the scrollbars are hidden, that it feels like you have to scroll quite a distance to trigger the next slide. Clearly it’s because of set up, having to scroll the height of each slide to trigger the next, but I’m too far into build to completely change the approach.

 

I could do with at least decreasing the perception of how far you need to scroll to trigger the next slide, or giving it an absolute pixel distance somehow.

 

I have taken a look and had a play at integrating Observer, but I'm left scratching my head. If anyone has any thoughts or how to approach, it would be hugely appreciated.

 

Many thanks,

 

Rick

 

See the Pen xxabmvz by spearquit (@spearquit) on CodePen

Edited February 16, 2023 by spearquit
incorrect codepen link used

[mvaneijgen]

You can turn on snap on your ScrollTrigger and then let ScrollTrigger snap to the end point, so it looks like you only need to scroll once. 

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

 

 

Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following:

 

The Observer plugin would be a smarter use case for your problem, but the snap would kinda fix it with minimal effort. 

 

See the Pen abazXKX?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen