Text Typing Animation HTML CSS and JS

This tutorial will guide you through creating a text typing animation effect using HTML, CSS, and JavaScript. This is a great way to add a dynamic and engaging element to your web pages, and it’s surprisingly simple to implement. We’ll be building a simple animation that types out different words, then erases them, and repeats the process.

Step 1: Setting up the HTML Structure

Create the basic HTML

First, we need to create the basic HTML structure for our animation. This involves a container div and a paragraph element containing spans for the typed text and the cursor.

<div class="container">
    <p>Coding is <span class="typed-text"></span><span class="cursor">&nbsp;</span></p>
  </div>

Step 2: Styling with CSS

Add CSS for visual appeal

Next, we’ll add some CSS to style our animation. This includes setting up the fonts, background color, and styling for the typed text and cursor.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #000;
  color: #eee;
}
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container p {
  font-size: 3rem;
  padding: 0.5rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-align: center;
  overflow: hidden;
}
.container p span.typed-text {
  font-weight: normal;
  color: #dd7732;
}
.container p span.cursor {
  display: inline-block;
  background-color: #ccc;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}
.container p span.cursor.typing {
  animation: none;
}
@keyframes blink {
  0%  { background-color: #ccc; }
  49% { background-color: #ccc; }
  50% { background-color: transparent; }
  99% { background-color: transparent; }
  100%  { background-color: #ccc; }
}

Step 3: Adding the JavaScript Logic

Implement the typing animation

Now, we’ll add the JavaScript code that does the heavy lifting. This script manages the text array, typing speed, erasing speed, and the animation itself.

const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");

const textArray = ["hard", "fun", "a journey", "LIFE"];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, typingDelay);
  } 
  else {
    cursorSpan.classList.remove("typing");
  	setTimeout(erase, newTextDelay);
  }
}

function erase() {
	if (charIndex > 0) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
    charIndex--;
    setTimeout(erase, erasingDelay);
  } 
  else {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    if(textArrayIndex>=textArray.length) textArrayIndex=0;
    setTimeout(type, typingDelay + 1100);
  }
}

document.addEventListener("DOMContentLoaded", function() { // On DOM Load initiate the effect
  if(textArray.length) setTimeout(type, newTextDelay + 250);
});

Congratulations! You’ve successfully created a text typing animation. Remember to adjust the timing variables in the JavaScript code to fine-tune the animation speed to your liking.