First TweenLite rotation doesn't get rendered

Question

I build some simple flipping hexagons on CodePen with TweenLite. If you click them, they flip over and reveal the other side.

The problem I am facing at the moment is that after every reload the very first flip doesn't render (Windows 10, Google Chrome 67). It shows the other side but it doesn't do the TweenLite flip "animation". This does only occur on on the very first flip and it doesn't matter which hexagon you choose. I hope someone can help me with this!

I will post a cut down version of my code on here as well so you don't have to go over to CodePen:

$(document).ready(function() {
  "use strict";
  $(".hexFront").click(function() {
    $(this).hide();
    TweenLite.to($(this), 1, {
      rotationY: 180,
      ease: Power4.easeOut
    });
    $(this)
      .next()
      .show();
    TweenLite.to($(this).next(), 1, {
      rotationY: 0,
      ease: Power4.easeOut
    });
  });
  $(".hexBack").click(function() {
    $(this)
      .prev()
      .show();
    TweenLite.to($(this).prev(), 1, {
      rotationY: 0,
      ease: Power4.easeOut
    });
    $(this).hide();
    TweenLite.to($(this), 1, {
      rotationY: 180,
      ease: Power4.easeOut
    });
  });
});

body {
  background-color: #1c1c1c;
}

#hexGrid {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 5.5%;
  overflow: hidden;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility: hidden;
  outline: 1px solid transparent;
  width: 25%;
}

.hex::after {
  content: "";
  display: block;
  padding-bottom: 86.602%;
}

.hexFront,
.hexBack {
  perspective: 800;
  transformstyle: preserve-3d;
  rotationy: -180;
  backfacevisibility: hidden;
}

.hexBack {
  display: none;
}

.hexIn {
  position: absolute;
  width: 96%;
  padding-bottom: 110.851%;
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.hexInner {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}

.hexInner img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  transform: rotate3d(0, 0, 0, 0deg);
  opacity: 0.75;
  filter: grayscale(100%);
  transition: 4s;
}

.hexInner img:hover {
  opacity: 1;
  filter: grayscale(0%);
  transition: 0s;
}

.hexInner p {
  color: black;
  text-align: center;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 2vw;
  margin: 0;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hexGrid">
  <li class="hex">
    <div class="hexFront">
      <div class="hexIn">
        <div class="hexInner">
          <img src="http://lorempixel.com/500/500/" alt="#" />
        </div>
      </div>
    </div>
    <div class="hexBack">
      <div class="hexIn">
        <div class="hexInner">
          <p> backside </p>
        </div>
      </div>
    </div>
  </li>
</ul>

Answer 1

Add a default value to transform by calling the TweenLite function before the click to avoid the issue:

$(document).ready(function() {
  "use strict";
  /* Added this */
  TweenLite.to($(".hexFront"), 1, { rotationY: 0 });
  TweenLite.to($(".hexBack"), 1, { rotationY: 180});
  /**/
  $(".hexFront").click(function() {
    $(this).hide();
    TweenLite.to($(this), 1, { rotationY: 180, ease: Power4.easeOut });
    $(this)
      .next()
      .show();
    TweenLite.to($(this).next(), 1, { rotationY: 0, ease: Power4.easeOut });
  });
  $(".hexBack").click(function() {
    $(this)
      .prev()
      .show();
    TweenLite.to($(this).prev(), 1, { rotationY: 0, ease: Power4.easeOut });
    $(this).hide();
    TweenLite.to($(this), 1, { rotationY: 180, ease: Power4.easeOut });
  });
});

body{
  background-color: #1c1c1c;
}

#hexGrid {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 5.5%;
  overflow: hidden;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility: hidden;
  outline: 1px solid transparent;
  width: 25%;
}

.hex::after {
  content: "";
  display: block;
  padding-bottom: 86.602%;
}

.hexFront,
.hexBack {
  perspective: 800;
  transformstyle: preserve-3d;
  rotationy: -180;
  backfacevisibility: hidden;
}

.hexBack {
  display: none;
}

.hexIn {
  position: absolute;
  width: 96%;
  padding-bottom: 110.851%;
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.hexInner {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}

.hexInner img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  transform: rotate3d(0, 0, 0, 0deg);
  opacity: 0.75;
  filter: grayscale(100%);
  transition: 4s;
}

.hexInner img:hover {
  opacity: 1;
  filter: grayscale(0%);
  transition: 0s;
}

.hexInner p {
  color: black;
  text-align: center;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 2vw;
  margin: 0;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hexGrid">
  <li class="hex">
    <div class="hexFront">
      <div class="hexIn">
        <div class="hexInner">
          <img src="https://picsum.photos/500" alt="#" />
        </div>
      </div>
    </div>
    <div class="hexBack">
      <div class="hexIn">
        <div class="hexInner">
          <p> backside </p>
        </div>
      </div>
    </div>
  </li>
</ul>