rotated text rendered smoothly after using Draggable.create

[beamish]

Hi Guys,

 

I noticed that when a rotated div containing text is animated the text appears pixelated, somewhat rugged; if I apply Draggable.create to the div, the text becomes smooth.   Is it possible to have the text appear smooth before using Draggable?

 

See this pen: 

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

 - after running it the text is pixelated, if you click on the green box then Draggable is applied and the text suddenly becomes smooth.

 

Thanks,

 

Elior

[Rodrigo]

Hi Elior,

 

Basically this has to do with the fact that Draggable, by default, uses force3D:true, in order to enhance performance, so basically when you create the Draggable instance the text rendering becomes better.

 

What you could do is add force3D:true to the instance that rotates the element with the text in it, in order to have a better rendering before creating the Draggable instance:

TweenLite.to(element, time, {rotation:45, force3D:true});

Finally, in the following post, Jonathan goes into great detail and work to get a good result for text rendering issues when transforms are used:

 

http://forums.greensock.com/topic/9173-scaling-an-element-becomes-pixelated/

 

Rodrigo.

[beamish]

Thanks !

 

will this be less compatible with previous browser version?

[Rodrigo]

Hi,

 

As far as I know, if the browser supports CSS3 3D transformations, the force3D:true property in the config object will have the desired effect.

 

You can check browser support here:

 

http://caniuse.com/#feat=transforms3d

 

Rodrigo.

[beamish]

Thank you very much, very helpful as always