<div id="type"></div>
#type {
  font-size: 2rem;
  padding: 10px;
  background: #f9f9f9;
  margin: 2rem;
  display: table;
  min-width: 1rem;
  min-height: 2rem;
}
/*
Flashing caret
#type:after {
  content: "|";
  margin-left: 10px;
  animation: caret 0.3s infinite;
  opacity: 0;
}
@keyframes caret {
  50% {
    opacity: 1;
  }
}
*/
(function (d) {
  "use strict";
  const typeText = [
    "Abraham Lincoln",
    "George Washington",
    "Ronald Reagan",
    "John F Kennedy"
  ];
  const myElement = d.getElementById("type");

  var convertArray = typeText[0].split("");
  var timeLoop;
  var pos = 0;
  var increment = 1;
  var counter = 0;

  function textLoop() {
    if (increment > 0 && pos < convertArray.length) {
      myElement.innerHTML += convertArray[pos];
      pos += increment;
      if (pos === convertArray.length) {
        increment = -increment;
      }
    }
    if (increment < 0 && pos >= 0) {
      myElement.innerHTML = convertArray.join("");
      if (pos > 0) {
        convertArray.pop();
      }
      pos += increment;
      if (pos < 0) {
        convertArray = typeText[counter].split("");
        pos = 0;
        increment = -increment;
      }
    }

    if (convertArray.length === 0) {
      counter++;
    }
    if (counter === typeText.length) {
      counter = 0;
    }

    timeLoop = setTimeout(textLoop, 100);
  }
  textLoop();
})(document);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.