Start animation on progress bar when its visible on screen

Question

I want to create a webpage that contains several sections. In one of those sections are something like progress bars. These progress bars are \'animated\' so that the user sees

Answer 1

Here is a fiddle: http://jsfiddle.net/rAQev/4/

I've used a comparison of scroll offset and your special section offset to detect a moment when this section becomes visible. Animations are queued to be processed one after another using jQuery queue function, you can read about it in jQuery docs (http://api.jquery.com/queue/). Also scroll event is unbinded when the first 'loading' happens, not to run 'loading' again and again on scroll event when section is visible.

Answer 2

Here is an updated fiddle http://jsfiddle.net/9ybUv/

This one allows for all the progress bars to run at the same time. If you were like me and had 5 or more it takes a long time to do one, then the next, then the next.

$(function() {

    var $section = $('#third');

    function loadDaBars() {
                $(".meter > span").each(function() {
                    $(this)
                        .data("origWidth", $(this).width())
                        .width(0)
                        .animate({
                            width: $(this).data("origWidth")
                        }, 1200);
                });
    }

    $(document).bind('scroll', function(ev) {
        var scrollOffset = $(document).scrollTop();
        var containerOffset = $section.offset().top - window.innerHeight;
        if (scrollOffset > containerOffset) {
            loadDaBars();
            // unbind event not to load scrolsl again
            $(document).unbind('scroll');
        }
    });

});

Answer 3

Let me try something

    function startProgressBar() {

            $(".meter > span").each(function() {
                $(this)
                    .data("origWidth", $(this).width())
                    .width(0)
                    .animate({
                        width: $(this).data("origWidth")
                    }, 1200);
            });

    }

$(window).scroll(function() {
    var target = $('#third');
    var targetPosTop = target.position().top; // Position in page
    var targetHeight = target.height(); // target's height
    var $target = targetHeight + targetPosTop; // the whole target position
    var $windowst = $(window).scrollTop()-($(window).height()/2);     // yes divided by 2 to get middle screen view.

    if (($windowst >= $targetPosTop) && ($windowst < $target)){
                 // start progressbar I guess
                 startProgressBar();
    }

});

Give it a try, let me know.