ScrollTrigger choppy with mouse wheel

[iDVB 10 Likes (Newbie)]

Is there any way to smooth-out/tween scrolltrigger animations when people are using an external wheel mouse?

 

It seems like using a touch pad or even a magic mouse the animations are super smooth. 

However, using a wheel mouse causes the scroll positions to jump large amounts of pixels and therefore cause the animations to jump too.

[akapowl 5,135 Likes (Superhero)]

 

That's just due to the way most browsers handle the scrolling.

Probably sort of related topic:

 

 

 

You could add some sort of smooth-scrolling to your page though, if you wanted, and hook it up with ScrollTriggers scrollerProxy:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

 

If you wouldn't want to use an external library, although ScrollTrigger is not actually made for that, it is possbile to achieve that sort of smooth-scrolling with gsap only. You could check how it's done in this thread for example:

 

 

Cheers,

Paul

 

 

[RobbieC 54 Likes (Contributor)]

There is also a few good tutorials/courses that cover smooth scrolling. Here is a few links:

 

https://ihatetomatoes.net/get-bella/

 

https://www.creativecodingclub.com/courses/scrolltrigger-express

 

I have taken both and they are great, I learned a lot and they both cover smooth scrolling with GSAP and/or a 3rd party library.

 

[OSUblake 18,475 Likes (Superhero)]

If you're doing scrub animations, just add a duration instead of true.

scrollTrigger: {
  scrub: 0.5
}