JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700"></script>
<div id="message">
  <div class="left">Elegant</div>
  <div class="right">Web Design</div>
</div>

SCSS

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

#message {
  font-size: 42px;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  color: white;
  text-transform: uppercase;
  position: relative;
  font-weight: 700;
  .left,
  .right {
    position: absolute;
    padding: 5px 10px;
  }
  .left {
    right: 50%;
    background: $red;
    overflow: hidden;
    width: 200px;
    transition: .3s width cubic-bezier(0.77, 0, 0.175, 1);
    &.collapsed {
      width: 0px;
    }
  }
  .right {
    left: 50%;
  }
}

JavaScript

jQuery(function($) {
  var words = ["Beautiful", "Effective", "Simple", "Minimal", "Elegant", "Efficient", "Aesthetic", "Functional"];
  var sleepCollapsed = 600;
  var sleepExpanded = 2000;

  var $el = $("#message .left");
  if (!$el.length) {
    return;
  }


  $el.text(words[0]);
  setTimeout(function() {
    tick(1);
  }, sleepExpanded);

  function tick(i) {
    var word = words[i % words.length];
    $el.addClass("collapsed");
    setTimeout(function() {
      $el.text(word);
      $el.removeClass("collapsed");
      setTimeout(function() {
        tick(i + 1);
      }, sleepExpanded);
    }, sleepCollapsed);
  }
});