JSFiddle - React, Tailwind, and code Playground

HTML

<div id="writer">
    <span id='sentence'></span>
    <span id='char'></span>
</div>

CSS

#writer{ 
    border: 1px solid black; 
    width:300px; 
    min-height: 200px;
    margin: auto;
}
span
{

    float:left;
}

JavaScript

var text = "Hello World! I'm some typed text!";
var counter = 0;
var speed = 50;

function type()
{
    var sentence = document.getElementById("sentence");
    var lastText = sentence.innerHTML;
    var nextChar = text.charAt(counter);
    
    counter++;

    transition(nextChar,    
    function()
    {        
        lastText+=nextChar;
        sentence.innerHTML = lastText;
        setTimeout(type, speed);
    });  
}

function transition(char, onComplete) {
    d3.select('#char').transition()  
        .text("")
        .duration(300)
        .style("font-size","1px")
        .transition()
        .duration(300)
        .text(char)
        .style("font-size","16px")
        .each("end", onComplete);
}


type();