JSFiddle - React, Tailwind, and code Playground
HTML
<div id="test"></div>
JavaScript
function TextTyper(targetElement, charsAtATime, textToType) {
var i,
l = textToType.length,
timeout,
el = $(targetElement)[0],
textNode = el.childNodes[0];
if (!textNode) {
textNode = document.createTextNode('');
el.appendChild(textNode);
}
this.begin = function() {
i = 0;
if (timeout) { clearTimeout(timeout); }
textNode.nodeValue = '';
typeChar();
};
console.log(textNode);
function typeChar() {
if (i < l) {
textNode.nodeValue += textToType.substr(i, charsAtATime);
i += charsAtATime;
timeout = setTimeout(typeChar, 1);
} else {
timeout = 0;
}
}
}
(new TextTyper('#test', 8, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus urna vitae mi aliquet suscipit. Nullam vulputate ultrices tortor vel luctus. Duis sodales lacinia consequat. Vestibulum vehicula, ligula sit amet tincidunt scelerisque, orci arcu malesuada odio, eu ornare ipsum risus at metus. Nullam porttitor condimentum nunc, nec euismod massa consectetur id. Mauris ut nisl nulla, et tristique sem. In non ante vel libero lacinia vehicula in quis urna. Suspendisse urna erat, ornare sit amet rhoncus eget, bibendum at ipsum.')).begin();