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
// Capture scroll events

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