Jump to content
Search Community

rotated text rendered smoothly after using Draggable.create

beamish test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.





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:





  • Like 1
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.
  • Create New...