Hi everyone:
I'm trying to do my first 3D animation in GSAP.
http://codepen.io/davidspell/full/vGbbVM/
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