<div class="line line--top"></div>
<div class="line line--right"></div>
<div class="line line--bottom"></div>
<div class="line line--left"></div>
<div class="mask"></div>
<div class="text-center">
  <h1 class="text">GSAP is awesome!</h1>
  <h3 class="text2">Read <a href="https://medium.com/notonlycss/starting-with-gsap-c4142fd95dbe">this article</a> to start using GSAP</h3>
</div>

body {
  position:relative;
  min-height: 100vh;
  background-color:#000;
  padding:0;
  margin:0;
  overflow:hidden;
  display: flex;
  align-items:center;
  justify-content: center;
}
.line {
  position: absolute;
  background-color: #000;
  z-index:2;
  &--top {
    top:0;
    left: 0;
    width: 0;
    height: 5px;
  }
   &--right {
    top:0;
    right: 0;
    height: 0;
    width: 5px;
  }
  &--bottom {
    bottom:0;
    right: 0;
    width: 0;
    height: 5px;
  }
  &--left {
    bottom:0;
    left: 0;
    height: 0;
    width: 5px;
  }
}
.mask {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:#fff;
  z-index:1;
}
.text,.text2{
  color:#fff;
  opacity:0;
  a {
    color: green;
  }
}
.text-center {
  text-align:center;
}

var tl = new TimelineMax({repeat:3, repeatDelay:3});
tl.to(".line--top", 0.6, {width:"100%", ease: Power2.easeIn})
         .to(".line--right", 0.6, {height:"100%",ease: Power0.easeNone})
         .to(".line--bottom", 0.6, {width:"100%",ease: Power0.easeNone})
         .to(".line--left", 0.6, {height:"100%",ease: Power2.easeOut})
         .to(".mask", 1, {left:"100%"})
         .to(".text", 0.8, {opacity:1})
         .to(".text2", 0.8, {opacity:1});