Example of a really basic javascript animation that triggers when the user rolls past an element. See the $(window).bind('scroll' ...statements for the actual triggers.

animation.js

        var dial_hasBeenTriggered = false,
            bar_hasBeenTriggered = false;

        function increase_dial(element, value, originalValue) {
            if( !originalValue ) {
                originalValue = element.data('target-value').toString();
            }

            var currentVal = value || 0;
            element.val(currentVal).trigger('change');

            if( element.val() === originalValue ) {
                return;
            }
            currentVal++;
            setTimeout( increase_dial , 20 , element, currentVal, originalValue );
        }

        function increase_dial_wrapper() {
            var $elementSet = $('.dial');
            for (var i = 0; i < $elementSet.length; i++) {
                setTimeout( increase_dial , i * 500 , $($elementSet[i]));
            }
        }

        $(".dial").knob();

        if ($('.dial').length > 0) { //if there are dials
            var triggerValue_dial = $('.dial').first().position().top + 600; //number of pixels before modifying fixed menu

            $(window).bind('scroll', function () {
                if ($(window).scrollTop() > triggerValue_dial && !dial_hasBeenTriggered) {
                    dial_hasBeenTriggered = true;
                    setTimeout(increase_dial_wrapper(), 900);
                }
            });
        }

        // bar animation:
        if ($('.rollout-bar .rollout-bar-color').length > 0) { //if there are dials
            var triggerValue_bar = $('.rollout-bar .rollout-bar-color').first().position().top - 300; //number of pixels before modifying fixed menu

            $('.rollout-bar .rollout-bar-color').hide();

            $(window).bind('scroll', function () {
                if ($(window).scrollTop() > triggerValue_bar && !bar_hasBeenTriggered) {
                    bar_hasBeenTriggered = true;
                    var $elementSet = $('.rollout-bar .rollout-bar-color');
                    for (var i = 0; i < $elementSet.length; i++) {
                        var $_localElement = $($elementSet[i]),
                            value= $_localElement.css('width');
                        console.log(value);
                        $_localElement.css({width :0 });
                        $('.rollout-bar .rollout-bar-color').show();
                        $_localElement.animate({width :value }, 2000);
                    }

                    setTimeout(increase_dial_wrapper(), 900);
                }
            });
        }