p.text 
  span.text__first
    span.text__word
      | Hello 
    span.text__first-bg
  br
  span.text__second
    span.text__word
      | World
    span.text__second-bg
button.restart repeat

body, html{
  height: 100%;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'Lato';
  font-weight: 900;
  color: #353535;
  position: relative;
}

.text{
  display: inline-block;
  font-size: 15vmin;
  line-height: 1.205;
}

.text__first, .text__second{
  position: relative;
}

.text__word{
  opacity: 0;
}

.text__first-bg, .text__second-bg{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  transform-origin: left;
  transform: scaleX(0);
}

.text__first-bg{
  background-color: #5fbff9;
}

.text__second-bg{
  background-color: #f06543;
}

.text__second{
  margin-left: 15vmin;
}

.restart{
  position: absolute;
  font-size: 12px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border: none;
  border-bottom: 1px dotted grey;
  padding: 0;
  margin: 0 auto 2%;
  cursor: pointer;
  color: grey;
}

// envelope animation
window.onload = function(){
  var tl = new TimelineLite({delay: 1}),
    firstBg = document.querySelectorAll('.text__first-bg'),
    secBg = document.querySelectorAll('.text__second-bg'),
    word  = document.querySelectorAll('.text__word');
  
  tl
    .to(firstBg, 0.2, {scaleX:1})
    .to(secBg, 0.2, {scaleX:1})
    .to(word, 0.1, {opacity:1}, "-=0.1")  
    .to(firstBg, 0.2, {scaleX:0})
    .to(secBg, 0.2, {scaleX:0});
  
  document.querySelector('.restart').onclick = function() {tl.restart()};
}