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.

Code HTML4Strict:
<div class="icon-wrapper"></div>
 
<div class="icon-wrapper2"></div>

Code JavaScript:
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?