Jump to content
Search Community

Screen Tearing with Tween if css animations are in effect

WombatTurkey test
Moderator Tag

Go to solution Solved by Diaco,

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

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 :(

Link to comment
Share on other sites

Hey Diaco, thanks!


I found the issue, it's whenever an element in the gameworld was changing opacity, be it tweened from greensock, or a basic opacity animation keyframe using css. It would lag and drop all frames.


I fixed it by using:



.fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
Looks like transitioning it was faster than tweening the opacity, or a css animation.. And this method doesn't make my game lose any frames... just really weird.
Thanks for ur help though. Marked as resolved
Edit: I narrowed down my problem and it was the fading out of the elements that was causing screen tear, not the screen flip animation. Forgot to tell you  :-o  :-o
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...