JSFiddle - React, Tailwind, and code Playground

Type Animation built by Paige Rickert for Instructure, 2017

HTML

<div class="vidTitle">
  <div id="smarter">
    <span class="typingTest rand">b</span>
    <span class="typingTest rand">w</span>
    <span class="typingTest rand">p</span>
    <span class="typingTest rand">k</span>
    <span class="typingTest rand">x</span>
    <span class="typingTest rand">v</span>
    <span class="typingTest rand">t</span>
  </div>
  <div id="people">
    <span class="typingTest rand">z</span>
    <span class="typingTest rand">c</span>
    <span class="typingTest rand">t</span>
    <span class="typingTest rand">w</span>
    <span class="typingTest rand">p</span>
    <span class="typingTest rand">t</span>
  </div>
  <div id="doo">
    <span class="typingTest rand">r</span>
    <span class="typingTest rand">v</span>
  </div>
  <div id="smarter2">
    <span class="typingTest rand">e</span>
    <span class="typingTest rand">n</span>
    <span class="typingTest rand">c</span>
    <span class="typingTest rand">v</span>
    <span class="typingTest rand">r</span>
    <span class="typingTest rand">d</span>
    <span class="typingTest rand">s</span>
  </div>
  <div id="things">
    <span class="typingTest rand">w</span>
    <span class="typingTest rand">a</span>
    <span class="typingTest rand">y</span>
    <span class="typingTest rand">b</span>
    <span class="typingTest rand">k</span>
    <span class="typingTest rand">q</span>
  </div>
</div>

CSS

.vidTitle {
  font-size: 40px;
  font-family: Arial, sans-serif;
  line-height: 1.2;
  text-transform: uppercase;
}

JavaScript

var smarter = ['s', 'm', 'a', 'r', 't', 'e', 'r'];
var people = ['p', 'e', 'o', 'p', 'l', 'e', ''];
var doo = ['d', 'o'];
var smarter2 = ['s', 'm', 'a', 'r', 't', 'e', 'r'];
var things = ['t', 'h', 'i', 'n', 'g', 's', ''];

var typeWords = function() {
  $('.vidTitle #smarter .rand').each(function(i) {
    var letter = $(this);
    setTimeout(function() {
      letter.addClass('typer');
    }, i * 40);
    setTimeout(function() {
      letter.removeClass('typer');
      letter.addClass('typed');
      letter.text(smarter[i]);
    }, i * 100);
  });
  $('.vidTitle #people .rand').each(function(i) {
    var letter = $(this);
    setTimeout(function() {
      letter.addClass('typer');
    }, i * 70);
    setTimeout(function() {
      letter.removeClass('typer');
      letter.addClass('typed');
      letter.text(people[i]);
    }, i * 150);
  });
  $('.vidTitle #doo .rand').each(function(i) {
    var letter = $(this);
    setTimeout(function() {
      letter.addClass('typer');
    }, i * 60);
    setTimeout(function() {
      letter.removeClass('typer');
      letter.addClass('typed');
      letter.text(doo[i]);
    }, i * 200);
  });
  $('.vidTitle #smarter2 .rand').each(function(i) {
    var letter = $(this);
    setTimeout(function() {
      letter.addClass('typer');
    }, i * 50);
    setTimeout(function() {
      letter.removeClass('typer');
      letter.addClass('typed');
      letter.text(smarter2[i]);
    }, i * 210);
  });
  $('.vidTitle #things .rand').each(function(i) {
    var letter = $(this);
    setTimeout(function() {
      letter.addClass('typer');
    }, i * 60);
    setTimeout(function() {
      letter.removeClass('typer');
      letter.addClass('typed');
      letter.text(things[i]);
    }, i * 200);
  });
}

$(document).ready(function() {
  typeWords();

});

var s = 1;
setInterval(function() {
  s = Math.floor(Math.random() * (14 - 0 + 1)) + 0;
  swapWords(s);
}, 6500);

//SWAP WORDS
var swap6 = ["DJS", "NN TSS"];
var swap2 = ["RETAILERS",...