3D Transform matrix3d artifacts = Blurry elements in Safari (OSX and iOS)

[zkilgore]

I am trying to animate 2 elements that exist on top of each other, but are rotated 180 degrees to form a card with a back and a front. After the animation completes the elements are blurry. This is what the css transform is upon inspection:

transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1);

When I adjust the -0.002 to be 0 in the inspector, voila! The element is crisp and clear.

 

 

Here is the code I am using to animated the elements (node is the element)

animateIn: function() {
  TweenLite.to(node, .3, {opacity: 1, rotationY: 0, ease: Linear.easeNone});
}

animateOut: function() {
  TweenLite.to(node, .3, {opacity: 0, rotationY: -180, ease: Linear.easeNone});
}

Is the animation just not completing? Any insight as to how to fix this?

 

NOTE: I've included a codepen url of the exact effect I am trying to achieve, and one where the rotation animations successfully complete. When they work I imagine 

 

transform: matrix(1, 0, 0, 1, 0, 0);

 

is what will be applied to the style attribute.

 

 

Thanks,

Zach

See the Pen VYPQmL by zkilgore (@zkilgore) on CodePen

[Jonathan]

Hello zkilgore, and welcome to the GreenSock forum!

 

That blurriness is a common rendering bug in webkit based browsers (safari and chrome) .. and not a GSAP bug.

 

Usually it can be fixed by adding perspective to your elements parent or adding transformPerspective to the element itself.

 

Also you can try adding transformStyle:"preserve-3d" .. to your tweens.

/////////////////////////////////////////////////////////
// add to your tweens
animateIn: function() {
  TweenLite.to(node, .3, {opacity: 1, rotationY: 0, transformStyle:"preserve-3d", ease: Linear.easeNone});
}

animateOut: function() {
  TweenLite.to(node, .3, {opacity: 0, rotationY: -180, transformStyle:"preserve-3d", ease: Linear.easeNone});
}

/////////////////////////////////////////////////////////
// or you can use the GSAP set() method
TweenLite.set(node, {transformStyle:"preserve-3d"});

animateIn: function() {
TweenLite.to(node, .3, {opacity: 1, rotationY: 0, ease: Linear.easeNone});
}

animateOut: function() {
TweenLite.to(node, .3, {opacity: 0, rotationY: -180, ease: Linear.easeNone});
}

And make sure you are you using the latest version of GSAP

 

Let us know if this helps..

 

Also to better help you.. can you please setup a limited codepen demo example so we can test and edit your code live?

 

Here is a nice video tut by GreenSock on how to create a codepen demo example.

 

Resources:

• transform-style: preserve-3d [ css property ] - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style
• perspective [ css property ] - https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
• transform: perspective() [ css transform function ] - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms

Thanks!

[zkilgore]

Hey Jonathan, thanks so much for your quick response. I did add in a code pen example, and the good news is it works perfectly and I am not getting any blurriness.

 

The bad news is that in my app it is still not working, even with the

transformStyle:"preserve3d"

parameter set. And that is trying both of your suggestions.

 

I'm pretty sure it has something to do with the fact that my elements are not finishing with a style of 

transform: matrix(1, 0, 0, 1, 0, 0);

but instead finishing with a style of 

transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1);

as whenever I change the -0.002 to a 0 it sharpens right up.

 

I actually looked at another post that had the beta of the next release in a codepen example, and when I included that instead of the stable version it actually worked (kinda, cause a bunch of other things broke, but at least it was crisp!). Any insight into why that might be the case?

[zkilgore]

FYI it was this post:

 

http://greensock.com/forums/topic/11115-css3-rotation-and-matrix3d-values-precision-vs-the-straight-rotatey/

[zkilgore]

UPDATE!

 

I added

transform-style: preserve-3d;  

to the css class (directly to the sass file, not using GSAP), and now it does work as expected. Crisp and clear.

 

Thank you for all the help!

[Carl]

Hi Kilgore

 

It would be very helpful to know what is breaking with the preview release.

 

Any descriptions accompanied by a simple demo would be super helpful.

 

Thanks!

[GreenSock]

Yeah, please let us know what exactly was "broken" in that preview. I'm VERY curious to know. 

 

UPDATE: Nevermind, I think I see what you're talking about. Looking into it now.

 

Also, the reason your transformStyle:"preserve3d" didn't work when going through GSAP is because you set the wrong value - you were missing a "-", so it should be transformStyle:"preserve-3d"

[GreenSock]

I saw what you meant about the preview acting oddly, and I'm glad you brought this up because you happened to hit the only scenario that broke the new css parsing algorithm for transforms, and it should be all fixed up now. It simply had to do with the fact that a rotateY of 180 is exactly the same thing as rotateY(0deg), rotateX(180deg), rotate(180deg) in terms of the matrix, so I just had to add some conditional logic in the parser. The updated preview is the most accurate parser ever in GSAP as far as I can tell now (it solves some other edge cases that existed in the older versions). I updated that preview TweenMax on codepen (https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js). You probably need to clear your cache though.