Multiple "scrollpoints"?

JavaScript
1

So i have some keyframe css animation that i want to start at different scollpoints. I have a js script but i don’t know how to add more then one point.

<div class="icon-wrapper"></div>

<div class="icon-wrapper2"></div>

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

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

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

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.icon-wrapper');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

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

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

at the moment the first animation works, it starts at the right scollpoint. But how do I add the second one?

2

You can simply use something like the below.

function checkAnimation() {
    $('.icon-wrapper, .icon-wrapper2').each(function() {
        if (!$(this).hasClass('start') && isElementInViewport(this)) {
            $(this).addClass('start');
        }
    });
}