Animated Text 01

by davidxmartins

HTML

<h1 class="animatedText"></h1>

CSS

.animatedText {
  color: black;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 48px;
  display: inline-block;
  padding: 0;
  border-right: 1px solid #414141;
}

JavaScript

const textArray = [
  "Hello!",
  "My name is Connor MaCleod",
  "I'm a Designer",
  "Illustrator",
  "Brand Stratagist",
  "and Web Developer",
  "I create",
  "Visual Identity Systems",
  "UI and UX Design",
  "Print Design",
  "Illustrations",
  "Icons",
  "Info-graphics",
  "And product photography,",
  "Enjoy."
];

let typeJsText = document.querySelector(".animatedText");
let stringIndex = 0;
let charIndex = 0;
let isTyping = true;

function typeJs() {
  if (stringIndex < textArray.length) {
    const currentString = textArray[stringIndex];
    
    if (isTyping) {
      if (charIndex < currentString.length) {
        typeJsText.innerHTML += currentString.charAt(charIndex);
        charIndex++;
      } else {
        isTyping = false;
        setTimeout(typeJs, 900); // pause before starting erase
        return;
      }
    } else {
      if (charIndex > 0) {
        typeJsText.innerHTML = currentString.substring(0, charIndex - 1);
        charIndex--;
      } else {
        isTyping = true;
        stringIndex = (stringIndex + 1) % textArray.length;

        charIndex = 0;
        typeJsText.innerHTML = "";
      }
    }
    setTimeout(typeJs, 30); // typing and erasing speed
  }
}

typeJs(); // Start the animation