Issues with ScrollTo on mobile devices

[servus]

Hi!

I use ScrollTo and on Desktop it works perfect, on iPhone it do not scroll exactly to target id, it stops scrolling before. Sometimes half width of screen, sometimes less and sometimes more, it´s very different. I do have two sections with class "scrollTo". Does anybody have an idea and could help me please?

Thanks!

 

  /* ScrollTo GSAP */
  $(document).ready(function() {
  
    var links = $('.scrollTo a')
    
    links.on( 'click', function(e) {
      e.preventDefault();
    
      var targetSection = $(this).attr('href');
      var targetOffset = $(targetSection).offset().top;
      
      TweenMax.to(window, 1, { scrollTo:{y:targetOffset }, ease: Power3.easeOut } );
  
    });
    
});

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

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

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[SteveS]

You are using a very old version of GSAP. Please update to a recent version. You do not have to calculate the scroll position, you can just pass the element to scrollTo and it will go to its position. If you do want better control over the scroll position, I'm not sure .offset().top is considered a modern way of getting the elements scroll position.

 

Also, make sure your scrollTo has autoKill: false. On mobile devices, scrolling has inertia. I have no idea what a good way to deal with this is. I spent most of my day yesterday trying to find a solution but it seems like mobile browsers just don't care about scrollTo tweens and sometimes seem to just ignore them.

[GreenSock]

16 minutes ago, SteveS said:

Also, make sure your scrollTo has autoKill: false. On mobile devices, scrolling has inertia. I have no idea what a good way to deal with this is. I spent most of my day yesterday trying to find a solution but it seems like mobile browsers just don't care about scrollTo tweens and sometimes seem to just ignore them.

I've never seen a mobile device ignore scrollTo tweens. I can't imagine why that'd happen unless you've got scroll-behavior: smooth applied in your CSS which basically would be like applying a CSS transition to an element that's being tweened with JS (not a good idea)

 

I'd be happy to look at a minimal demo of a scrollTo tween that's ignored on mobile. 

[SteveS]

I think mine might have been a more specific case. I had a ScrollTrigger that was animating a scrollTo based on scrollPosition. It's difficult to describe, but it seems that the browser's scroll just keeps going while the scrollTo is in progress and it would therefore trigger things further down the page. The only solution I found to stop it was hiding the page's overflow and quickly setting the scroll position.

 

I would put together a codepen but frankly it was an odd solution that somewhat misused scrolltrigger. I do have to ask though, is there any reason scrollTo doesn't work with a 0 duration tween?

[GreenSock]

2 hours ago, SteveS said:

is there any reason scrollTo doesn't work with a 0 duration tween?

Not that I'm aware of. My only guess is maybe you had ANOTHER scrollTo tween going at the same time you called gsap.set(...{ scrollTo:...}) which immediately overwrote what you did there. 🤷‍♂️ Tough to say without a minimal demo

[servus]

Thanks a lot for helping, it was an issue within a function. Everything works fine now.