title: jQuery Finds Elements Position Before Repositioned in CSS
body: <p>I am trying to get repositioned elements to animate when the page scrolls down and they become visible. My problem is that jQuery is using the first (before being positioned) position to trigger an animation, but the element is higher up on the page so when I scroll, I see the element and continue scrolling a little then the animation is triggered. <strong>How can I make the jQuery find the re-positioned position and use that to animate instead of position before the element was positioned?</strong> Here is my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    (function($) {
  
      /**
       * Copyright 2012, Digital Fusion
       * Licensed under the MIT license.
       * http://teamdf.com/jquery-plugins/license/
       *
       * @author Sam Sehnert
       * @desc A small plugin that checks whether elements are within
       *     the user visible viewport of a web browser.
       *     only accounts for vertical position, not horizontal.
       */
  
      $.fn.visible = function(partial) {
  
        var $t = $(this),
          $w = $(window),
          viewTop = $w.scrollTop(),
          viewBottom = viewTop + $w.height(),
          _top = $t.offset().top,
          _bottom = _top + $t.height(),
          compareTop = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;
  
        return ((compareBottom &lt;= viewBottom) &amp;&amp; (compareTop &gt;= viewTop));
  
      };
  
    })(jQuery);
  
    var win = $(window);
  
    var allMods = $(".animated");
  
    allMods.each(function(i, el) {
      var el = $(el);
      if (el.visible(true)) {
        el.addClass("already-visible");
      }
    });
  
    win.scroll(function(event) {
  
      allMods.each(function(i, el) {
        var el = $(el);
        if (el.visible(true)) {
          el.addClass("come-in");
        }
      });
  
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Slide In */
  
  * {
    @include box-sizing(border-box);
  }
  .animated {} .come-in {
    transform: translateY(150px);
    animation: come-in 0.8s ease forwards;
  }
  .come-in:nth-child(odd) {
    animation-duration: 0.6s;
  }
  .already-visible {
    transform: translateY(0);
    animation: none;
  }
  @keyframes come-in {
    to {
      transform: translateY(0);
    }
  }
  /* Positioned Elements */
  
  /* About */
  
  .container2 {
    position: relative;
    top: 140px;
    z-index: -1;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  @media (min-width: 350px) {
    .container2 {
      top: 145px;
    }
  }
  @media (min-width: 360px) {
    .container2 {
      top: 150px;
    }
  }
  @media (min-width: 450px) {
    .container2 {
      top: 160px;
    }
  }
  @media (min-width: 510px) {
    .container2 {
      top: 170px;
    }
  }
  @media (min-width: 540px) {
    .container2 {
      top: 180px;
    }
  }
  @media (min-width: 550px) {
    .container2 {
      top: 130px;
    }
  }
  @media (min-width: 650px) {
    .container2 {
      top: 140px;
    }
  }
  @media (min-width: 850px) {
    .container2 {
      top: 150px;
    }
  }
  @media (min-width: 1100px) {
    .container2 {
      top: 155px;
    }
  }
  #about {
    text-align: center;
    position: relative;
    top: 5px;
  }
  p {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  @media (min-width: 550px) {
    p {
      width: 50%;
    }
  }
  #aboutbar {
    background-color: #151413;
    height: 5px;
    margin-top: 20px;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 100%
  }
  @media (min-width: 550px) {
    #aboutbar {
      background-color: #151413;
      height: 5px;
      width: 56.6666666667%;
      margin-top: 20px;
      margin-left: 50%;
      transform: translateX(-50%);
    }
  }
  /* Managers */
  
  /* 278 PX */
  
  #managersbg {
    background-color: rgba(255, 153, 0, 0.79);
    position: absolute;
    left: 0px;
    top: 495px;
    width: 100%;
  }
  @media (min-width: 288px) {
    #managersbg {
      top: 495px;
    }
  }
  @media (min-width: 295px) {
    #managersbg {
      top: 470px;
    }
  }
  @media (min-width: 350px) {
    #managersbg {
      top: 455px;
    }
  }
  @media (min-width: 358px) {
    #managersbg {
      top: 460px;
    }
  }
  @media (min-width: 364px) {
    #managersbg {
      top: 435px;
    }
  }
  @media (min-width: 416px) {
    #managersbg {
      top: 410px;
    }
  }
  @media (min-width: 450px) {
    #managersbg {
      top: 420px;
    }
  }
  @media (min-width: 485px) {
    #managersbg {
      top: 400px;
    }
  }
  @media (min-width: 510px) {
    #managersbg {
      top: 410px;
    }
  }
  @media (min-width: 540px) {
    #managersbg {
      top: 420px;
    }
  }
  @media (min-width: 550px) {
    #managersbg {
      top: 470px;
    }
  }
  @media (min-width: 624px) {
    #managersbg {
      top: 450px;
    }
  }
  @media (min-width: 650px) {
    #managersbg {
      top: 460px;
    }
  }
  @media (min-width: 671px) {
    #managersbg {
      top: 435px;
    }
  }
  @media (min-width: 775px) {
    #managersbg {
      top: 410px;
    }
  }
  @media (min-width: 850px) {
    #managersbg {
      top: 420px;
    }
  }
  @media (min-width: 914px) {
    #managersbg {
      top: 400px;
    }
  }
  h4 {
    text-align: center;
    font-weight: 500
  }
  #managers {
    position: relative;
    top: 15px;
  }
  #screamer,
  #swezii,
  #kinzu {
    background-image: url(../images/screamer.png);
    background-size: 100%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border-color: rgba(255, 153, 0, 0);
    margin: 0 auto;
  }
  #screamer {
    margin-top: 20px;
  }
  #swezii {
    position: relative;
    top: 125px;
  }
  #kinzu {
    position: relative;
    top: 275px;
  }
  #manager1,
  #manager2,
  #manager3 {
    position: relative;
  }
  #manager1 {
    top: -115px;
  }
  #manager1,
  #manager2,
  #manager3 {
    font-weight: 600
  }
  #manager2 {
    top: 45px;
  }
  #manager3 {
    top: 195px;
  }
  #text1 {
    position: relative;
    top: -165px;
  }
  #text2 {
    position: relative;
    top: -50px;
  }
  @media (min-width: 550px) {
    #text1,
    #text2,
    #text3 {
      position: relative;
      left: 50%;
      transform: translateX(-25%);
      text-align: center;
    }
  }
  p {
    margin: 0 auto;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="animated"&gt;
    &lt;div class="twelve columns"&gt;
      &lt;p&gt;TheVersionArts is a private design studio. We were founded in the winter of 2014. We connect clients to the designers they need. Our goal is to serve high quality design at an affordable price through the internet. We strive to impress our clients.
        We don't sell graphics, or designs. We sell art and colours.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="animated"&gt;
    &lt;div class="seven columns" id="aboutbar"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="managersbg"&gt;
    &lt;div class="container3"&gt;
      &lt;div class="row"&gt;
        &lt;div class="animated"&gt;
          &lt;h4 id="managers"&gt;Our Managers&lt;/h4&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="animated"&gt;
          &lt;div class="one-third-column" id="screamer"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="animated"&gt;
          &lt;div class="one-third-column" id="swezii"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="animated"&gt;
          &lt;div class="one-third-column" id="kinzu"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="animated"&gt;
          &lt;div class="one-third-column"&gt;
            &lt;p id="manager1"&gt;Screamer&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="animated"&gt;
          &lt;div class="one-third-column"&gt;
            &lt;p id="manager2"&gt;Swezii&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="animated"&gt;
          &lt;div class="one-third-column"&gt;
            &lt;p id="manager3"&gt;KINZU&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="animated"&gt;
          &lt;div class="seven columns"&gt;
            &lt;p id="text1"&gt;I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="animated"&gt;
          &lt;div class="seven columns"&gt;
            &lt;p id="text2"&gt;I love the fliudity of art, of any kind!. It is my goal to become a bettter designer myself so I can share my knowldge with others. I am one of the best designers for my price.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="animated"&gt;
          &lt;div class="seven columns"&gt;
            &lt;p id="text3"&gt;I'm that guy chilling on his computer, creating fantastic art for you. You can bet you'll get what you ask for!&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>