Jump to content
GreenSock

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

  • Like 11
Link to comment
Share on other sites

  • 3 weeks later...

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hey Vincent,

 

You rock.

 

Thanks for sorting this in 0.2sec ;)

 

Cheers

//O.

Link to comment
Share on other sites

  • 8 months later...

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!

Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

  • 7 months later...

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...

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

  • 1 year later...

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)

  • Like 2
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.
×