Jump to content
Search Community

Performance Q: staggerTo vs forEach

JamesCatt 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

A question about performance here. The context:


I'm using GSAP to create an interactive, animated menu. For most of the things I need to do, TweenLite is all that I need. The one exception is a staggered reveal effect on the menu items. I'm debating whether to:


  • include TweenMax and use .staggerTo, or
  • just use a .forEach loop triggering a series of TweenLite.to calls.


I put together a fast and dirty test in the linked Codepen (I included an absurdly large number of menu items just for testing purposes). In Chrome with 6x CPU throttling it appears that using TweenMax.staggerTo is much more performant than the .forEach + TweenLite.to option—I'm getting about twice the frame rate.


Is there anything I could do that anyone can think of to improve the performance of the .forEach option? I'd really prefer to avoid including TweenMax just for the stagger.


Thanks in advance.

See the Pen yEREgY by jcatt (@jcatt) on CodePen

Link to comment
Share on other sites

1 hour ago, Sahil said:

TweenMax internally uses for loop instead of forEach that's why it performs far better. A bit less convenient but far better for performance.




[facepalm] I should've thought of that—clearly I didn't have enough coffee before posting. :)



  • 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.
  • Create New...