Skip to content

Search Engine Goes in HTML.

Important - please add search engine friendly text in the HTML Module.
This is not mentioned in the video.


 1. To change typing speed change this number (the higher the slower):

{typeWriter(text, i + 1, fnCallback) }, 120);

2. To change the delay before animation starts again change this number:

setTimeout(function() {
}, 20000);



.centre-me H1
font-weight: bold;
text-transform: uppercase;
display: block;
font-size: 40px;
height: 60px;


display: flex;
align-items: center;
justify-content: center;


// array with texts to type in typewriter
var dataText = 
[ "This text is...",
"in Layout Javascript...",
" change your text there...", 
" Search Engine Goes in HTML!"];

// type one text in the typwriter
// keeps calling itself until the text is finished
function typeWriter(text, i, fnCallback) {
// chekc if text isn't finished yet
if (i < (text.length)) {
// add next character to h1
document.querySelector(".type-two").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';

// wait for a while and call this function again for next character
setTimeout(function() {
typeWriter(text, i + 1, fnCallback)
}, 120);
// text finished, call callback if there is a callback function
else if (typeof fnCallback == 'function') {
// call callback after timeout
setTimeout(fnCallback, 700);
// start a typewriter animation for a text in the dataText array
function StartTextAnimation(i) {
if (typeof dataText[i] == 'undefined'){
setTimeout(function() {
}, 20000);
// check if dataText[i] exists
if (i < dataText[i].length) {
// text exists! start typewriter animation
typeWriter(dataText[i], 0, function(){
// after callback (and whole text has been animated), start next text
StartTextAnimation(i + 1);
// start the text animation

...and a few affiliate links (well you never know)

Best Beaver Builder Add-ons
Ultimate Addons for Beaver Builder
Get Beaver Builder Now!
Do NOT follow this link or you will be banned from the site! Scroll To Top