Jump to content
GreenSock

nicodev

text flickering on rotation

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

Hello,

 

This is my first post here. I have an issue with rotation. The text in the <div> elements flickers before each rotation. Can you see this ? Any way to resolve this ?

 

Thanks

See the Pen vLJMPr by ndevaux (@ndevaux) on CodePen

Link to comment
Share on other sites

That's likely just the difference between the layerized (GPU-accelerated) version and the non-layerized one. I know it seems a little weird, but some browsers render the text in elements that have a 3D transform applied in a slightly different way than when there are no 3D transforms. The 3D transforms help in the sense that it allocates the element to its own GPU layer which can significantly improve runtime performance (smooth movement). GSAP automatically uses 3D transforms for you in order to maximize performance during the tween, but then when the tween is over it'll toggle it back to 2D transforms (when possible). So again, GSAP is trying to work its magic to deliver the best, smoothest performance. 

 

You can tell GSAP to ALWAYS use 3D transforms (thus never switching back to 2D at the end of the tween) by setting CSSPlugin.defaultForce3D to either true or false, like:

CSSPlugin.defaultForce3D = true;

The only down side to that is that it won't switch back to 2D at the end of the tween which in some rare scenarios can make the element (and/or text) a bit sharper. Like if you scale something up by 10x, it can look pixelated. It's not GSAP that's pixelating it - that's the browser, but it's due to the transforms using 3D to get that acceleration. 

 

So the short answer is to just do:

CSSPlugin.defaultForce3D = true;

(or if you're scaling things up, maybe try setting it to false as long as it doesn't hurt performance too badly)

  • Like 1
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.
×