title: Animate.css + Viewport Checker delay?
body: <p>I am using a tutorial that incorporates <a href="http://daneden.github.io/animate.css/" rel="nofollow">Animate.css</a> and <a href="https://github.com/dirkgroenen/jQuery-viewport-checker" rel="nofollow">jQuery Viewport Checker</a> to animate elements into my page(<a href="http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery/" rel="nofollow">http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery/</a>). </p>
  
  <p>I am wondering how I can modify these animations so that each animation happens in succession instead of all at once. I.E. I want the first element to animate and then as that one is about to finish the next element starts to animate, etc.</p>
  
  <p>Here is what I have so far which animates all the elements at once:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="post"&gt;1&lt;/div&gt;
      &lt;div class="post2"&gt;2&lt;/div&gt;
      &lt;div class="post"&gt;3&lt;/div&gt;
      &lt;div class="post2"&gt;4&lt;/div&gt;
      &lt;div class="post"&gt;5&lt;/div&gt;
      &lt;div class="post2"&gt;6&lt;/div&gt;
      &lt;div class="post"&gt;7&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      $(document).ready(function(){
          $('.post').addClass("hidden").viewportChecker({
              classToAdd: 'visible animated fadeInUp',
              offset: 100
          });
          $('.post2').addClass("hidden").viewportChecker({
              classToAdd: 'visible animated fadeInDown',
              offset: 100
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <h1><a href="http://jsfiddle.net/pepKL/" rel="nofollow">JSFIDDLE</a></h1>
  
  <p>Any help greatly appreciated!!</p>