jquery type animate

body, html { margin: 0; height: 100%; text-align: center; font-family: "Oxygen Mono", monospace; color: #999; } h1 { text-transform: uppercase; letter-spacing: 1pt; font-size: 60pt; margin-bottom: 15px; } p { text-align: center; margin: 0; text-transform: lowercase; font-size: 10pt; font-weight: 900; width: 50%; display: none; font-size: 50px; } #table { display: table; width: 100%; height: 100%; background-color: #e5e5e5; } #centeralign { display: table-cell; vertical-align: middle; } function typeEffect(element, speed) { var text = element.innerHTML; element.innerHTML = ""; var i = 0; var timer = setInterval(function () { if (i < text.length) { element.append(text.charAt(i)); i++; } else { clearInterval(timer); } }, speed); } // application var speed = 75; var h1 = document.querySelector('h1'); var p = document.querySelector('p'); var delay = h1.innerHTML.length * speed + speed; // type affect to header typeEffect(h1, speed); // type affect to body setTimeout(function () { p.style.display = "inline-block"; typeEffect(p, speed); }, delay);