newyorker Posted March 27, 2021 Share Posted March 27, 2021 Hi everyone, I'm currently working on a project, and I'm having a problem with ScrollTo Plugin. Everything works on desktop, but on mobile when i click on the button to scroll down to a section, it starts to scroll but then stops and stays on the same page, and when i manually scroll after clicking the button, it messes up the other animations on the page, and all the elements that animate with ScrollTrigger disappears. $("#contact a").click(function(e) { e.preventDefault(); gsap.to(window, 2, {scrollTo: {y:'#home', autoKill:false}, ease: Power4.easeInOut}); }); $(".cta").click(function(e) { e.preventDefault(); gsap.to(window, 2, {scrollTo: {y:'#about img', autoKill:false}, ease: Power4.easeInOut} ); }); $(".slide").click(function(e) { e.preventDefault(); gsap.to(window, 2, {scrollTo: {y:'#home', autoKill:false}, ease: Power4.easeInOut} ); }); I've added the autoKill:false but it doesnt make any difference, and in the codepen i've posted everything seems to be working fine both on mobile and desktop. Nothing shows up on console, and I couldn't quite figure out why this is happening and i was hoping if someone can take a quick look at my code, and point me into the right direction. I've added the codepen just to show how i'm using the ScrollTo Plugin. Here's the live link to my project :https://yigitaksoy.github.io/monochrome-prep/index.html Thank you. See the Pen yLgOdpj by yigitaksoy (@yigitaksoy) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted March 27, 2021 Share Posted March 27, 2021 Hm, like you said, the CodePen works fine on all devices I've tested, including iOS 14. Are you using a smooth scrolling library or something on the live site? That could definitely be causing the problem. Sorry, we just can't troubleshoot live web sites - there are way too many variables involved which is why it's so important to provide a minimal demo. If you need help troubleshooting a live site, you're best off either hiring a freelancer or you can contact us to explore paid consulting options. Link to comment Share on other sites More sharing options...
newyorker Posted March 27, 2021 Author Share Posted March 27, 2021 Hi, thank you for the reply. I dont have smooth-scrolling on the website, it was intended but then removed, but i see that i still have the attributes in the html, but they werent causing the issue. I'm only using bootstrap and GSAP thats why i wanted to ask if this was a common issue. I'll try to create a minimal demo. Link to comment Share on other sites More sharing options...
newyorker Posted March 28, 2021 Author Share Posted March 28, 2021 Hi again, I've recently discovered that the scrolling issue is resolved when i remove overflow-x from the media queries (I'm not really sure why). In my case removing them does the trick but, this isn't something i'd like to remove as it causes the screen to scroll on x-axis, so i will be looking into a solution to resolve it without removing overflow. I just wanted to put this here, maybe this information might be useful for others as well. @media screen and (max-width: 768px) { html, body { overflow-x: hidden; } } 1 Link to comment Share on other sites More sharing options...
Steven Sanborn Posted February 24, 2022 Share Posted February 24, 2022 yeah i see the same issues here. Native scroll animations work really well. Link to comment Share on other sites More sharing options...
GreenSock Posted February 24, 2022 Share Posted February 24, 2022 Hey @Steven Sanborn - can you please provide a minimal demo and a few more details about exactly what the problem is that you're facing? Link to comment Share on other sites More sharing options...
Steven Sanborn Posted March 2, 2022 Share Posted March 2, 2022 OK so its pretty subtle but when you start doing more animation it does seem to impact more. For me , im looking at iPad 11" on the device. See the Pen gOXZmKd?editors=1111 by stevensanborn (@stevensanborn) on CodePen when you scroll using touch and release its very smooth and eases with 0 stutter, however if you use gsap scrollTo: there is a slight performance impact if you watch carefully. This does not happen for me on desktop. Link to comment Share on other sites More sharing options...
OSUblake Posted March 2, 2022 Share Posted March 2, 2022 Hi Steven, I'm not seeing any performance drops on my iPad, but even if there were, there would be little GSAP can do to improve the performance. GSAP is just changing a property, it's not handling the rendering. You'd almost certainly have similar results doing a simple request animation frame animation. The browsers handles native scrolling on different thread to improve performance, and unfortunately, we cannot tap into that thread. Also, if you're using huge images like that on your real project, that can also slow stuff down as that's a huge amount of pixels the browser has to move around. Link to comment Share on other sites More sharing options...
Steven Sanborn Posted March 3, 2022 Share Posted March 3, 2022 The difference is subtle but if you compare the touch and drag to animation through js the touch is extremely smooth . Yes I dont think this is a gsap issue but rather a limitation on how ios is handling javascript manipulation of scroll positioning. My guess is that the native scrolling animations are running on some threads that are closer to the native ui scroll and scrollLeft exists in html / js land and its one degree farther from the os . 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