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 Graphic and Web Designer,",
  "Here you'll find some of my work,",
  "which includes, UI and UX Design,",
  "Brand and Identity Design,",
  " Web development, and Illustration.",
  "I like to create Identity Systems,",
  "that align with the core values of a company,",
  "and project the desired perception of a brand."
  // Add more strings as needed
];

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;
      }
    } else {
      if (charIndex > 0) {
        typeJsText.innerHTML = currentString.substring(0, charIndex - 1);
        charIndex--;
      } else {
        isTyping = true;
        stringIndex = (stringIndex + 1) % textArray.length;

        charIndex = 0;
        typeJsText.innerHTML = "";
        // Adjust the interval for faster erasing (e.g., 50 milliseconds)
        setTimeout(() => {
          typeJs();
        }, 50);
        return;
      }
    }
  }

  // Adjust the interval for typing (e.g., 100 milliseconds)
  setTimeout(typeJs, 100);
}

typeJs(); // Start the animation