Delay Animations While Scrolling
<p>I'm trying to create animations as the user scrolls but I also want to <em>stagger</em> them in that they don't all happen at the same time but one after the other in quick succession.</p>

<p>I'm using the following which adds a class to the div which triggers css animations then I'm trying to use a setTimeout to delay the next animation by just a bit. I would think since it's in an <code>$.each()</code> loop it would hit each timeout but instead they all fade in at the time time...<br /><a href="https://jsfiddle.net/2fu8ptg4/" rel="nofollow"><strong>JSFiddle</strong></a></p>

<p><strong>EDIT</strong> I believe I need to do this in JS as I have many animations on a page with a mixture of animations types and need to delay the adding of the class by a few milliseconds.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/**
 * Check if Animation is currently in view
 */
function anim_in_view() {
  var window_height = $(window).height();
  var window_top_position = $(window).scrollTop();
  var window_bottom_position = (window_top_position + window_height);
  var $animations = $('body .animate');

  if ($animations.length) {
    $.each($animations, function() {
      var $elm = $(this);
      var element_height = $elm.outerHeight();
      var element_top_position = $elm.offset().top + 50;
      var element_bottom_position = (element_top_position + element_height);

      setTimeout(function() {
        if ((element_bottom_position &gt;= window_top_position) &amp;&amp;
          (element_top_position &lt;= window_bottom_position)) {
          // $elm.delay( 2000 ).addClass( 'visible' );
          $elm.addClass('visible');
        }
      }, 1000);
    });
  }
}
$(window).on('load scroll resize', anim_in_view);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.flex {
  margin-top: 1000px;
  margin-bottom: 500px;
  display: -webkit-flex;
  display: flex;
}
.flex &gt; div {
  width: 33.33%;
  height: 200px;
}
.red {
  background: #f00;
}
.green {
  background: #0f0;
}
.blue {
  background: #00f;
}
.animate-opacity {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 2s ease-in-out;
}
.animate-opacity.visible {
  opacity: 1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="fadeIns" class="flex"&gt;
  &lt;div class="animate animate-opacity red"&gt;&lt;/div&gt;
  &lt;div class="animate animate-opacity green"&gt;&lt;/div&gt;
  &lt;div class="animate animate-opacity blue"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>