Jump to content


Trouble with ScrollTo events after restarting animations

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

Hi all,


First, let me say how much I love Greensock. I started using it about a month ago for the DrawSVG plugin, but quickly realized how useful all of the plugins and features are. Thanks for a great toolkit!


The problem I am having is that when restarting the master timeline by calling restart(), the window scrolls to the bottom. I have tried resetting the window y position, and this works initially, but the scrollTo tweens are still not honored later in the timeline. I have also tried calling master.play(0) on restart, and this works for one or two iterations, but then the scrollTo tweens misfire and then stop firing altogether. Thinking it's a garbage collection issue, I tried several variations of kill(), but that didn't work for me either.



I apologize in advance for posting such a huge volume of code in the pen, but I was having a hard time trying to demonstrate the problem otherwise. The ScrollTo tweens start at line 564. For some reason, the slider bar in the pen doesn't trigger restart, but if you drag it to the end and click the Play button, it will appear. You'll see the issue when you click Restart.


I'm still pretty new to Greensock and animating this way and I don't have that much experience with JS either, though I have gone through many of your excellent CodePen demos and forked some of the code - thanks!


Thanks very much for any/all help and suggestions!



See the Pen JdRKxo by mattmiles (@mattmiles) on CodePen

Link to comment
Share on other sites

I appreciate that you made the demo, but I just can't begin to wade through 700 lines of code. In order for us to help, you really have to isolate the problem down to a few key functions and tweens. My guess is that you could just create a very long html page with a dozen paragraphs and chuck some scrollTo tweens into a timeline, or at least that is where I would start. 


Just let us know if you come up with something simpler for us to look at. We really would like to help. 



Oh, and very nice work with all the DrawSVG animations!

Link to comment
Share on other sites

Thanks, Carl,


I'll give it a try early next week --  I would really appreciate the help since I'm kinda stuck at this point.


I've tried a few things, like using .play(0) and .seek(0) instead of restart(), and while these seem to work for a couple iterations moving back and forth through the timeline, the tweens eventually fail.


Thanks again,



Link to comment
Share on other sites

2 things


#1: I added this code to detect if tweens were being overwritten


 TweenLite.onOverwrite = function(overwritten, overwriting) {
    console.log("a tween was overwritten")
Run this fork with console open: http://codepen.io/GreenSock/pen/vOXbZQ?editors=001
Scrub forward and you will see some stuff pop up in the console at 83 seconds.
Hopefully this helps you identify some offending code
What this means is that you have multiple tweens trying to animate the same properties of the same objects at the same time. When this happens GreenSock's overwrite management system kills the tweens that were created first, which means if you try to repeat the timeline or reverse it, the overwritten tweens no longer exist. I am not sure if this is affecting the scrolling or not but its worth looking into.
You can read more about the onOverwrite callback in the TweenLite docs.
#2 put autoKill:false inside your scrollTo props on every tween that uses scrollTo plugin like
 tl.to(window, 3, {
    scrollTo: {
      y: 0,
    ease: Power2.easeOut

see if that helps. Its possible something other than scrollTo is affecting the scroll position of the page and killing those tweens.

You can also create your own onAutoKill callback to further debug. Check out the ScrollToPlugin docs.

  • Like 1
Link to comment
Share on other sites

Carl, thank you very much for your help!


I tried #1, which did indicate some tweens were being overwritten, but not the ScrollTo() tweens in question or any of their elements.


I also tried #2, but that didn't seem to do anything.


I think the window y position must be getting reset somewhere in the DOM, but I just can't figure out where.


Ultimately, I solved the problem by using a regular to() tween to animate the y position of the SVG drawing's container div, which seems to work just fine. I've already had to resort to a bunch of SVG-CSS hacks to get the animation to resize correctly at various screen resolutions, so maybe somewhere this is affecting the scrollTo() plugin with regard to the window object?


In any case, I really appreciate your helpful suggestions, which aren't lost on me, since I will be using GSAP extensively for the rest of this project. Can't wait to try animating molecular physics with particle systems!

Link to comment
Share on other sites

Your welcome.


Glad to hear that you found a solution.

I know you are big into animating SVG. Keep your eyes open for our newsletter in the next few days. We are announcing lots of great things that should make animating SVG elements much easier.

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.