Animate progress bar on scroll

Question

I have a progress bar that animates when the page loads, but I want it to animate when the user scrolls down to it, as it will be in the middle of the page. Right now if the page loads, the user does not see the animation.

So essentially, the animation should be paused until the user scrolls down to a certain point, once the bar is in view, the animation starts.

Here's the Javascript I have so far:

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

Here is a more detailed jsfiddle: http://jsfiddle.net/YAZJb/

Answer 1

how about this?

I updated your jsFiddle http://jsfiddle.net/YAZJb/1/

Essentially all I did was add a width:100%; and position:fixed; to your div with the class meter

That's, of course, If I understood your question correctly? You want the progress bar to stay in view even if the user scrolls?

update:

you could use something like the inview plugin. Here is the download and the demo is here. Wrap it around your own script for your progress bar and it won't start to animate until in view.