JSFiddle - React, Tailwind, and code Playground

by sidd82

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
<div id="message">
  <div class="left"><span>Elegant</span></div>
  <div class="right">Web Design</div>
</div>

SCSS

$red: #f2013f;
body {
  background: #333;
  margin-top: 40px;
}

#message {
  $ls: -2px;
  font-size: 42px;
  font-family: Verdana;
  letter-spacing: $ls;
  color: white;
  text-transform: uppercase;
  position: relative;
  font-weight: 700;
  .left,
  .right {
    position: absolute;
    padding: 5px (10px - $ls) 5px 10px;
  }
  .left {
    right: 50%;
    background: $red;
    span {
      display: block;
      overflow: hidden;
    }
  }
  .right {
    left: 50%;
  }
}

JavaScript

var words = ["Beautiful", "Effective", "Simple", "Minimal", "Elegant", "Efficient", "Aesthetic", "Functional"];

var tl = new TimelineLite({
  onComplete: function() {
    tl.restart();
  }
});

var el = document.querySelector("#message .left span");
el.style.width = 0;

words.forEach(function(word) {
  tl.call(function() {
    el.innerText = word;
  });

  tl.to(el, 0.5, {
    width: function() {
      el.style.width = "auto";
      var width = el.clientWidth;
      el.style.width = 0;
      return width;
    },
    ease: Power3.easeInOut
  }, "+=0.1");

  tl.to(el, 0.5, {
    width: 0,
    ease: Power3.easeInOut
  }, "+=3");
});