How to trigger animation of an element only when visible in a web page using jQuery

Written by

in

Find your target class, use the isInViewport() function below which returns true if the target element is visible in the viewport.
Create your conditionals to add/remove animation classes and execute on when visible. 
                
jQuery(document).ready(function(){
    var isInViewport = function(elem) {
        var distance = elem.getBoundingClientRect();
        return (
            distance.top >= 0 &&
            distance.left >= 0 &&
            distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            distance.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    };
    
    var targetClass = document.querySelector('.thumbs-up');
    var isTargetVisible = false;
    
    window.addEventListener('scroll', function(event) {
            if (isInViewport(targetClass)) {
                if(!isTargetVisible){
                    console.log('thumbs up visible');
                    jQuery('.thumbs-up').addClass("bobbing-thumbs-up");
                    isTargetVisible = true;
                }
            } else {
                if(isTargetVisible){
                    console.log('thumbs up NOT visible');
                    jQuery('.thumbs-up').removeClass("bobbing-thumbs-up");
                    isTargetVisible = false;
                }
            }
    }, false);
});