Jump to content
Search Community

ScrollToPlugin & iOS 14 issue

newyorker test
Moderator Tag

Recommended Posts

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

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

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

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;   
   }
  
}

 

  • Thanks 1
Link to comment
Share on other sites

  • 10 months later...

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...