Animate scroll progress bar

Question

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

Thus, the animation should be paused until the user scrolls to a certain point, as soon as the panel appears, the animation starts.

Here is the Javascript that 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 width:100%; and position:fixed; into your div with class meter

This, of course, if I understood your question correctly? Do you want the progress bar to appear even if the user scrolls?

update:

you can use something like an inview plugin. Below is the download , but here . Wrap it around your script for your progress bar and it will not start the animation until you see it.