title: Play gif only when it enters viewport from top or bottom
body: <p>I am trying to play a gif onscroll only when it enters in the viewport either from top or bottom otherwise to show a static image. This is the code I've got so far, but it doesn't show the gif.  I am using <a href="https://github.com/rubentd/gifplayer" rel="nofollow noreferrer">https://github.com/rubentd/gifplayer</a> and <a href="https://github.com/customd/jquery-visible" rel="nofollow noreferrer">https://github.com/customd/jquery-visible</a> to try to achieve this result.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          html,body{
              height:100%;
              margin:0;
              padding:0
          }
          body:before{
              content:"";
              width:100%;
              height:100%;
              display:block;
          }
          body:after{
              content:"";
              width:100%;
              height:100%;
              display:block;
          }
      &lt;/style&gt;
      &lt;link rel="stylesheet" href="http://rubentd.com/bower_components/jquery.gifplayer/dist/gifplayer.css"&gt;
      &lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://rubentd.com/bower_components/jquery.gifplayer/dist/jquery.gifplayer.js"&gt;&lt;/script&gt;
      &lt;script src="http://opensource.teamdf.com/visible/jquery.visible.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;section&gt;
          &lt;h2&gt;Play within view only:&lt;/h2&gt;
          &lt;img id="element" class="gifplayer" src="http://rubentd.com/img/banana.png" /&gt;
      &lt;/section&gt;
  
      &lt;script&gt;
          $('#element').visible( function(){
              $('.gifplayer').gifplayer();
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>