ShikharS Posted Friday at 02:22 AM Share Posted Friday at 02:22 AM 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/ Link to comment Share on other sites More sharing options...
Cassie Posted Friday at 11:34 AM Share Posted Friday at 11:34 AM 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 Link to comment Share on other sites More sharing options...
ShikharS Posted Friday at 12:14 PM Author Share Posted Friday at 12:14 PM 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 Link to comment Share on other sites More sharing options...
Cassie Posted Friday at 01:04 PM Share Posted Friday at 01:04 PM 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 Link to comment Share on other sites More sharing options...
ShikharS Posted Friday at 02:40 PM Author Share Posted Friday at 02:40 PM 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 Link to comment Share on other sites More sharing options...
Solution Cassie Posted Friday at 03:13 PM Solution Share Posted Friday at 03:13 PM 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 1 Link to comment Share on other sites More sharing options...
ShikharS Posted Friday at 05:07 PM Author Share Posted Friday at 05:07 PM 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/ Link to comment Share on other sites More sharing options...
Rodrigo Posted Friday at 06:49 PM Share Posted Friday at 06:49 PM 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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now