<!--------------- HTML ------------- -->

<div class="ctn-title">
  <div class="wrap-title">
    <div class="holder-title">
      <a href="" class="link-title">DECORATION</a>
      <a href="" class="link-title">GRAFITTI</a>
      <a href="" class="link-title">CLIPPING</a>
      <a href="" class="link-title">JOBS</a>
      <a href="" class="link-title">DECORATION</a>
    </div>
  </div>
</div>


<!--------------- CSS ------------- -->
<style>


  //=========== TITLE
.ctn-title {
  position: relative;
  height: 40px;

  .wrap-title {
    position: absolute;
    height: 100%;
    overflow: hidden;

    .holder-title {
      display: flex;
      flex-direction: column;

      a {
        color: #FFF;
        font-size: 37px;
       }
    }
  }
}


</style>


<!--------------- js ------------- -->
<script>

/* =================
    TL TITLE
==================== */
var holderT = $('.holder-title');
var goTitle = 43;

var tlGoTitle = new TimelineMax({delay:.08, onComplete: backTitle})
.to(holderT, 1,{ y: -goTitle, ease: Power3.easeInOut})//.addPause()
.to(holderT, 1,{ y: -goTitle*2, ease: Power3.easeInOut})//.addPause()
.to(holderT, 1,{ y: -goTitle*3, ease: Power3.easeInOut})//.addPause()
.to(holderT, 1,{ y: -goTitle*4, ease: Power3.easeInOut})
;

function backTitle (){
  tlGoTitle.play(0);
}
  </script>