3D animation flickering in Chrome and question about perspective

[david_37988]

Hi everyone:

 

I'm trying to do my first 3D animation in GSAP.

 

 

I have a couple of questions:

 

1. Flickery 3D animation in Chrome(mac):

 

I am using SVG images and perspective and I noticed as soon as I started adding perspective to my animation in chrome it started getting flickery (see the grey box). I checked the threads on GSAP and stackoverflow and came across this:

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-2

 

Not sure if its the same issue in my animation.  It would suck if it is b/c its chrome 50 and the issue is being reported in chrome 49.  

Does anyone have a reco on how to fix this?

 

2. RotationX calculation:

 

I am trying to calculate how much rotation I need on my donuts in order for them to stand 0 degrees, so that when they rotate in the last sequence they can of rotate straight 360 .  I have added perspective 150 to my container and then animated the container to rotateX : 30.  Then the donuts rotateX : -50.  It seems that I need to keep tweaking the rotateX value on the donut but can't quite get them to stand straight up.  When I inspect them in the browser to try to tweak the rotation you get the crazy matrix3d property which I can't figure out how to nudge.  Is there an easier way to calculate or manipulate easier how much percent I would need?

 

Thanks and let me know if I have not been clear.

 

David

 

See the Pen vGbbVM by davidspell (@davidspell) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for providing the demo. I can see that the ham picture gets cropped in a funky way:

http://i.imgur.com/SQSxdgO.png

 

I'm really not sure what the cause is. Definitely something on Chrome's end.

 

I would suggest the following:

• reduce the demo to the absolute bare minimum of code and images to reproduce the issue
• try swapping the SVG imgs for regular bitmap (png, jpg, gif)

Let us know if those tests produce any different results. Perhaps once its simplified we can better assess what's happening.

At the very least you will have a demo suitable for the Chrome team to investigate. From how they dealt with issue in the thread you referenced I have to say I'm impressed with the effort they put forth.

 

Unfortunately the specifics of how Chrome renders 3D transforms on SVG is a bit out of my wheelhouse. 

 

As for your more general question about dealing with 3D perspective and various values, its always a bit of a guessing game for me. Perspective is tricky, your donuts may be standing straight up but perspective is going to always add a bit of distortion.