Jump to content


Adding multiple TweenMax to timeline in loop - Browser Performance Issue? Hi Carl!!

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 having some performance challenges. Very new to Greensock and animation in general, so I'm not sure where my problem is coming from. 1 animated spritesheet at a time works very well, it's just when I try and put 3 in the same loop that it gets very sluggish.


Can anyone help point me in a better direction? Maybe the way I'm attempting to build my timeline can be optimized? Any help would be greatly appreciated!


Fiddle: http://jsfiddle.net/nicktest2222/sV5Ug/67/

Full screen: http://jsfiddle.net/nicktest2222/sV5Ug/67/embedded/result/


Link to comment
Share on other sites

The problem is simply that you're adding each tween sequentially like:


Instead of what I think you meant:


Remember, when you add() a tween, it puts it at the end of the timeline by default, unless you specify a time/label/position parameter. So each time you added a tween, it was making the timeline longer, and the subsequent tween would get added after the previous one. 


You have several options to fix this:

1) Just pass an array of the 3 tweens into the add() method. That will add all 3 at the same time (same starting position):

timeline.add( [tween1, tween2, tween3] );

2) Create a label each time you add() a tween and use the same label for the ones you want to add at the same spot. Remember, if you specify a label that doesn't exist yet, it'll automatically get added to the END of the timeline at that point:

timeline.add(tween1, "group1").add(tween2, "group1").add(tween3, "group1")

Also, you could make your code a little bit shorter by using the convenience "fromTo()" method:

timeline.add( TweenMax.fromTo(...), "myLabel");
timeline.fromTo(..., "myLabel")
  • Like 3
Link to comment
Share on other sites

You were using the same label ("group1") for every single tween in every loop, so they were all on top of each other :) 


I think you meant to do this:


for (i = 0; i < numRows; i += 1) {
    tl.fromTo(..., "group1");
    tl.fromTo(..., "group" + i);
  • Like 3
Link to comment
Share on other sites

Argh, I did. Thanks for your help, Jack!

Link to comment
Share on other sites

Hi Nick


Just wanted to jump in... nice spritesheet animations. Very cool



Link to comment
Share on other sites

Thanks Carl!


One last thing, do either of you know what would cause issues in IOS with my code above? I'm seeing some strange things. Duplicating frames, white screen flashes... I have a scary feeling you are going to tell me to use <canvas>.


Here is a link to test with:



An image of the problem.


Link to comment
Share on other sites

Nope, I'm not really sure. Never heard of that before. But I have heard that one of the down sides to using sprite sheets is that they use up a lot of memory and can be tough for mobile devices to manage if you throw too much at them. I have no idea if that has anything to do with the problem you're describing.


I wish I had time to dig into your particular file and research what's happening, but unfortunately I'm swamped and it's beyond the scope of stuff we typically help with here. 


Let us know if you discover what's going on or how to fix it. I'm pretty confident it has nothing to do with GSAP. 

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.