TypeWriter JS

by Dhruvang Gajjar

HTML

<div class="one">
  <h1><span aria-hidden="true"></span></h1>    
</div>
<div class="two">
  <h1><span aria-hidden="true"></span></h1>
</div>

CSS

h1 {
    text-transform: uppercase;
}

JavaScript

function one() {

  var dataText = ["HELLO SOCIAL ARE EXPERTS"];

  function typeWriter(text, i, fnCallback) {
    if (i < (text.length)) {
      document.querySelector(".one h1").innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>';

      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 100);
    }

    else if (typeof fnCallback == 'function') {
      setTimeout(fnCallback, 700);
    }
  }
  
  function StartTextAnimation(i) {
    if (typeof dataText[i] == 'undefined') {
      /* setTimeout(function() {
        StartTextAnimation(0);
      }, 1000); */
    }
    if (i < dataText[i].length) {
      typeWriter(dataText[i], 0, function() {
        StartTextAnimation(i + 1);
      });
    }
  }
  StartTextAnimation(0);
}


function second() {

  var dataText = [" in social media strategy", "influencer marketing", "facebook advertising", "community management", "content strategy", " instagram marketing"];

  function typeWriter(text, i, fnCallback) {
    if (i < (text.length)) {
      document.querySelector(".two h1").innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>';

      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 100);
    }

    else if (typeof fnCallback == 'function') {
      setTimeout(fnCallback, 700);
    }
  }
  
  function StartTextAnimation(i) {
    if (typeof dataText[i] == 'undefined') {
      setTimeout(function() {
        StartTextAnimation(0);
      }, 20000);
    }
    if (i < dataText[i].length) {
      typeWriter(dataText[i], 0, function() {
        StartTextAnimation(i + 1);
      });
    }
  }
  StartTextAnimation(0);
}




one();
setTimeout(function() {
	second();
}, 3000);