Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Mighty_V

Prevent unnecessary scrolls while scrolling once

Recommended Posts

Greetings!
I'm using this example in my project and it's match perfectly but with one issue that I can't fix .
When you using laptop touchpad to scroll content , if velocity of scroll is more than slow,  it usually scrolls more that 1 section for single scroll .
Tried a lot of ScrollTrigger documentation properties ,  but unfortunately didn't  met success .
Beforehand thank you for support anyway ! 

See the Pen eYMmqQo by vasya-shapran (@vasya-shapran) on CodePen

Link to comment
Share on other sites

Sounds like you're fighting the scrollbar!

 

So maybe leave the scrollbar out of your animations and just listen to scroll events! Have you seen there is a plugin for this called Observer? https://greensock.com/docs/v3/Plugins/Observer

 

With it you can create effects like this 

 

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

 

Edit: @Mighty_V Welcome to the forum btw!

  • Like 2
Link to comment
Share on other sites

Thx you so much for fast answer @mvaneijgen and warm greetings on the forum )
 

Yes , I've already checked that case , but for it's implementation it need time to rework project for suiting this implementation (at least I think so).
Previous example was very easy for me due to easy section bounding . 
If u think that my way is really tricky and Observer solution is easier , I'll try to implement it (those inners and outers confusing me).

Link to comment
Share on other sites

 

This was asked twice before in the past couple of days.

 

 

 

 

 

I was under the impression, that the post with a suggestion by @GreenSock, I linked in those other threads might be helpful with that regard, but I might have been a bit quick with that assumption, as that suggestion looks to actually be with regard to another, a bit different, problem.

 

I think the problem here actually is that with trackpads, as well as on mobile devices, the scrolling works a bit different than it does in destkop browsers - when you flick the trackpad or the mobile device's touch screen, the scrolling will smoothen out over time.

 

Now because of this, the browser might still be technically scrolling / smoothening out the scroll / firing the scroll event even after one tween to the next section would be finished, so it would trigger the next tween to the next section because of that. An approach to prevent that from happening might be to somehow intercept this for the animation not to be triggered multiple times then.

 

But after quite a bit of tinkering, I'm not sure if that is even possible.

 

I've tried with this code posted by @OSUBlake, which probably is the most complete approach to that goToSection ScrollTrigger/ScrolToPlugin technique that is around this forum, and does appear to already have an approach of disabling the scroll while moving to the next section and after arriving re-enabling it again - but even with that it doesn't prevent triggering the next tween when flicking the trackpad/mobile screen quickly enough.

I tinkered with other methods too, but with nothing I tried, I could get it to prevent this from happening, which sort of leads me to the conclusion that you can not really have control over this - but of course I might as well be totally wrong with that assumption.

From what I understand; while you can prevent the events from firing that would trigger the scroll (like touch events or the wheel event), you can not really intercept/stop the scroll event itself from firing, which I imagine would probably be neccessary in this case.

 

Just an example of what I mean - flick your trackpad real hard in this demo and then click once to disable the page being able to scroll, here by setting its height to 100vh and additionaly overflow to hidden. Now since the page wouldn't be able to scroll anymore, one might assume, the scroll-event might have been intercepted - but actually, if you click a second time quickly enough, you will notice that in the background, things kept going, and the smoothening out of the scroll will continue happening when the page is able to be scrolled again after the second click.

 

Unfortunately, I couldn't find any real solid information on this, trying to search for this - so this is just a theory / assumption of mine for now 🤷‍♂️

 

Probably one the of many reasons why scroll-jacking like this is not feasible to implement on top of native browser scrolling.

 

Although I personally am no fan of that approach to begin with, it would still be interesting to know if I was somewhat right with the assumption that it is not possible to intercept this, or if I may be just missing something obvious here.

 

See the Pen ZExGzLE by akapowl (@akapowl) on CodePen

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

On 7/1/2022 at 3:49 PM, mvaneijgen said:

Sounds like you're fighting the scrollbar!

 

So maybe leave the scrollbar out of your animations and just listen to scroll events! Have you seen there is a plugin for this called Observer? https://greensock.com/docs/v3/Plugins/Observer

 

With it you can create effects like this 

 

 

 

 

Edit: @Mighty_V Welcome to the forum btw!

By the way @mvaneijgen, this solution having the same issue - if to scroll pretty active with touchpad , it scrolls more that 1 section respectively

 

@akapowl Thx for this important note for me, at least I'll understand a phase of this issue!  

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