Start animation when scrolled to

Question

I have spend all day looking for an easy way to make my animation start after I have scrolled to a specific place on the page.

My css

.animation {
 width: 50%; 
 float: left; 
 position: relative; 
 -webkit-animation-name: test; 
 -webkit-animation-duration: 4s; 
 -webkit-animation-iteration-count: 3;
 -webkit-animation-fill-mode: forwards; 
 animation-name: test; 
 animation-duration: 4s; 
 animation-iteration-count: 1; 
 animation-fill-mode: forwards; }

And my HTML

<div class="container">

<div class="animation">

Content goes here...

</div>

</div>

I wonder how to make the animation start when I scroll to the class container.

Answer 1

Javascript

var $window = $(window);
var $elem = $(".animation")

function isScrolledIntoView($elem, $window) {
    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).on("scroll", function () {
    if (isScrolledIntoView($elem, $window)) {
        $elem.addClass("animate")
    }
});

HTML

<div class="container">
    <div class="animation">Content goes here...</div>
</div>

CSS

.animation.animate {
    animation: pulse 5s infinite;//change this to whatever you want
}

JSFiddle to play with (don't forget to scroll)

Answer 2

@WebWeb , you can try this simple formula :

$(window).on('scroll' , function(){
    scroll_pos = $(window).scrollTop() + $(window).height();
    element_pos = $(yourelement).offset().top + $(yourelement).height() ;
    if (scroll_pos > element_pos) {
        $(yourelement).addClass('add-anim');
    };

})

It is basically checking if the windows scroll position is higher than that of the elements offset from the top of the document(plus the element's height) . It is an age-old formula.

FIDDLE AND DEMO HERE

If you are lazy like me though, you can go for waypoints.js an amazing library.