Search the Community

Hello, 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>"); TweenMax.to($("#mine"+counter),speed,{css:{'left':-100},ease:Linear.easeNone,onComplete:function(id){ var _counter = counter; test = id; id.remove(); },onCompleteParams:[$("#mainContainer>#mine"+counter)]}); 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.