When fading out an element, then fading back in with a rotationY, the animated element's back is not visible until animation is finished

[szasz]

 

I'm using the GSAP to animate some elements. There seems to be a bug when fading an element out using opacity:0, or autoAlpha:0, then fading them back in with the same properties plus a rotationY: 180.

The element rotates, but only it's front is visible, when the animation completes, the backside pops in replacing the front.

When not using autoAlpha the element's sides are showing as expected.

 

Any ideas why is this happening and how to solve it?

See the Pen WNaoRaZ by hazyswim (@hazyswim) on CodePen

[mvaneijgen]

Hi @szasz welcome to the forum!

 

I have no idea why that wouldn't work. I've wrapped your .box in another element and tweened the opacity of that element and that does work. So that could be a quick fix. Maybe it is something that browsers can't handle?

 

See the Pen Rweopdx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I've created an even more simple minimal demo maybe someone else will shed some light on this issue. 

 

See the Pen abRBJrm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[GreenSock]

Yes, this has nothing to do with GSAP. It's purely a browser rendering thing. Good workaround, @mvaneijgen