title: Check if element is in viewport Vanilla JS
body: <p>I want my element appear via keyframe animation if they are visible on current window viewport.</p>
  <p>Its kinda half working but my classList.remove('current') overrides my classList.add('current') so the behavior while scrolling isnt that smooth.</p>
  <p>My Code</p>
  <p>CSS</p>
  <pre><code>section.section{
      &amp;.current{
          animation:expand 1s ease-in-out;
      }
  }
  
  @keyframes expand {
      from {
          transform: scale(0);
          display: block;
      }
  }
  </code></pre>
  <p>JS</p>
  <pre><code>const elements = document.querySelectorAll('section.section');
  window.addEventListener('scroll', function (e) {
      elements.forEach(el =&gt; {
          let elTopPos = el.getBoundingClientRect().top  + window.scrollY;
          let elBottomPos = el.getBoundingClientRect().bottom  + window.scrollY;
          let windowBottomPos = window.innerHeight + window.pageYOffset;
          let windowTopPos = window.scrollY;
          if (el.classList.contains('current') === false) {
              if ((windowBottomPos &gt; elTopPos &amp;&amp; windowBottomPos &lt; elBottomPos) || (windowTopPos &lt; elBottomPos &amp;&amp; windowTopPos &gt; elTopPos)) {
                  el.classList.add('current');
              }
          } else{
              if ((windowTopPos &gt; elBottomPos &amp;&amp; windowBottomPos &gt; elBottomPos) || (windowBottomPos &lt; elTopPos &amp;&amp; windowTopPos &lt; elTopPos)) {
                  el.classList.remove('current');
              }
          }
      })
  },{
      passive: true
  })
  </code></pre>