Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
beamish

rotated text rendered smoothly after using Draggable.create

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Thanks !

 

will this be less compatible with previous browser version?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Thank you very much, very helpful as always :-)

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.
×