title: How to .animate an object when its visible for the user
body: <p>I'm making a web based presentation using the full width and height carousel of bootstrap for a client. It is a simple tutorial of how to create an account in the client's website and it consist on images only. However, I managed to put an image of a pointer that animates with jQuery and highlight the place where the user has to click. So far the animation works perfect but I need it to start when the user gets to see that slide, so I was wondering if it's possible to start the animation when you see that pointer then it starts moving.</p>
  
  <p>This is my script:</p>
  
  <pre class="lang-js prettyprint-override"><code>$('.carousel').carousel({
      pause: true,
      interval: false
  })
  &lt;/script&gt;
  &lt;script&gt;
  (function animation() {
      var options = {
          duration: 800,
          easing: 'linear'
      };
      $('.fill')
      .find('.pointer_fing')
      .animate({
          left: 36,
          top: 880
      },
      options
      )
      .animate({
          left: 866,
          top:694
      },
      options
      )
      .animate({
          left: 936,
          top: 350,
      },
      options
      )
      .animate({
          left: 936,
          top: 280,
      },
      $.extend(true, {}, options, {
          complete: function() {
              animation();
          }
      })
      );
  })();
  </code></pre>