Jump to content


Performance in timelinemax

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 have one doubt regarding adding animation array in timelinemax. Is it efficient if i add array of animation in timelinemax or i add one animation at a time? ..What will it make difference? 

Link to comment
Share on other sites



In terms of the engine's performance my guess will he not, unless you're adding a lot of elements.


In terms of JavaScript processing, again, there shouldn't be any noticeable difference unless you're saving quite some lines of code, which also would be very helpful for loading time, specially in devices.


The point is that the engine is highly optimized in terms of performance and that's the primary concern when changes and additions to it are made.


Anyway you can trace the time it takes for the code to process and be rendered in the screen an you'll see what I'm saying, I remember doing some tests with the split text tool for arrays of a lot of letters and the only performance hit was on small devices but that's has more to do with hardware.


Also always keep in mind what elements you're animating and the properties you're animating because that can cause some serious stress in the browser, if you look around in the fours you'll find a couple of posts in things regard and it always comes down to the same issue.




Link to comment
Share on other sites

Thanks Rodirgo for very nice explaination. I do consider your points

Link to comment
Share on other sites

I'm not quite sure what you meant by using an array (are you passing an array of tweens to the add() method or are you feeding an array as the target of a to() call?), but I can say that this:

timeline.to([e1, e2, e3], 1, {x:100});

...would be slightly faster than this...

timeline.to(e1, 1, {x:100}, 0)
    .to(e2, 1, {x:100}, 0)
    .to(e3, 1, {x:100}, 0);

And Rodrigo is correct - you'd probably never notice a difference in performance unless you're animating thousands and thousands of elements, but even then the bottleneck likely wouldn't have anything to do with JS execution in GSAP - it'd be browser graphics rendering (by far). 

Link to comment
Share on other sites

Hi Jack,

              I am passing animation array into timeline to make it all synchronous ...the question is about performance in scenario when i add one animation to timeline at a time or array of animation simultaneously to timeline.. which is faster and better option? 

Link to comment
Share on other sites

Hi ,


I think you can get the right answer by doing some tests on your own - create simple animations both ways and then measure the time and performance. There's a video of Paul Irish ( http://www.youtube.com/watch?v=NZelrwd_iRs ) testing CSS top/left vs 2D transforms... It explains very well the basics of testing process. You can do something similar and test the performance with arrays and with adding one by one animations. It would be nice to share the results. Also, note that on different browsers the results may vary.

Link to comment
Share on other sites

Hi Chrysto,


                I think you right. Testing on my own will be right choice. I will test it in different device & browsers and let you know the results

Link to comment
Share on other sites

Trust me, it is the best way to get accurate results... Because very little things ( like shadows, the types of animation etc ) can have a huge impact of performance. So I would lie if I tell you "this always performs better than"... It just depends on the case. In one of my latest projects, top/left gave me better results than x/y . It was interactive project, where a couple of elements had to be synced perfectly and using top/left was perfectly synced, while translating with x/y gave me small "jitter" that was very unpleasant for eye :( And I had to use the top/left :)


Good luck with the project, Ico !

  • Like 1
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.