title: Reveal text, line for line with animation
body: <p>After searching the web, and trying my best, i now ask you.</p>
  
  <p>I have a case, where i need to present some text, with a nice animation.</p>
  
  <p>Like in this jsfiddle, the animation is nice, but it doesn't honor line breaks.</p>
  
  <p><a href="http://jsfiddle.net/Supremacy2k/nedemkgf/" rel="nofollow noreferrer">http://jsfiddle.net/Supremacy2k/nedemkgf/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="text"&gt;
   &lt;span&gt;
    In Legends of Old, a great tale of bravery is told.&lt;br&gt;
    About a young warrior, and an unspeakable evil.&lt;br&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var spanWidth = $('#text span').width();
  $('#text').animate({
   width: spanWidth
  }, 3000);
  </code></pre>
  
  <p>So i kept googling, and found this:</p>
  
  <p><a href="http://jsfiddle.net/Supremacy2k/bzBzL/176/" rel="nofollow noreferrer">http://jsfiddle.net/Supremacy2k/bzBzL/176/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="box"&gt;
   &lt;div id="title"&gt;&lt;span id="name"&gt;Lore&lt;/span&gt; Says:&lt;/div&gt;
   &lt;div id="message"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var timer, fullText, currentOffset, onComplete, wordSet;
  
  function Speak(person, text, callback) {
      $("#name").html(person);
      fullText = text;
      wordSet = text.split(" ");
      currentOffset = 0;
      onComplete = callback;
      timer = setInterval(onTick, 300);
  }
  
  function onTick() {
      currentOffset++;
      if (currentOffset == wordSet.length) {
          complete();
          return;
      }
      var text = "";
      for(var i = 0; i &lt; currentOffset; i++){
       text += wordSet[i] + " ";   
      }
      text.trim();
      $("#message").html(text);
  }
  
  function complete() {
      clearInterval(timer);
      timer = null;
      $("#message").html(fullText);
      if (onComplete) onComplete();
  }
  
  $(".box").click(function () {
      complete();
  });
  
  var lore = `
      In Legends of Old, a great tale of bravery is told.&lt;br /&gt; 
    About a young warrior, and an unspeakable evil.&lt;br /&gt;
  `;
  
  Speak("Lore", lore);
  </code></pre>
  
  <p>That one does honor line breaks, but it has no animation.</p>
  
  <p>Can someone point me in the right direction, of how to combine the two, so it looks like the first jsfiddle, but honors line breaks?</p>
  
  <ul>
  <li>Regards Kris.</li>
  </ul>