iOS 10 & ScrollToPlugin

[VincentdeVreede]

Hello all,

 

I just had a problem with iOS 10 Safari and the ScrollToPlugin, there are some changed that now will trigger the autoKill function. It has taken me more than a hour to realize that it was the autoKill function who stopped the animation. (iOS9 Safari didnt had this problem)

 

Just for people with the same problem (I think almost everybody who is using ScrollToPlugin) for now just add "autoKill:false":

TweenLite.to(window, 1, {scrollTo: {y:2000, autoKill:false}, ease:Power2.easeInOut});

Sorry for no Codepen but you can easily try it out with the Safari Developers Debug, just open a page that is using GSAP on your iPhone en run code without autoKill:false. (Sometimes it will not autoKill it, but almost always).

 

Hope that I have made someone happy with the same problem

 

Greets!

Vincent

[Picadipity]

I just tested my code on iOS 10 today and was seeing this too.  One phone bug down! 

[Carl]

Thank you for posting your solution. We are currently investigating iOS10 and its peculiar new behavior.

[oddpixel]

Hey Vincent,

 

You rock.

 

Thanks for sorting this in 0.2sec

 

Cheers

//O.

[Fedor Pominov]

Man, I realy thank you for your solution!

 

I spent a lot of time to pacify the stupid jumpy scrolling on ios and did not found a solution with this plugin until I saw your post.

 

Now I'm very happy. A big thank you again! Specially registered here to say that gratitude for your post. (Sorry for my bad English).

 

With best regards to you!

[narb]

Thanks for this solution. Saved me quite a bit of time troubleshooting.

[jeypack]

Hello guys,

 

for me on iOS 10 - Safari, there is no scroll-to only jump-to on iPad and iPhone, thought the onComplete callback gets thrown.

 

            

TM.to(window, 0.9, { scrollTo: { y: hash, autoKill: false }, onComplete: function () {
  console.log("scrollTo -> onComplete ");
}});

 

Sorry - no codepen, because this is a company project...

[Carl]

Hi Jeypack, 

 

Welcome to the GreenSock forums. Sorry to hear you are having problems.

We don't need to see your actual project, just a reduced demo that exhibits the same error with as little code as possible.

You can replace any images / logos just with solid-colored divs or dummy text. 

[jeypack]

Hi Carl,

 

thanks for the quick reply - in the meantime I've found the solution.

 

Shame on me - it was just because the body has a 100% height.

 

Now it's working fine - hands up for this really good library!

[Carl]

no shame. thanks for posting your solution. It very well could help someone in the future.

[Alexey_Bx]

Vincent, you made me happy with your solution! Thank you !!!

[Black Ducas]

Hi

I'm doing a super simple scroll-to anchor thing:

 

let buttons = document.querySelectorAll('.btn');   
if (buttons) {
      buttons.forEach(btn => {
        btn.addEventListener('click', function (e) {
          e.preventDefault();

          // Scroll to
          gsap.to(window, {
            scrollTo: {
              y: "#anchor-el",
              offsetY: document.querySelector('.js-header').offsetHeight * 2,
              autoKill: false,
            },
            duration: 1,
            ease: "power2.inOut",
          });

        });
      })
    }

 

It works well but on Safari and iOS there's this strange behaviour: the first time I click a button the scroll-to makes a strange jump and after that starts to smooth scroll. From the second time I click a button all works right without jumps.

I tried autokill but doesn't solve. Any idea?

 

EDIT: sorry, it was my fault, if it could be useful for someone: the "jump" was caused because before starting the scroll-to animation there was a script that changed the DOM, adding some HTML. I resolved changing the DOM after scroll-to animation is ended (using its onComplete callback)

[GreenSock]

Thanks for posting the edit/solution, @Black Ducas. And thanks for being a Club GreenSock member! 🙌