Activate animation only when element is viewed

Activate animation only when element is viewed
0

#1

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


#2

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/