title: Why does jQuery .one function only work when scrolling down?
body: <p>I am using the following function to start an animation when an element is in viewport. The animation should start if 1) the element is already in view on page load, or 2) by scrolling to the element for the first time. </p>
  
  <p>This code works, except the scroll function only works when scrolling <strong>down</strong> to the element. If I load the page <em>below</em> the element, and scroll <strong>up</strong>, the animation does not start:</p>
  
  <pre><code>$(window).on("load", myanimation);
  
  $(window).one("scroll", myanimation); // this only works on downward scroll
  </code></pre>
  
  <p>This is how I'm checking if the element is visible:</p>
  
  <pre><code>$.fn.isInViewport = function () {
      let elementTop = $(this).offset().top;
      let elementBottom = elementTop + $(this).outerHeight();
  
      let viewportTop = $(window).scrollTop();
      let viewportBottom = viewportTop + $(window).height();
  
      return elementBottom &gt; viewportTop &amp;&amp; elementTop &lt; viewportBottom;
  };
  </code></pre>
  
  <p>And this is my function:</p>
  
  <pre><code>function myanimation(e){
  
      if ($('#welcome').isInViewport()) {  
          console.log('In view.')
      } else {
          console.log('Not in view.')
      }
  };
  </code></pre>
  
  <p>I only want the animation to perform on the first scroll only, so that's why I'm using <code>.one</code>.</p>
  
  <p>How can I make the animation start from either direction?</p>