font (re-)renders or anti-alias thing after timeline is complete

[flowen]

as the title says.. Here's the debug version of the codepen. Click to replay, you see it every time at the end of the animation

See the Pen RwwjpLP?editors=0011 by flowen (@flowen) on CodePen.

[ZachSaucier]

Hey flowen, thanks for being a Shockingly Green member. We couldn't do what we do without people like you! Also, cool animation.

 

What browser are you seeing this issue in? 

[GreenSock]

That's probably due to the browser shifting between rendering contexts, as the default "force3D" is "auto" in GSAP, meaning that it applies transforms with 3D in order to get GPU acceleration (layerize the element(s)) DURING the tween, and then removes the 3D stuff at the end (as long as it doesn't need anything 3D). In other words, during the tween it'd use translate3d(...), for example, and then at the end it uses translate(). Chrome is known for some pretty funky rendering algorithms (see https://greensock.com/will-change). 

 

You can just force things to ALWAYS be 3D or NEVER be 3D by setting the appropriate force3D value on your individual tweens, or just set the default like: 

CSSPlugin.defaultForce3D = false; //or you can try true and see which performs better in your scenario

Does that help? 

[flowen]

@ZachSaucier Thanks you for this lib

@GreenSock Thanks for explaining Jack!

 

Well I kept working on the animation and now I ended the animation in an infinite loop. So I'm not seeing the problem anymore. But good to know how the rendering works and I'll keep the solution in mind!