title: How to hide animated elements on load?
body: <p>I'm using <a href="https://github.com/daneden/animate.css">animate.css</a> with <a href="http://imakewebthings.com/jquery-waypoints/">waypoints.js</a> in my landing page. I want to animate elements when user scrolls the page. But, the problem is that I need to hide elements before the animation starts(if i don't hide, animate.css hides element first and then animates in, that looks pretty ugly).</p>
  
  <p>However, I solved problem by adding two classes in my css but it creates another problem.</p>
  
  <pre><code>.visible{ opacity: 1; }
  .invisible {opacity: 0; }
  // I added following jquery code 
  $('elem').removeClass('invisible').addClass('visible fadeInUp');
  </code></pre>
  
  <p>This works good until I add <code>animation-delay</code> to an elements. Here is an explanation what I want to achieve. I've elements like this:</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li&gt;element1&lt;/li&gt;
   &lt;li&gt;element2&lt;/li&gt;
   &lt;li&gt;element3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to add animation delay to each of the elements, so that they <code>fadeInUp</code>  after each other with a specified seconds in each of the elements using <code>animation-delay</code> property. I can't get this to work. I tried following code without using animation-delay but no success. </p>
  
  <pre><code>$('elem').each(function() {
    // code with delay using timeout
    setTimeout(function(){
     $(this).removeClass('invisible').addClass('...');
    }, 100);
  });
  </code></pre>
  
  <p>Let me know if my approach is completely wrong?  If yes, then can you provide better way to accomplish.</p>