Letter by letter fading in in javascript without jquery

var i = 0;
  var txt = 'UNITING PEOPLE'; /* The text */
  var txt2 = '&'; 
  var txt3 = 'DELIVERING ';
  var txt4 = 'INTELLIGENCE'; 
  var txt5 = 'Access your hub for Open Journalism'; 
  var speed = 0;


function typeWriter(fade) {
    if (i < txt.length + txt2.length + txt3.length + txt4.length + txt5.length) {
      if(i < txt.length-1) {
        var element = document.createElement("p");
        element.style.display = "inline-block";
        element.style.opacity = "0.1";
        element.style.fontSize = "38px";
        element.style.fontFamily = "Helvetica-Bold";
        element.style.whiteSpace = "pre";
        element.style.marginTop = "0";
        element.textContent += txt.charAt(i);
        document.getElementById("words").children[0].children[0].appendChild(element)
        unfade(element, fade);
        i++;
        setTimeout(typeWriter(fade), 10*fade);
      } else if(i==txt.length-1) {
        var element = document.createElement("p");
        element.style.display = "inline-block";
        element.style.opacity = "0.1";
        element.style.fontSize = "38px";
        element.style.fontFamily = "Helvetica-Bold";
        element.style.whiteSpace = "pre";
        element.style.marginTop = "0";
        element.textContent += txt.charAt(i);
        document.getElementById("words").children[0].children[0].appendChild(element)
        unfade(element, fade);
        i++;
        setTimeout(typeWriter(fade), 1500);
      } else if(i < txt.length + txt2.length-1)
    ...

  }

  setTimeout(typeWriter(100), 1500);

function unfade(element, fade) {
    var op = 0.1;  // initial opacity
    element.style.display = 'inline-block';
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
    }, fade);
  }

I'm not sure what the bug is. Each letter should fade through about 100ms, and it should wait until each letter is done before the next letter begins.

Each element comes in inline and begins with a small opacity in the right font and font size, with spaces making room for text with the whitespace set to pre.

The text content updates with just 1 character at a time, and it's appended to the correct section before being faded in. The fading in is set to be the same as the overall letter fade, before the increment is counted.

Once the set timeout occurs, the delay fade is simply ignored and it all begins at once, so it's like the fade is set to 0 over all.

And yet when the code is cut and one section implemented it does one letter at a time.