backfaceVisibility not working

[rlaurencelle]

I'm having trouble trying to hide the backface of a 3D rotating div that contains text.  I'm actually rotating a container div that contains a div with an SVG graphic and a div with text. The text backface is not hiding when the div rotates. Here is the abridged code:

 

<div id="Q1">
<div id="Q1img"><img src="images/Q1.svg" alt=""/></div>
<div id="Q1outerText">Stages of Change</div>
</div>

 

 

var $Q1 = $("#Q1"),
    $Q1outerText = $("#Q1outerText"),
tl;

tl = new TimelineMax();

tl.set($Q1outerText, {backfaceVisibility:"hidden",transformStyle: "preserve-3d"})
   .to($Q1, 2, {transformOrigin:"right top", rotationY:135, delay:2, transformStyle: "preserve-3d", zIndex:10, ease:Power1.easeOut});

[PointC]

Hi rlaurencelle 

 

Welcome to the GreenSock forum and thank you for joining Club GreenSock.

 

I'm certain we can get you fixed up, but could you make a CodePen demo for us please? It's much easier to troubleshoot with editable code. Here's some info about that. 

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Once we have that, we should be able to pinpoint the problem. Jonathan is our resident wizard with anything browser related as well as rotating divs.

 

Happy tweening and welcome aboard.

[rlaurencelle]

Here is the Codepen. Thanks.\

 

See the Pen pegKZV by rlaurencelle (@rlaurencelle) on CodePen

[Dipscom]

Hello rlaurencelle,

 

Welcome to the forums!

 

Your issue is because you are setting the backface-visibility in one element and rotating another one.

 

I've forked your example and stripped down a bit further for simplicity.  Let me know if this helps you: 

See the Pen MpKLvV by dipscom (@dipscom) on CodePen

 

Also, here are two articles talking about the backface-visibility and animations - They are not GSAP related but will help you:

 

https://designmodo.com/backface-visibility-css-animation/

 

https://tympanus.net/codrops/css_reference/backface-visibility/

[rlaurencelle]

This is a great help.  Thanks!