Jump to content
GreenSock

BlackArtNet

Tell draggable to use translateX/translateY instead of translate3d

Go to solution Solved by OSUblake,

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

Is there a way to force draggable plugin into using plain translateX/translateY instead of translate3D?

 

Using 3D transformation in Chrome always ends with blurry result (not something Greensock could possibly fix unfortunately) and in my case its very important to keep very crisp and sharp shapes.

 

Thank You!

Link to comment
Share on other sites

  • Solution

That's probably because of subpixel rendering. Are you using throwProps? It might be more noticeable if you don't use 3D because it will go from blurry to clear.

Draggable.create(".foo", {
  force3D: false
});
  • Like 4
Link to comment
Share on other sites

Wow that did help instantly, thanks!

IMHO the parameter name is quite misleading, I knew of its existence but didnt event tried it because of its name.

 

I'm not using throwProps but its a known issue with Chrome: It's engine converts transformed content (when You are using translate3D) into texture to provide GFX acceleration.

 

The only workaround I know is to oversize content by a large margin, remembering to keep negative Z value, it works because this way You end with higher resolution textures.

  • Like 1
Link to comment
Share on other sites

Yeah, ever since force3D became "auto" enabled, people have forgotten all about it, but it can definitely clear things. I asked about the throwProps because that is when it seems to most noticeable. I tried making a responsive Draggable a long time ago, but that blurriness really bothered me. If you drag, not throw, the box in this demo, you can see it almost jump an entire pixel when you release the mouse.

See the Pen azMONr?editors=0010 by osublake (@osublake) on CodePen

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