Jump to content


Is Tween perceived performance ever better than styling elements with JavaScript?

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

In the tests I have run, it seems JavaScript is a bit faster, but I'm wondering if it's possible to do this faster. So let's say I am repeatedly setting the width of health/mana/status bars and I want to do this as efficiently as possible. Should I use element.style.width or should I use Tween.to over a brief duration of half a second?


In my tests if I Tween using 0 duration (or .set) it takes about twice as long as element.style.width. If I use a half second Tween, my test reports that Tweens are much faster (8ms vs 43 ms), but this isn't a fair comparison because the test is only measuring how long it takes for the Tween to start. This makes me wonder if using Tweens are magically somehow faster in practice in terms of perceived performance... like maybe there's less initial performance load?


Or is element.style.width always faster no matter what? Thoughts?


Edit: made a codepen to make this easier to test.


See the Pen KelFk by maelfyn (@maelfyn) on CodePen

Link to comment
Share on other sites

I'm not really sure I follow the question.

Setting the style.width directly should be quicker than going through the process of creating a tween that basically does the same thing.

In the case of a tween, at the very least you need to


- create a new JavaScript object (the tween itself)

- find the existing values of the properties you are tweening

- record the existing values of the properties you are tweening

- start tweening.


So, yes, it shouldn't be surprising that bypassing all that is more efficient.

And in the case of a set(), even though the tween doesn't have a duration, the engine still needs to query and store the existing values before setting the new values.


However, you should read and watch the videos here to see how TweenLite incorporates some very important techniques to achieve super-fast real and perceived performance: http://greensock.com/gsap-1-12-0


Let me know if you need more info or if I'm misunderstanding something.

  • Like 2
Link to comment
Share on other sites

Thanks Carl. I think this post is a sanity check more than anything. Greensock's has a lot of performance nuances, so I like to check on these details. This video helps a lot. Thanks!

  • Like 1
Link to comment
Share on other sites

You're very welcome. We love knowing that people appreciate the fine details behind the scenes. Happy Tweening!

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.