How to Trigger css animation both on scrolling down and up

Question

I'm using several CSS animations on a project. My problem is these animations get triggered only once, when scrolling down. I need them to be triggered every time the user scrolls by them, whether going up or down the page.

CSS

.slideRight{

    animation-name: slideRight;
    -webkit-animation-name: slideRight; 

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

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

    visibility: visible !important; 

}

@keyframes slideRight {

    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }               
    100% {
        transform: translateX(0%);
    }   

}

@-webkit-keyframes slideRight {

    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }

}

HTML

<div class="animation-test element-to-hide" style="visibility:visible;">Something</div>

JavaScript

$(window).scroll(function() {

    $('.animation-test').each(function(){

        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();

        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideRight");
        }

    });

});

$('.element-to-hide').css('visibility', 'hidden');

JSFiddle

Answer 1

Something like this should work.

Working Example

$(window).scroll(function () {
    $('.animation-test').each(function () {
        var imagePos = $(this).offset().top;
        var imageHeight = $(this).height();
        var topOfWindow = $(window).scrollTop();

        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).addClass("slideRight");
        } else {
            $(this).removeClass("slideRight");
        }
    });
});

Basically its just using an if statement to find whether the element is within the view port and adding and removing the class. You can toggle the visibility of the element by using:

.element-to-hide{
    visibility:hidden; 
} 
.slideRight {
    visibility: visible;
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out; 
}