Jump to content


Draggable render issue

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



i'm having a problem when using draggable and then scaling objects with css transforms:

everything works fine so far, but the scaled div gets blurry after scaling. first i thought it's a browser problem, but when leaving draggable away, the rendering works as expected and the div's text looks sharp again, no matter what scaling factor is used. when using draggable, it seems to me, that the browser treats the scaled object as an image...

maybe there's the possibility to force the browser to re-render?


would be nice if there's any workaround ;-p





Link to comment
Share on other sites

I'm pretty sure Draggable has nothing to do with it. However, by default it does enable "force3D" which just means that 3D transforms are used instead of 2D ones, like transform:translate3d(10px,0,0) instead of transform:translate(10px,0) because in most browsers those perform much better and offload the compositing from the CPU to the GPU. I wonder if on your system the GPU is deciding to scale the pixels up, but again that's more of an issue with the browser and GPU rather than Draggable. You can disable the force3D thing if you want by simply passing force3D:false into your Draggable, like:

Draggable.create("#yourID", {force3D:false, ... });

Does that resolve things for you? 

Link to comment
Share on other sites


hi jack,

great, force3d:false is the solution!

thank you!!!



Link to comment
Share on other sites


hmm, ok, force3d:false makes everything looking crisp but like you said, performance isn't as good as with force3d:true. especially on mobile. would be cool, if one could "toggle" force3d-mode so that it's only on false when the animation is over...

Link to comment
Share on other sites

You can toggle it anytime.

TweenLite.set("#yourElement", {force3D:true});
Link to comment
Share on other sites



that's it.


tanks again!

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.