Header Ads Widget

Ticker

6/recent/ticker-posts

Smooth Typewriter Animation Effect Using HTML, CSS, and JavaScript

Dinesh February 14, 2025

Smooth Typewriter Animation Effect Using HTML, CSS, and JavaScript

Typewriter Animation
Typewriter Animation

Introduction

Engaging animations are very interesting elements to have on a website. One such popular effect is typewriter animation, wherein text appears to be typed and erased. You must have seen this type of effect in hero sections, introduction texts, or personal portfolios.

This article will guide you step-by-step in creating smooth typewriter animation in HTML, CSS, and JavaScript. you will learn:

  • How to create typewriter effects with text being typed.
  • Smooth erasing of an already typed text.
  • Auto-looping through multiple words.

Why Should You Even Use a Typewriter Animation?

Sure, it's one cool visual animation, but, above all, it's a very effective way for enhancing the interactive qualities of a site. Read on and discover why you should give it a thought:

Grabs Attention

  • You have a matter of seconds before a visitor reaches his or her line in the article. A typewriter effect reveals the very letters that hardly stand static text. Whether you're talking about a headline, a job title, or a call-to-action, this animation makes sure people notice some typewriter animation.

Makes Your Website Modern 

  • Animations have the power, if done well enough, to render a website interactive and professional. A smooth typewriter effect would just keep adding importance to a webpage and also make your page seem much more dynamic than just plain text. All of these help in making a much better user experience.

Perfect for Portfolio & Landing Pages

  • According to many web-developing clients, typewriter animation is used mostly to represent job titles, services offered, or just significant messages in a very effective manner. Instead of writing:
"I am a developer, designer, and freelancer."
You can use a typewriter animation to display them one by one:
"I am a developer."
"I am a designer."
"I am a Freelancer."

Increases Readability

  • When users see an enormous block of text, it sometimes seems atrective. The typewriter animation slowly reveals all the text, making it easier to process and great for accentuating those main messages or slogans.

Increases Interaction and Engagement

  • A website that has animated effects is likely to keep a visitor longer. The typewriter effect adds a minor interactive component such that it will make users read what's being offered in most cases. The more visitors spend browsing through the contents, the better chances they have to explore more.

Step 1: Setting Up the HTML Structure

We'll start with a simple structure containing an <h1> element to display the typewriter effect.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Typwriter Animation</title>
</head>
<body>
  
  <h1>I'm Dinesh and a youtuber!</h1>

  <script src="./text.js"></script>
    
</body>
</html>

This HTML file includes a heading (<h1>) with a span element that will contain the dynamically typed text, along with a separate span for the blinking cursor. The JavaScript file (text.js) will handle the typing animation.

Step 2: Adding CSS for Styling and Cursor Animation

We will style the text and add a blinking cursor effect using CSS.

{
  background-color: #1f1f20;
  font-family:'Lucida Sans', 
    'Lucida Sans Regular', 'Lucida Grande', 
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
}

h1{
  font-size: 4em;
  color: white;
  text-transform: uppercase;
}

span{
  border-right: .05em solid;
  animation: typewritter 1s steps(1) infinite;
}

@keyframes typewritter {
  50%{
    border-color: transparent;
  }
}

Explanation of CSS:

  1. Using a flexbox, center the body for a neat arrangement.
  2. The h1 element is set in a large font for prominence.
  3. The cursor class creates a blinking effect of the cursor.

Step 3: Writing JavaScript for Typewriter Animation

We'll create a smooth typing effect that loops through multiple words dynamically.

document.addEventListener('DOMContentLoaded', function (event) {
  let dataText = ["Web Designer", "Frontend Development", "Youtuber", "Blogger"];

  function typeWriter(text, i, fnCallback) {

    if (i < (text.length)) {
      document.querySelector("h1").
      innerHTML = text.substring(0, i + 1) + '<span aria-hidden = "true"></span>';
      setTimeout(function () {
        typeWriter(text, i + 1, fnCallback)
      }, 100)
    }
    else if(typeof fnCallback == 'function'){
      setTimeout(fnCallback, 700)
    }
  }

  function StartTextAnimation(i) {
    if (typeof dataText[i] == 'undefined') {
      setTimeout(function () {
        StartTextAnimation(0)
      }, 2000)
    }
    if (i < dataText[i].length) {
      typeWriter(dataText[i], 0, function () {
        StartTextAnimation(i + 1)
      })
    }
  }

  StartTextAnimation(0)
})

Code for Typewriter Effect in JavaScript

This is JavaScript code for the typewriter effect that creates text by typing out each letter one at a time. The words go in a sequence, being erased and typed letter by letter again. Let's have a simple step-by-step understanding of this.

1. What this code does: 

The code types the words letter by letter; after a word is being fully spelled out, it pauses for a fraction of a second; the word is then erased and the next word is typed out; this process is repeated in a loop through the words in a list.

2. Breaking Down the Code

Step 1: The List of Words

  let dataText = ["Web Designer", "Frontend Development", "Youtuber", "Blogger"];

This array stores the different words that will be typed out. The animation will cycle through these words one by one.

Step 2: The typeWriter Function

function typeWriter(text, i, fnCallback) {

This function types each letter one by one. It takes three arguments:

  • text→ The word that is currently being typed.
  • i→ The current letter position in the word.
  • fnCallback→ A function that runs after the word is fully typed.

How it work

  if (i < (text.length)) {

  • If i (the letter index) is less than the word length, it means there are still letters left to type.
  document.querySelector("h1").innerHTML = 
    text.substring(0, i + 1) + '<span aria-hidden = "true"></span>';
  • This updates the h1 element on the webpage, showing the current portion of the word being typed.
  • text.substring(0, i + 1)→ Extracts letters from the start up to the i+1 position.
  • The <span> at the end can be used for a blinking cursor effect if needed.
setTimeout(function () {
  typeWriter(text, i + 1, fnCallback)
 }, 100);
  • After 100 milliseconds, the function calls itself again (recursion), increasing i by 1.
  • This continues until the whole word is typed.
What Happens When Typing is Done?
 else if (typeof fnCallback == 'function') {
  setTimeout(fnCallback, 700);
}
  • If the word is completely typed, the function waits 700 milliseconds before calling fnCallback.
  • This delay makes the text stay visible for a moment before erasing.
Step 3: The StartTextAnimation Function
      function StartTextAnimation(i) {
  • If there are no more words in the array (meaning i is out of range), it restarts from the first word after a 2-second delay.
Calling the typeWriter Function
 if (i < dataText.length) {
  typeWriter(dataText[i], 0, function () {
    StartTextAnimation(i + 1);
  });
}
  • If there are still words left, it calls typeWriter with the current word (dataText[i]).
  • Once the word is fully typed, it calls StartTextAnimation(i + 1) to type the next word.
Step 4: Starting the Animation
StartTextAnimation(0);
  • This kicks off the animation by calling StartTextAnimation(0), which starts typing the first word.

Step 4: Enhancements and Customizations

  • Adjusting the Speed
  • Adding a Custom Cursor
  • More Text Options
  • Additional Animation Effects

Conclusion

Final Thoughts

This script is a simple but effective way to add a typewriter animation to a webpage. It works by recursively typing letters, looping through words, and allowing delays to create a smooth effect. With a few tweaks, you can customize it to make it look even better! 🚀




Tags:
Dinesh

Posted by: Dinesh

I am Dinesh a passionate developer and YouTuber who enjoys creating innovative solutions and sharing knowledge with others.

Post a Comment

0 Comments

If you have any doubts. Please let me know