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!

reuelab · Accepted Answer · 2015-04-23 03:22:52Z

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

edited Apr 23, 2015 at 3:22

answered May 14, 2014 at 3:31

reuelab

1,9961 gold badge19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript / CSS Animation on Scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related