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 them loading on the screen as shown in the example.

Example here

Now this is working as it is but my problem is this:

I want the progress bars to start loading when the bars become visible on the screen.

Once the user scrolls down and gets them in the middle of the screen, the 'animation' should start. The way it is now the animation starts on page load, but the bars are not yet visible as in the following fiddle:

Fiddle

A little extra would be that each bar starts loading after the previous is finished.

I found some similar questions on stack but the answer does not suffice to my needs: Animate progress bar on scroll & Run animation when element is visible on screen

I tried stuff like (it's not the actual code but it's what I remember of it):

var target = $("#third").offset().top;
var interval = setInterval(function() {
    if ($(window).scrollTop() >= target) {
        //start loading progress bar
    }
}, 250);

But without any good results. Can anyone help me on this matter?

Thanks in advance!

score 8 · Accepted Answer · answered Jan 15 '14 at 21:52

8

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.

answered Jan 15 '14 at 21:52

Michael Radionov

12,859
1
55
72

This is exactly what I need! Gratitude! – Filip Huysmans Jan 16 '14 at 08:13
works, but $(document).unbind('scroll'); causing some other side effect for me. – Ganybhat-Satvam Software Aug 11 '17 at 14:28

score 3 · Answer 2 · answered May 12 '14 at 21:06

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');
        }
    });

});

This worked great for me! Any ideas on how I can trigger the animation on button click instead of scroll position? — hockey2112, Aug 20 '19 at 18:53
As a note to self (and to any others who may be wondering), I was able to add an additional offset/delay for the animation by adding this modification to the code above: window.innerHeight+300; — hockey2112, Aug 26 '19 at 17:32

Rum Jeremy · Answer 3 · 2014-01-15T21:05:49.487

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.

Looks good but Micha provided a better solution to my needs, still upvoting this! Thanks — Filip Huysmans, Jan 16 '14 at 08:11

Start animation on progress bar when its visible on screen

3 Answers3

Linked