Neolite Posted August 21, 2022 Share Posted August 21, 2022 Hello! Thank you very much for such an amazing library! I've been using locomotive scroll for some time to achieve smooth scroll, but I had occasional performance issues when I would use power save mode on my laptop. So I decided to become a club member and use scrollsmoother. After removing locomotive related code and updating JavaScript , website started to work perfectly on desktops, even on power save mode! But unfortunately on my phone and tablet performance dropped drastically and way worse than used to be. Address bar would show/hide sometimes despite setting normalize scroll to "true". After setting normalize scroll to "false", performance gets slightly better, but still very jumpy... I would provide codepen demo but I am not sure what causing this behavior on phone and tablet and which part to isolate and put in codepen. I really don't want to go back to using locomotive scroll, but it had better performance on mobile which doesn't make any sense. I am sure I am doing something wrong, but can't figure out what... I would appreciate any help and advice! this is demo https://gsap-test-smoothscroll.netlify.app/ this is javascript snippet I use // create the scrollSmoother before your scrollTriggers let scroller = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", normalizeScroll: true, ignoreMobileResize: true, smooth: 2.5, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements smoothTouch: 0.3, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices) }); Link to comment Share on other sites More sharing options...
Cassie Posted August 21, 2022 Share Posted August 21, 2022 Heya, thanks for being part of Club GreenSock. So - Locomotive scroll actually doesn't do any smoothing on mobile - none at all. (Which is actually the better option UX wise) My advice would also be not to use smooth scrolling on touch devices in general, it's often not necessary normalizeScroll can help with some scroll animation bugs, but it can also hinder in other cases (it's experimental and our best attempt at getting round some IOS bugs) First thing I'd try is to remove smoothTouch and normalizeScroll. Also, there were some fixes in the latest release too. 3.11.0. so if you're not yet, then use the latest version, pop back and let us know how that's going for you. Chat soon! Link to comment Share on other sites More sharing options...
Neolite Posted August 21, 2022 Author Share Posted August 21, 2022 Thank you so much for your response Cassie! I have been using latest release 3.11.0. After removing normalizeScroll performance got slightly better, but still very jumpy and lags a lot. Thank you for pointing out locomotive scroll, I am sorry for mistake. Locomotive scroll uses lerp and has option where you can enable "smooth" for mobile and tablet devices. But I don't know how does "lerp" work and how it gives feeling of smoothness when scrolling. Also, I was trying to reduce scroll speed and tried this code and it didn't work. I was wondering if there is a way to apply momentum based scrolling(inertial scrolling) using observer plugin or maybe scrollSmoother normalize scroll? Observer.create({ target: "#smooth-content", // can be any element (selector text is fine) type: "touch, scroll", // comma-delimited list of what to listen for ("wheel,touch,scroll,pointer") scrollSpeed: 0.5 }); Thank you! Link to comment Share on other sites More sharing options...
GreenSock Posted August 22, 2022 Share Posted August 22, 2022 2 hours ago, Neolite said: Also, I was trying to reduce scroll speed and tried this code and it didn't work. I was wondering if there is a way to apply momentum based scrolling(inertial scrolling) using observer plugin or maybe scrollSmoother normalize scroll? If you want to get smoothing, then ScrollSmoother is definitely the way to go. Technically you might be able to write enough custom code to attempt something like that with Observer, but it wouldn't be easy. I think Cassie meant to just skip ScrollSmoothing completely on mobile, like: if (ScrollTrigger.isTouch !== 1) { ScrollSmoother.create({...}); } 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