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!

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

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?

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