title: AOS Animation Not Firing Correctly After Browser Resize
body: <p>AOS is working great when this page first loads. Each "white square" animation fires at the same time and all 6 squares are visible. I am noticing, though, that when I resize the browser to a smaller size and then size it back up to be larger again, the AOS in combination with the media query I set is causing some of the blocks to go missing. This isn't consistent, but if you keep resizing you will find a point where you will only see 2 blocks out of 6, or 4 blocks out of 6. Please Try for yourself, I have isolated the code here:</p>
  
  <p><a href="http://www.blacksanddesign.com/stack-overflow-question-1.html" rel="nofollow noreferrer">http://www.blacksanddesign.com/stack-overflow-question-1.html</a></p>
  
  <p>And here is an image so you can see what I'm referring to:</p>
  
  <p><a href="https://i.stack.imgur.com/oGX4p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oGX4p.png" alt="enter image description here"></a></p>
  
  <p>Anyone know what may be causing this? Help is much appreciated. Thank you!</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>&lt;script src="aos.js"&gt;&lt;/script&gt;
  
   &lt;script&gt;
     AOS.init({
      easing: 'ease-in-out-sine'
     });
    &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
   margin:0;
  }
  .block#features {
   background-color:black;
   padding-top:100px;
   padding-bottom:100px;
   text-align:center;
  }
  
  .title#features{
   font-size:30px;
   color:white;
   padding-bottom:75px;
  }
  
  .features{
   width:87%;
   margin-left: auto;
   margin-right: auto;
   font-size:0;
   text-align:center;
  }
  
  ul{
   padding-left:0;
   padding-right:0;
   font-size:0;
  }
  
  li{
   list-style-type:none;
   background-color:white;
   width: 32.73%;
   display:inline-block;
   padding-top:30px;
   text-align:center;
   margin:.3%;
   vertical-align:top;
   height: 250px;
   padding-left:0;
   padding-right:0;
  }
  
  .features h2{
   font-size:20px;
  }
  
  .features p{
   font-size:12px;
  }
  
  @media only screen and (max-width: 800px) {
   li{width:100%}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://www.blacksanddesign.com/css/aos.css" rel="stylesheet"/&gt;
  
  &lt;div class="block" id="features"&gt;
  &lt;div class="title" id="features"&gt;OFFERING YOU&lt;/div&gt;
  &lt;div class="features"&gt;
  &lt;ul&gt;
  &lt;li aos="zoom-in"&gt;&lt;h2&gt;hello&lt;/h2&gt;&lt;p&gt;hello&lt;/p&gt;&lt;/li&gt;
  &lt;li aos="zoom-in"&gt;&lt;h2&gt;hello&lt;/h2&gt;&lt;p&gt;hello&lt;/p&gt;&lt;/li&gt;
  &lt;li aos="zoom-in"&gt;&lt;h2&gt;hello&lt;/h2&gt;&lt;p&gt;hello&lt;/p&gt;&lt;/li&gt;
  &lt;li aos="zoom-in"&gt;&lt;h2&gt;hello&lt;/h2&gt;&lt;p&gt;hello&lt;/p&gt;&lt;/li&gt;
  &lt;li aos="zoom-in"&gt;&lt;h2&gt;hello&lt;/h2&gt;&lt;p&gt;hello&lt;/p&gt;&lt;/li&gt;
  &lt;li aos="zoom-in"&gt;&lt;h2&gt;hello&lt;/h2&gt;&lt;p&gt;hello&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>