Javascript / CSS Animation on Scroll

Question

I am working on a personal site and came across an issue. I am using this Javascript to activate a CSS Animation when the element comes into view :

    function isElementInViewport(elem) {
    var $elem = $(elem);

    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

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

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

function checkAnimation() {
    var $elem = $('.slideUp');

    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

Here is the HTML :

<img src="analyze.png" width="343" height="196" alt="Analyze" class="slideUp">

and here is my CSS :

.slideUp.start {
    animation-name: slideUp;
    -webkit-animation-name: slideUp;    

    animation-duration: 1s; 
    -webkit-animation-duration: 1s;

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;

    visibility: visible !important;         
}

@keyframes slideUp {
    0% {
        transform: translateY(100%);
    }
    50%{
        transform: translateY(-8%);
    }
    65%{
        transform: translateY(4%);
    }
    80%{
        transform: translateY(-4%);
    }
    95%{
        transform: translateY(2%);
    }           
    100% {
        transform: translateY(0%);
    }   
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
    }
    50%{
        -webkit-transform: translateY(-8%);
    }
    65%{
        -webkit-transform: translateY(4%);
    }
    80%{
        -webkit-transform: translateY(-4%);
    }
    95%{
        -webkit-transform: translateY(2%);
    }           
    100% {
        -webkit-transform: translateY(0%);
    }   
}

So I can get this to work for one element. However if I attach this class to five elements, once the first element is in view all five will begin the animation. What would be the best method so that each element is using the same class and same JS script, but each element animates when it specifically comes into view? I have tried a few things but they seem to not work. Any suggestions? Thank You!

Answer 1

EDIT: Added DEMO

First, create a function that checks which element is in viewport and needs to be animated.

Something like this:

 function checkAnimation() {
        var $elems = document.getElementsByClassName("slideUp");
        for(var i = 0; i < $elems.length; i++){
           if ($('.slideUp').eq(i).hasClass('start')) return;

           if (isElementInViewport($('.slideUp').eq(i))) {
             // Start the animation
             $('.slideUp').eq(i).removeClass('slideUp').addClass('start');
           }        
        }   
    }

Then, you can use jQuery .scroll() event handler to trigger the function.

Something like this:

$(window).scroll(function () {
    checkAnimation();
});

Lastly, change:

var $elem = $(elem); 

in function isElementInViewport(elem) to:

var $elem = elem;

because we already passed a selected element.

WORKING DEMO