title: Animate on Scroll JS
body: <p>I am new to JavaScript and trying to add some animations on scroll to a site. </p>
  
  <p>I have multiple divs each with a unique class name and all with the same <b>.section</b> class. </p>
  
  <p>I want to animate each <b>.section</b> on scroll without triggering the other <b>.sections</b></p>
  
  <pre><code>&lt;section class="home__one section&gt;&lt;/section&gt;
  &lt;section class="home__two section&gt;&lt;/section&gt;
  &lt;section class="home__three section&gt;&lt;/section&gt;
  &lt;section class="home__four section&gt;&lt;/section&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>$(window).on("scroll",function(){
      var winTop = $(this).scrollTop();
      var section = $(".section").offset().top;
  
      if(winTop &gt;= section-400) {
        $(".section").addClass("animate");
      };
  });
  </code></pre>
  
  <p>The code above obviously triggers every <b>.section</b> when the first reaches it's position on scroll. </p>
  
  <p>I can't get my head around how I would trigger one <b>.section</b> as it comes into view.</p>
  
  <p>I may be doing this the complete wrong way, so if I am, your help would be much appreciated.</p>