Tweenmax scale gives stuttering fonts

[matthy]

I am currently slowly trying to scale a box with a font in it.

 

However on IE, and Chrome, (maybe also other browsers) the font really stutters.

In Firefox, this problem does not occur. 

 

Anyone an idea what causes this and if this is fixable?

 

thanks, 

 

Matthijs

See the Pen aOKQVy by anon (@anon) on CodePen

[Carl]

Yeah, this pretty much boils down to how browsers choose to render the text while it is being transformed.

It appears that Chrome is trying to keep the text smooth by rendering it at new positions and scales (and maybe even font sizes) and you are seeing some pixel-snapping in the process.

 

It seems that if you turn backface-visibility to hidden during the animation Chrome will treat the text as a bitmap which results in smoother animation with blurry text.

 

if you choose you can toggle the backface-visibility to visible after the animation which will make the text sharp again – but you will notice a shift

http://codepen.io/GreenSock/pen/pJKQGE

 

I found this helpful demo that shows various approaches to scaling text using CSS animations: http://codepen.io/adahei/pen/fAjwi 

 

I don't think you are going to find a solution that allows for slow, smooth and crisp scaling of text ;(

[Rodrigo]

Jonathan used a different approach some time ago and came up with this:

 

See the Pen emyggv by jonathan (@jonathan) on CodePen

 

As Carl says this has to do with the browser's rendering and unfortunately there isn't much to d beyond this solutions.

[matthy]

Hi Carl and Rodrigo, this sucks but indeed after reviewing its purely the browsers fault, thanks for the information!

 

@Carl the last codepen link is broken