Reveal Description Text with typing effect Using JavaScript: 3 Approaches.

In this blog post you’ll learn how to create a typing effect using JavaScript. We’ll see two approaches to achieve it.

How it looks:

When page loads the paragraph starts appearing automatically with typing effect.

JavaScript Method used:

setTimeout() Method.

JavaScript loop:

For loop

Create Typing Effect.

We are going to create a typing effect on text (paragraph).

Approach 1: Combining For loop and setTimeout Method.

1. First, we will select the HTML element containing the text we want to apply the typing effect to.
2. Then, we will store all the text from the selected element in a variable named paragraph. We will then empty the text content from the selected element.
3. Now, we will use a for loop to iterate through each character in the paragraph variable. Inside the loop, we will use the setTimeout method to add each character back to the selected element with a delay based on the character's index value.

See below code

HTML

    <div class="container">
        <p class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit maiores, animi sed ad voluptatibus beatae consequatur deleniti in assumenda odit!</p>
    </div>
  

CSS

  * {
    padding: 0px;
    margin: 0px;
}

body {
    width: 100%;
    height: 100vh;
    background: linear-gradient(90deg, #1d005b, #6b046b);
    position: relative;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background-color: #fff;
    padding: 30px;
    border-radius: 5px;
    font-size: 20px;
}
  

JavaScript

    let text = document.querySelector(".text");

    let paragraph = text.innerHTML;
    text.innerHTML = "";
    for (let i = 0; i < paragraph.length; i++) {
        const element = paragraph[i];
        setTimeout(() => {
            text.innerHTML += element;
        }, i * 50);

    }  

Output:

Approach 2: SetTimeout Method.

In this method, we'll create a loop using the setTimeout method within a function. The function calls itself again after a delay, achieving the typing effect.

steps:

1. We’ll store the text or value of the target HTML element in a variable named paragraph.
2. Then clear the content of the selected (targeted) HTML element. 
3. After that we'll define the variable. i variable for extracting the letters from the paragraph variable by its value used as an index and settimeout_method for storing the reference of setTimeout method.
4. Then we’ll call and create a function.
5. In that function .We’ll Increment the i variable by 1. Based on the i variable we’ll extract the letter from the paragraph variable and append the extracted letter to the target HTML element. Then we’ll Invoke the setTimeout method with a specified delay, calling the same function again. This creates the loop that appends letters one by one according to the i variable value. When the entire paragraph variable's content is added, we’ll clear the setTimeout method and reset the i variable to 0.

See below code.

JavaScript

    let paragraph = text.innerHTML;
    text.innerHTML = "";
    let i = 0;
    let settimeout_method;
    text_tying();

    function text_tying() {
        i++;
        text.innerHTML += paragraph[i - 1];
        settimeout_method = setTimeout(() => {
            text_tying();
        }, 50);
        if (i === paragraph.length) {
            i = 0;
            clearTimeout(settimeout_method);
        }
    }  

Approach 3: Using setInterval Method.

1. In this approach, we take the text we want to add a typing effect to and store it in a variable named paragraph. After storing it, we remove the text from the HTML element in which we want to add text with typing effect.
2. Then, we create the variables. i variable to extract the letter from the paragraph variable and setInterval_method variable to hold the reference to the setInterval method and clear the setinterval method.
3. After defining the variables, we call a function at some interval. 
4. In that function. First we increment the value of the i variable by one. Then we’ll extract a character from the paragraph variable using the i variable value as the index and append the extracted character to the selected HTML element where we want to display the text with the typing effect. Finally, we add a condition to stop the interval when all the characters from the paragraph variable have been displayed in the selected HTML element.
5. This process of adding characters at a set interval creates the typing effect.

See below code:

JavaScript

    let paragraph = text.innerHTML;
    text.innerHTML = "";
    let i = 0;
    let setinterval_method;
    setinterval_method = setInterval(() => {
        text_tying();
    }, 50);

    function text_tying() {
        i++;
        text.innerHTML += paragraph[i - 1];
        if (i === paragraph.length) {
            i = 0;
            clearInterval(setinterval_method);
        }
    }  

So that's how you can reveal the paragraph or text with typing effect using JavaScript. If you have any query or suggestion you can write in the comment section.