CODEWITHSUNDEEP
jquerycssgsap
Mr Jonny Wood
Mr Jonny Wood

Reputation: 3854

GSAP backface-visibility

I'm beginning to learn and use the GreenSock Animation Platform (GSAP)

I've created an example of a "spinning ticket" which uses 3Dtransform to rotate an element, however I'm having trouble with backface-visibility.

Have a look at my demo here (code below).

The problems I'm seeing are:

  1. I need the <p> content to use backface-visibility: hidden so it only shows on one side of the 'spin' animation – I've tried using CSS and JS for this but nothing seems to work
  2. The pseudo :before element on #wish has a nasty flicker as the animation runs

HTML:

<div id="wrap">
  <div id="wish">
      <p>Make a wish.<br>
        Write it down.<br>
        Tie it to the tree.</p>
  </div>
</div>

CSS (Less):

* {
  box-sizing: border-box;
}
body {
  font-family: 'Source Sans Pro';
  background: #F8F8F8;
  -webkit-font-smoothing:antialiased;
}
#wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  margin: -200px 0 0 -200px;
  width: 400px;
  height: 400px;
  border-radius: 200px;
  background: #89B650;
  &:after {
    position:absolute;
    top:0;
    left:200px;
    display: block;
    width: 1px;
    height: 200px;
    content:"";
    background: white;
  }
}
#wish {
  z-index: 2;
  position:absolute;
  top:50%;
  left:50%;
  margin: -50px 0 0 -100px;
  width:200px;
  height: 100px;
  border-radius: 0 50px 50px 0;
  background: white;
  text-align: left;
  transform: rotate(-90deg);
  p {
    padding:16px 0 0 24px;
    margin:0;
  // -webkit-backface-visibility: hidden;
  //backface-visibility: hidden;
  }
  &:before {
    -webkit-backface-visibility: visible;
   backface-visibility: visible;
    content: "";
    position:absolute;
    top:50%;
    right:20px;
    display: block;
    margin:-10px 0 0 0;
    width:20px;
    height:20px;
    border-radius: 10px;
    background: #89B650;
  }
}

JS:

var container = $("#wrap"),
    ticket = $("#wish"),
    text = $("#wish p");

var tl = new TimelineMax();

tl.set(container, {perspective:800});
tl.set(text, {"backfaceVisibility":"hidden"});

tl.from(ticket, 3, {
  rotationX:360,
  repeat: -1,
  repeatDelay: 2,
  force3D:true,
  transformStyle: "preserve-3d",
})

UPDATE:

The backface-visibility issue on the text seems to only occur when there's a pseudo :before element on it's parent. Very odd.

Upvotes: 1

Views: 1103

Answers (1)

Mr Jonny Wood
Mr Jonny Wood

Reputation: 3854

This was answered for me by Jonathan on the GSAP Forums :

You will need to add transformStyle:"preserve-3d" along with backfaceVisibility:"hidden" to your #wish p selector (text)... to remove the flicker in Chrome: http://codepen.io/jonathan/pen/GgooXG

Upvotes: 1

Related Questions