Issue with scrolling up and down using trackpad

[ShikharS]

Hello!

I made a looping infinite slider using this gsap helper function and also added Observer plugin to move slider when user scrolls up/down. So, when the user drags or scroll up/down using mouse wheel, the slider works perfectly but when the user scroll up/down using touchpad, the slider lags and move much more than it should. How can I fix this?

Webflow link - https://preview.webflow.com/preview/infinite-slide-gsap?utm_medium=preview_link&utm_source=designer&utm_content=infinite-slide-gsap&preview=bee7c21645311977532ea7fc13bcdf50&workflow=preview

Code link - https://slater.app/projects/infinite-slide-gsap/pages/script

 

Live project link - https://infinite-slide-gsap.webflow.io/

[Cassie]

Hi there, thanks for including all these links. Unfortunately it's tricky for us to help unless we can edit and tweak the code.

 

codepen is great for this!

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

[ShikharS]

Thanks @Cassie

Here's the codepen demo. I'm facing the same issue here as well.

See the Pen xxNNRXd by Shikhar007 (@Shikhar007) on CodePen

[Cassie]

Ah, nice and easy, you're using an ease that's trying to ease it in and out - just remove that and you're good to go.

 

See the Pen WNBBRox?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[ShikharS]

Thanks @Cassie

Setting the ease to none works. The items are not lagging now.

The only other issue I'm facing is that when I scroll using touchpad (even just  a tiny bit), 4-5 items scroll by whereas when I use mousewheel to scroll, each item is scrolling nicely one-by-one. I would like to have items scroll by slowly when using touchpad, so I added scrollSpeed: 0.1 but it doesn't seem to have any effect at all. Any fix for this?

See the Pen KKLLWWe by Shikhar007 (@Shikhar007) on CodePen

[Cassie]

Those callbacks fire a lot of times due to momentum scrolling, so you could use a boolean to check if it's animating or not before firing off the tween?

See the Pen QWRRpPJ?editors=0011 by GreenSock (@GreenSock) on CodePen

[ShikharS]

Awesome! Its working great!

One last question - Is there a way to have the sliders respect the users scroll speed? Meaning when the user scrolls aggressively, sliders move fast at the start and towards the end, sliders move slowly and then eventually it comes to a stop. Currently its moving at a constant speed. Can inertia plugin help here? I'm trying to create something like this - https://iamrossmason.com/

[Rodrigo]

Hi,

 

I'm not 100% sure that this can be achieved. I can assure you that the Inertia Plugin works with the Draggable part of the Horizontal Loop helper function, not the Observer part of the codepen Cassie created.

 

For that you'll have to track the delta and velocity values the Observer Plugin reports, get the current index and use the toIndex() method provided by the helper function in order to move to a different index rather than the next one. You'll need to fiddle a bit with the math of this in order to get the next index value correctly, for that I'd recommend using the snap and wrap utility methods as well:

https://gsap.com/docs/v3/GSAP/UtilityMethods/snap()

https://gsap.com/docs/v3/GSAP/UtilityMethods/wrap()

 

Hopefully this helps.

Happy Tweening!