Activate animation only when element is viewed

Is there a short and fast way to make animation played only when element is become visible on the screen? I mean I found some solutions which requires big changes in my code and I don’t really want to change it. I already have that animation but the problem is that it is playing just when page is loaded so when I go down to the animation it was already played some time ago. I just need the simplest solution which will effect my code as less as possible.
Thanks in advance

check out waypoints

Put whatever you want in the callback function.
In my code, I load the map only when the user scrolled down far enough to see that section.

var waypoints = $('#map').waypoint(function (direction) {
            drawMap(); // draw map when map is just about to appear when scrolling up
            waypoint.destroy(); // destroy event watcher so we don't redraw map again
            }, {
              offset: '100%'
        })

link to full documentation
http://imakewebthings.com/waypoints/api/waypoint/

2 Likes