JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://fonts.googleapis.com/css?family=Raleway:400,700"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100,400,700">

<div id="typed">
</div>
<div id="typed-after" style="display: none;">Direct and thoughtful messaging captures the essence of corporate communication and business writing. At WordPower we use the beauty and power of the written and spoken word to bring life and meaning to tell your story with the brevity, clarity, consistency,
  coherence and relevance it deserves. Our core values of delivering excellence and value-adds to clients’ communication needs are the key drivers of our success. That’s the WordPower way of building enduring relationships with customers.</div>

CSS

body {
  font-family: Raleway;
  background: black;
  margin-top: 50px;
}

#typed {
  width: 400px;
  margin: 0 auto;
  color: white;
  font-size: 32px;
  font-weight: 100;
  position: relative;
}

#typed .suffixes {
  font-weight: bold;
  /* text-decoration: underline; */
  font-style: italic;
}

.typed-cursor {
  font-size: 1.3em;
  padding-left: 3px;
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#typed-after {
  font-size: 18px;
}

JavaScript

$.fn.multiTyped = function(options) {
  var $this = $(this);
  setSlide(0);

  function setSlide(i) {
    if (i >= options.slides.length) {
      if (options.callback) options.callback();
      return;
    }
    var slide = options.slides[i];
    var $prefix = $("<span>").hide().addClass("prefix").text(slide.prefix).appendTo($this);
    var $suffixes = $("<span>").addClass("suffixes").appendTo($this);
    var $cursorWrapper = $("<span>").hide().addClass("cursor-wrapper").appendTo($this);
    var $cursor = $("<span>").addClass("typed-cursor").text("|").appendTo($cursorWrapper);
    $prefix.add($cursorWrapper).fadeIn(options.prefixFadeInDuration).promise()
      .then(function() {
        $cursor.remove();
        $suffixes.typed({
          strings: slide.suffixes,
          typeSpeed: options.typeSpeed,
          startDelay: options.startDelay,
          callback: function() {
            setTimeout(function() {
              $this.find(".typed-cursor, .prefix, .suffixes").fadeOut();
              setTimeout(function() {
                setSlide(i + 1);
              }, 1000);
            }, options.nextSlideDelay);
          },
        });
      });
  }
}

$("#typed").multiTyped({
  slides: [{
    prefix: "We are ",
    suffixes: ["Wordsmiths", "bold writers"]
  }, {
    prefix: "Your content ",
    suffixes: ["on steroids", "with clarity"]
  }],
  nextSlideDelay: 1000,
  prefixFadeInDuration: 1500,
  typeSpeed: 95,
  startDelay: 0,
  callback: function() {
    $("#typed-after").appendTo("#typed")
      .css({
        opacity: 0,
        display: "block"
      })
      .offset({
        top: 70
      })
      .animate({
        opacity: 1,
        top: 0,
        left: 0
      }, 1500);
  }
});