Typing Animation

by hlmurray91

HTML

<p class="js-typing" data-type="Good shoes take you places."></p>

JavaScript

var typing = function(container, string){
    var count = 0;
    var length = string.length;
    var newString = "";
    var timer;

    timer = setInterval(function(){
        if(count < length){
            addLetter();
        } else{
            clearInterval(timer);
        }
    }, 100);

    // addLetters
    function addLetter(){
      var newLetter = "<span>"+string.charAt(count)+"</span>";
        newString = newString + newLetter;
        container.innerHTML = newString;
        count++;
        return undefined;
    }
}

var elements = document.querySelectorAll('.js-typing');
for(var i = 0; i < elements.length; i++) {
  typing(elements[i], elements[i].dataset.type)
}