<link rel="preconnect" href="https://fonts.gstatic.com">

    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">

<body>
    <div class="container">
        <div class="text_hide"></div>
        <!----------------------------->
        <!--Change the number of words in the text and the animation will still work-->
        <div class="text">Typing Animation</div>
        <!-------------------------------------->
        <div class="text_cursor"></div>
    </div>
</body>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    position: relative;
}

.text{
    font-family: 'Roboto Mono', monospace;
    font-size: 2rem;
}

.text_hide{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
}

.text_cursor{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    border-left: 3px solid black;
}
let text_element = document.querySelector(".text");
let text_array = text_element.innerHTML.split("");
let text_array_slice = text_element.innerHTML.split(" ");
let text_len = text_array.length;

const word_len = text_array_slice.map((word) => {
    return word.length;
})

console.log(word_len);

let timings = {
    easing: `steps(${Number(word_len[0] + 1)}, end)`,
    delay: 2000,
    duration: 2000,
    fill: 'forwards'
}

let cursor_timings = {
    duration: 700,
    iterations: Infinity,
    easing: 'cubic-bezier(0,.26,.44,.93)'
}

document.querySelector(".text_cursor").animate([
    {
        opacity: 0
    },
    {
        opacity: 0, offset: 0.7
    },
    {
        opacity: 1
    }
], cursor_timings);

if(text_array_slice.length == 1){
    timings.easing = `steps(${Number(word_len[0])}, end)`;

    document.querySelector(".text_hide").animate([
        { left: '0%' },
        { left: `${(100 / text_len) * (word_len[0])}%` }
    ], timings);

    document.querySelector(".text_cursor").animate([
        { left: '0%' },
        { left: `${(100 / text_len) * (word_len[0])}%` }
    ], timings);
} else{
    document.querySelector(".text_hide").animate([
        { left: '0%' },
        { left: `${(100 / text_len) * (word_len[0] + 1)}%` }
    ], timings);

    document.querySelector(".text_cursor").animate([
        { left: '0%' },
        { left: `${(100 / text_len) * (word_len[0] + 1)}%` }
    ], timings);
}


for (let i = 1; i < text_array_slice.length; i++) {
    console.log(word_len);
    console.log(text_array_slice.length);
    const single_word_len = word_len[i];
    console.log(single_word_len);

    if (i == 1) {
        var left_instance = (100 / text_len) * (word_len[i - 1] + 1);
        console.log(left_instance);
    }

    let timings_2 = {
        easing: `steps(${Number(single_word_len + 1)}, end)`,
        delay: (2 * (i + 1) + (2 * i)) * (1000),
        // delay: ((i*2)-1)*1000,
        duration: 2000,
        fill: 'forwards'
    }

    if (i == (text_array_slice.length - 1)) {
        timings_2.easing = `steps(${Number(single_word_len)}, end)`;
        document.querySelector(".text_hide").animate([
            { left: `${left_instance}%` },
            { left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
        ], timings_2);

        document.querySelector(".text_cursor").animate([
            { left: `${left_instance}%` },
            { left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
        ], timings_2);
    } else {
        document.querySelector(".text_hide").animate([
            { left: `${left_instance}%` },
            { left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
        ], timings_2);

        document.querySelector(".text_cursor").animate([
            { left: `${left_instance}%` },
            { left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
        ], timings_2);
    }

    left_instance = left_instance + ((100 / text_len) * (word_len[i] + 1));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.