title: Rotate card back onclick GSAP
body: <p>I have a project that has flip cards which I had working great until I looked in IE (10, and 11). I understand transform-style: preserve-3d; is not supported in IE so I have decided to go another route. I stumbled across a fix using GSAP and a codepen example that works in IE. My issue is I want it to rotate back and forth on click and not hover. Not having much GSAP experience is there a way to reverse the animation on click?</p>
  
  <p>UPDATED QUESTION: I'd like to fire the animation on click of "button" in cards not on the whole container. I've set it up but the only issue is it's flipping ALL the cards instead of just one like I want</p>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;div id="mainWrap"&gt;
          &lt;div class="cardCont"&gt;
              &lt;div class="cardBack"&gt;Back&lt;/div&gt;
              &lt;div class="cardFront"&gt;Front&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="cardCont"&gt;
              &lt;div class="cardBack"&gt;Back&lt;/div&gt;
              &lt;div class="cardFront"&gt;Front&lt;/div&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>GSAP:</p>
  
  <pre><code>  //Card flip animations
      TweenMax.set($($flipCardBack), {rotationY: -180});
  
      $.each($flipCardContainer, function (i, element) {
          var frontCard = $(this).find('.flip-card-front'),
              backCard = $(this).find('.flip-card-back'),
              tl = new TimelineMax({paused: true, reversed: true});
          tl
              .to(frontCard, 1, {rotationY: 180})
              .to(backCard, 1, {rotationY: 0}, 0)
              .to(element, .5, {z: 50}, 0)
              .to(element, .5, {z: 0}, .5);
  
          element.animation = tl;
  
          $('.flip-card__toggle').on('click', function () {
              if (tl.progress() === 0
                  || tl.reversed()) {
                  tl.play();
              } else {
                  tl.reverse();
              }
          });
      });
  </code></pre>