Jump to content
Search Community

Draggable translateZ 0px causes child elements to blur

BornToCreate test
Moderator Tag

Go to solution Solved by Jonathan,

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

Hello,

I am using the Greensock Draggable as a container with several child elements.

 

Now the css translate3d(Npx, Npx, 0px) is added to the the Draggable.

But the translateZ 0px causes every child element to be blured.

 

When I overwrite it with Developer Tools to 1px the elements arent blured anymore.

Is there a way to permanently add translateZ(1px)?

 

Link to comment
Share on other sites

  • Solution

Hello BornToCreate, and Welcome too the GreenSock Forum!

 

What you are seeing is a browser bug, and not a GSAP bug. This is due to a browser bug that mostly affects webkit based browsers like Chrome webkit and Apple webkit. That is due to having that element render on the GPU, which puts that element on its own rendering layer. Then it  is made into some type of bitmap for the GPU. And then when the element is finished animating it is removed from its own rendering layer. That is why it becomes blurry, since this browser bug is more of a an anti-alias bug. But this is a standard behavior with webkit based browsers.

 

The bug has to do with the z-axis, even if at 0 for CSS 3D transforms. a couple of years ago you could just add perspective  or transformPersepective  along with transform-style: preserve-3d  to fix this bug. But that no longer works. So in order to fix this bug you must add force3D:false to your tweens or Draggable instance. Since force3D is set to "auto" by default.

 

GSAP Draggable Docs:

  • force3D : Boolean - by default, 3D transforms are used (when the browser supports them) in order to force the element onto its own layer on the GPU, thus speeding compositing. Typically this provides the best performance, but you can disable it by setting force3D:false. This may be a good idea if the element that you're dragging contains child elements that are animating.

force3D is part of the GSAP CSSPlugin

  • As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance.

Also in the future please setup a codepen demo example. This way we can help you better by seeing your code in context and live.

 

Here is a great video tut by GreenSock on How to create a codepen demo example:

 

 

Resources:

Draggable Docs: http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/

CSSPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

 

:)

  • Like 3
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...