Jump to content


Performance, optimum declarations?

Recommended Posts



I was wondering on the performance of the GSAP engine and what would be the optimum declarations for some simple scenarios.

  • I have created a little game that animates 3 images (of 1500px) with repeat -1
  • Creates some images and animates them from side to side (1500px)
  • momentarily rotates an image

With these "simple" tasks the cpu is working 10-12% and the animations don't look so smooth.


I'm not using TimelineMax/Lite but TweenMax instead for all of these

So I was wondering if this is a wrong technique.

Moreover all of the animations are using the CSSPlugin because I want to animate left, top, rotate

is there another way to do it or the css animations are optimal for these tasks?


I'm using the latest Chrome.


Here is some sample code.


This handles the paralax effect:


var tween1 = TweenMax.to($("#child1"),speed*4,{css:{left:lefty1-1500},repeatDelay:0,useFrames:false, repeat:-1,ease:Linear.easeNone});

var tweenMountains = TweenMax.to($("#mountains"),speed*2,{css:{left:-1500},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone});
var tweenBuildings = TweenMax.to($("#buildings"),speed,{css:{left:-1500},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone});


This handles the creation of items and removal upon ending the effect:

$("#mainContainer").append("<div class='mines' id='mine"+counter+"' style='top:"+randomY+"px;'><img src='mine.png'/></div>");

 var _counter = counter;
 test = id;



So appart from some input of the performance issue, It would be great if you had any methods of measuring the FPS of the animations (total, or one by one).


You can view the total application here: http://www.netgfx.com/trunk/mission51


Thanks in advance.

Link to comment
Share on other sites

I'm pretty sure that the performance issue isn't related to the tweening engine itself (I've had literally thousands of tweens running simultaneously in Chrome at over 30fps), but I wonder if you're just pushing the browser's graphics rendering engine too hard by using large images that force the refresh of a large portion of the screen on every frame. Just a guess. I'm curious what would happen if you set the visibility to "hidden" on all your graphics (but let them tween) and see how that affects performance. If there's a huge improvement, that would indicate that your bottleneck is graphics rendering in the browser. If performance remains poor (CPU-wise), it's likely there's a code problem.


As far as measuring frame rate, it should be pretty simple to just tap into the TweenLite.ticker because it has "frame" and a "time" properties that you could use to do exactly that. By default it tries to run at about 60fps.

Link to comment
Share on other sites

I did somewhat what you suggested, yes the rendering impoved quite abit and animations look smoother, but it still runs at 8-9% of the cpu, but there is impovement certainly.

Now I wonder how can I achieve better performance and still the same effect...

Link to comment
Share on other sites

Yes, that's a very common conundrum: everybody wants the browsers (or Flash) to be able to render graphics more quickly. It's no small task, though, so you're typically stuck with trying to figure out trade offs and engineering your app/game to cut corners in some creative ways to ease the burden on the browser. If you've got huge graphics that you're sliding around but only part of them is visible at any given time, you might (*MIGHT*) get better performance by using a canvas element, but that would take some work and experimentation on your part. I'm not aware of any silver bullet that will solve your performance issues with zero hassle. :(

Link to comment
Share on other sites

I managed to transform the scrolling background(s) into canvas animations, the result its much smoother animation and less CPU load mainly because of the requestAnimationFrame function.


However it occupied 200 lines of code instead of 2(!) with greensock engine.

I guess we are still in the flux that we need to combine technologies and elements to achieve maximum performance, I'm only hoping that one day we will be able to code javascipt to handle the "heavy lifting" and let mark up languages simply describe the elements.

Link to comment
Share on other sites

Just so you know, the whole GreenSock animation platform (TweenLite. TweenMax, etc.) are driven by a single requestAnimationFrame loop for maximum performance (and of course it falls back to setTimeout() automatically if requestAnimationFrame isn't available in the user's browser). You can tap into the engine's ticks by doing TweenLite.ticker.addEventListener("tick", yourFunction);


I suspect that the performance increase has a lot more to do with the fact that you're not asking the browser to render massive amounts of pixels which are off the edge of the screen anyway. Limiting things to a fixed-size canvas element eases the burden a lot (well, in situations like this at least). Glad you got things working better. I bet you could reduce the amount of custom code from 200 if you still use TweenLite to do the tweens and either use onUpdates or tap into its ticker to drive the update frequency. Just an idea.

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.