site/_src/_assets/javascripts/page-community.js

//=include ../../../node_modules/is-in-viewport/lib/isInViewport.js

jQuery(function($) {

    var wrigley     = $('#wrigley'),
        wrigleyArm  = wrigley.find('#arm'),
        wrigleyHead = wrigley.find('#head'),
        wrigleyEye  = wrigley.find('#eye');

    var wrigleyAnimationStart = function() {

        // set utility classes
        if (wrigley.is( ':in-viewport( -180 )' ) ) {
            wrigley.addClass('is-ready');

            // toggle paused class so the :hover interaction can fire animation again
            wrigleyArm.on('animationend webkitAnimationEnd oAnimationEnd', function(e) {
                    wrigleyArm.addClass('paused');
                    wrigleyHead.addClass('paused');

                    wrigley.on('mouseover', function() {
                        wrigleyArm.removeClass('paused');
                        wrigleyHead.removeClass('paused');
                    });

                    // fire eye blinking once other animations have finished
                    wrigleyEye.addClass('is-ready');

                    wrigleyEye.on('animationend webkitAnimationEnd oAnimationEnd', function(e) {
                        wrigleyEye.removeClass('is-ready');
                    });
                }
            );
        } else {
            wrigley.removeClass('is-ready').removeClass('paused');
            wrigleyArm.removeClass('paused');
            wrigleyHead.removeClass('paused');
            wrigleyEye.removeClass('is-ready').removeClass('paused');
        }
    }

    // fire all the viewport things
    wrigleyAnimationStart();
    $(window).on('load resize scroll', wrigleyAnimationStart);

});