<div id="type"></div>
<div class="type2">
  <span class="p1">Abraham Lincoln</span>
  <span class="p2">George Washington</span>
  <span class="p3">Ronald Reagan</span>
  <span class="p4">John F Kennedy</span>
</div>

#type {
  font-size: 2rem;
  padding: 10px;
  background: #f9f9f9;
  margin: 2rem 2rem 1rem;
  display: table;
  min-width: 1rem;
  min-height: 2.5rem;
  font-family: monospace;
}
/*
Flashing caret
#type:after {
  content: "|";
  margin-left: 10px;
  animation: caret 0.3s infinite;
  opacity: 0;
}
@keyframes caret {
  50% {
    opacity: 1;
  }
}
*/

/* CSS Version */
.type2 {
  position: relative;
  margin: 0 2rem;
}
.type2 span {
  font-size: 2rem;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  padding: 10px 10px 10px 0;
  text-indent: 10px;
  background: #f9f9f9;
  font-family: monospace;
  display: flex;
  width: 0;
  animation: typing 10s steps(15) infinite 0s;
}
span.p2 {
  animation: typing1 10s steps(18) infinite 2.5s;
}
span.p3 {
  animation: typing2 10s steps(13) infinite 5s;
}
span.p4 {
  animation: typing3 10s steps(14) infinite 7.5s;
}
@keyframes typing {
  12.5% {
    width: 15ch;
  }
  25% {
    width: 0;
  }
}
@keyframes typing1 {
  12.5% {
    width: 18ch;
  }
  25% {
    width: 0;
  }
}
@keyframes typing2 {
  12.5% {
    width: 13ch;
  }
  25% {
    width: 0;
  }
}
@keyframes typing3 {
  12.5% {
    width: 14ch;
  }
  25% {
    width: 0;
  }
}

(function (d) {
  "use strict";
  const typeText = [
    "Abraham Lincoln",
    "George Washington",
    "Ronald Reagan",
    "John F Kennedy"
  ];
  const getSegment = (strg, position) =>
    strg.split("").slice(0, position).join("");
  const myElement = d.getElementById("type");

  var timeLoop;
  var pos = 0;
  var increment = 1;
  var counter = 0;

  function textLoop() {
    myElement.textContent = getSegment(typeText[counter], pos);
    pos += increment;
    if (pos === typeText[counter].length) {
      increment = -increment;
    }
    if (pos === 0) {
      increment = 1;
      counter++;
      if (counter === typeText.length) {
        counter = 0;
      }
    }
    timeLoop = setTimeout(textLoop, 80);
  }
  textLoop();
})(document);