text flickering on rotation

[nicodev]

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

[GreenSock]

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)