Hey guys! So basically I want to switch to greensock and use Javascript animation for my web browser game.
I've heard Javascript has better performance when tweening and doing animations.
I'm at the point where there I have a lot of entities and objects on the screen and I really don't want to convert my game into canvas or an html 5 engine (like phaser). It's a basic game and works fine on the dom.
Here is an example of movement (mind you, it's usually 60fps, but since I'm recording it dropped it down)
I'm using this code for the world movement:
TweenLite.to(gameworld, 0.6,{left:'-'+x+"px", ease:Cubic.easeOut});
TweenLite.to(gameworld, 0.6,{top:'-'+y+"px", ease:Cubic.easeOut});
TweenLite.to(gameworld, 0.6,{marginLeft:newMargins[0]+"px", ease:Cubic.easeOut});
TweenLite.to(gameworld, 0.6,{marginTop:newMargins[1]+"px", ease:Cubic.easeOut});
Now, everything is working fine and I love it. It's actually a lot smoother using Javascript especially since my worlds can be over 7000x7000px in dimensions
The problem is, if I add ANY type of css transformation on the screen (like a flip in, fadeIn, out effect) it drops drastically (only while moving), like so:
See how right after I kill the monster, my screen animation pops up using css transitions and my fps drops in half! (Not good!).
So I ask, do I need to convert all my CSS transition's into Tween/Javascript effects to not have that type of lag? It seems mixing css transforms just completely wreck the screen tear