Jump to content
Search Community

What causes screen tearing? How can I improve performance?

BCI test
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

So I have a problem with images tearing or not being completely removed from the screen on transitions. See attached image.


What is the cause of this? Am I trying to do too much on the screen and the browser can't keep up? Can I do anything to improve performance?


I have a link here. (Still very rough as I'm just playing with some ideas)






Link to comment
Share on other sites

Hello Nick..


I cant really see all your code.. but you could try adding force3D:true to your tweens to force hardware acceleration, so the CSS transforms render from your GPU (graphics card) instead of your CPU.


force3D is part of the CSSPlugin, below taken from CSSPlugin Docs :


force3D - when you set force3D:true, it forces GSAP to apply a 3D value to the element's transform, meaning matrix3d() instead of matrix(), or translate3d() instead of translate() which typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In other words, setting force3D:true usually boosts performance, making movement more smooth. However, if you exceed the GPU's memory limit, performance will degrade, so it's not wise to force3D:true everything all the time. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details. In our experience, though, it helps performance more often than not. The default value is false.


I tested your link on Windows 7 (64-bit) , Firefox 31 and Chrome 36 and did not see the behavior you described above.


What browser and OS are you seeing this in?

  • Like 2
Link to comment
Share on other sites

Windows 7 (32-bit) and Chrome 38 is the only browser with the issue. IE and Firefox seem to be working fine.


I will attempt setting force3D to true.


Will this break in IE8/9 or simply revert back to false?

Link to comment
Share on other sites

You could try just setting force3D: true to those tweens that are animating the following CSS properties in GSAP:

  • x (translateX)
  • y (translateY)
  • z (translateZ)
  • rotationX
  • rotationY
  • rotation
  • scale
  • scaleX
  • scaleY
  • scaleZ
  • skew
  • opacity
  • alpha
  • autoAlpha
You could also set force3D:auto but GSAP is smart enough to detect if the browser supports matrix3d() or translate3d() ..


Glad you got it working!

  • Like 2
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...