How to .animate an object when its visible for the user

Question

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.

This is my script:

$('.carousel').carousel({
    pause: true,
    interval: false
})
</script>
<script>
(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();
        }
    })
    );
})();