title: Several sentences/text Sine wave Jquery animation
body: <p>I already found and tweaked code that will animate a sentence, letter by letter in a sine way. However, there are a few issues:</p>
  
  <ul>
  <li>I can't seem to get it to work on several sentences, basically imagine two or three more sentences like the one in the example underneath it, so that all sentences are underneath each other and animated simultaneously  </li>
  <li>Can't figure out how to make the sentence animation end and reappear at left of the page again at the start of the list options div block </li>
  </ul>
  
  <p><a href="http://codepen.io/rtr365/pen/JdROVo?editors=100" rel="nofollow">Here is the link</a>
  Here is the code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="options"&gt;
      &lt;ul id="list" style=""&gt;
        &lt;li&gt;ABOUT&lt;/li&gt;
        &lt;/br&gt;
        &lt;li&gt;THE STREAM&lt;/li&gt;
        &lt;/br&gt;
        &lt;li&gt;TELL YOUR STORY&lt;/li&gt;
        &lt;/br&gt;
        &lt;li&gt;COMING EVENTS&lt;/li&gt;
        &lt;/br&gt;
        &lt;li&gt;CONTACT&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="sentences_block"&gt;
      &lt;div id="elements" style="margin-left:50px;"&gt;&lt;/div&gt;
      &lt;div&gt;
  &lt;/body&gt;
  &lt;style type="text/css"&gt;
    .letter {
          font-family: sans-serif;
          font-size: 40px;
          font-weight: bold;
          position: absolute;
          top: -100px; 
          left: 0px;
      }
    #list {
    list-style-type: none; 
    color: #0067CE;font-weight: bold;
    font-style:arial;
    font-size:15px;
    float:right;
    }
    #options {
    margin-right:20px;
    }
  &lt;/style&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
          var width = $(window).width() - 0;
          var starttime = new Date().getTime();
          var letters = document.location.hash ? document.location.hash.substr(1) : 'sentence';
          var elements = $('#elements');
  
          for (i = 0; i &lt; letters.length; i++) {
              $('&lt;div&gt;', {
                  html: letters[i]
              })
              .addClass('letter')
              .appendTo(elements);
          }
  
          function run() {
              var elapsed = new Date().getTime() - starttime;
              var pos = elapsed * 0.2;
  
              $('div.letter').each(function(index, letter) {
                  var posx = (pos + 40 * index) % width;
                  var posy = 200 + Math.sin(posx / 50) *25;
                  $(letter).css('left', posx + 'px');
                  $(letter).css('top', posy + 'px');
  
              });
  
          }
  
          setInterval(run, 3);
      });
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>