Jump to content
Search Community

Any way to account for different scrolling speeds using ScrollTrigger

Kiefer Slaton test
Moderator Tag

Recommended Posts

Hi all,


No CodePen as this is just a general strategy question. I'm building a site that is almost entirely ScrollTrigger based (think Apple's recent product sites where the whole experience is attached to the scroll). I'm running into an issue where my scroll experience is a good speed since I'm using a Magic Mouse, but my co-worker using a regular mouse with scroll wheel says he can blow through the entire site in about 5 seconds. Just curious if anyone has encountered this before and if so, what advice do you have on standardizing that across different scroll experiences? 


Thanks so much for your help. 

Link to comment
Share on other sites

I don't think there's a silver bullet for that because devices can be set up to scroll by any amount with a scroll wheel, so on Windows for example someone could make one "tick" of the wheel jump 10 lines, so if they spin the wheel quickly it's gonna cover a lot of ground. 


A few options come to mind:

  1. Use a scrub value so that there's a bit of a lag between where the scroll position is and the animation's playhead. 
  2. I suppose you could set up a scrollerProxy() that would effectively dampen the scrolling so that it takes longer if they velocity is too fast. But at the end of the day, you still need to get the scroll position to the appropriate spot, so it may feel weird if your friend (for example) scrolls down very quickly...and then has to wait 10 seconds to arrive where he intended to scroll. But that's up to you, of course. 
  3. You could set up your stuff normally and then wait for the first scroll event and then check the delta and if it's really high. If so, kill() all the ScrollTriggers/animations and re-create them with a much larger "end" value on the ScrollTriggers (basically add a lot more padding to things to make it take longer to scroll). That may cause an initial glitch/slowdown when it does all that work, of course. 

Maybe someone else has other ideas to share. 


Good luck!

  • Like 3
Link to comment
Share on other sites

I'm batteling the same problem but my focus is various mobile devices and the different scroll implementations.

Most of my users viewing from iPhones on a WKWebView.

I have been testing all day and here is my findings.

1. The scroll don't need to be exactly the same speed or smootness for all platforms, the user lerns in some seconds how the page works and how to scroll the page in a suitable way.

2. To gain best controll over the scroll in WKWebView I use the smooth-scrollbar proxy implementation. It seems to work best, and it allows you to acually stop scrolling on a click (important)

3. Iphone in a common safari window has a fantastic smooth scroll feeling and in this setup you dont need any proxy or ease or dampning

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