<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">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;
}
function typing_animation(){
    let text_element = document.querySelector(".text");
    let text_array = text_element.innerHTML.split("");
    let all_words = text_element.innerHTML.split(" ");
    let text_len = text_array.length;
    
    const word_len = all_words.map((word) => {
        return word.length;
    })
    
    let timings = {
        easing: `steps(${Number(word_len[0])}, 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);

    let reveal_animation_1 = 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);
}
typing_animation();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.