Jump to content
Search Community

ScrollTo tween stops when other tween animations are triggered - Safari (Mountain Lion)

Heather Gaye test
Moderator Tag

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



I'm using version 1.10.3 of TweenMax for multiple animations on my site. I'm using the scrollTo plugin on my main menu to smoothly scroll to different anchors on the page. I have tween animations on each section to show the content when the section scrolls into the viewport (triggered the first time the section scrolls into view only).


The problem is that when any section scrolls into view and its animation is triggered, the page stops scrolling. It appears that the scrollTo tween is aborted by the new animation.

* I logged the target anchor position before starting the scrollTo animation, and it was being correctly reported.

* I added an onComplete function to the scrollto that logged the page's final scrollTop position, and every time I tried to scroll to a section with other animations above it (thereby triggering them "on the way"), this function wouldn't run.

* Once all sections had been viewed (and all tweens triggered), I could correctly navigate through the page using the menu (and my test logging function ran correctly).


This only happens in Safari - all animations are correctly triggered and completed in Chrome, Firefox and IE. 


Advice/suggestions welcome. For the moment I'm using a different library for my scrollTo function.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Sorry to hear you are having trouble.

It would be super helpful if you could provide a simplified test file that clearly illustrates this behavior.


Best option is to use a site like codepen.io so that we can trouble shoot in a live environment and make changes that are easily shared.


You can start by forking a simple example like this: 



You don't have to use any of that code, just create something simple enough to show the conflict you are experiencing. 



Link to comment
Share on other sites

Urgh, can't replicate, all working fine! Link here for posterity anyway:  

See the Pen aFnru by heathergaye (@heathergaye) on CodePen


Primary difference is that I'm using waypoints.js in my main site to trigger the animations on scroll, so it looks like I may need to hunt for a conflict between the two scripts. Will investigate further at some point.

Link to comment
Share on other sites

  • 3 months later...

I'm having the same problem but I am only using GSAP for tweening. 


Everything works as it should in every browser except Safari (I'm on Version 6.1.1 (8537.73.11) - OSX 10.8.5) where it will randomly sometimes not complete the tween on the window scrollTo. I don't have this problem with the simple demo linked above, but my timeline is a lot longer and more complicated than that.


I'm happy to provide access to my site for debugging purposes, I'll try and find the time to put a codepen together if this isn't enough though.


EDIT : Just been doing some testing and have found that if I have the developer console open in Safari then it makes the scrollTo animation stop prematurely many more times and after a much shorter time.

Link to comment
Share on other sites

Hi xob


Yes it would be helpful if you could provide an example, otherwise there isn't much we can do.


A codepen example is preferable as it allows us to investigate AND edit the code in a collaborative fashion. If not a link to your site or a zip is good.

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