Link clicked first time - on scroll animation doesn't work

Question

Issue:

When I click the skill-set link for the first time, the animation occurs but does not occur when you scroll down. Each circle is to start it's own animation when the user scrolls down the page. If you click the skill-set link twice though, everything works as its supposed to.

So my question at hand is, why doesn't the animation on scroll occur on the first time the skill-set link is clicked?

Here is a DEMO of what I am talking about, please excuse the terrible layout. Once you click on the skill-set link, you see the animation happen, but when you scroll down, the animation is already completed...However, if you click the skill-set link twice, and then scroll down, you see each circle animate when you scroll down. This is what should happen on the first time the link is clicked, but for some odd reason it isn't.

JS:

$('#skill-set-link').click(function () {

    function animateElements(index, element) { // (e, init)
        if (element) { // (init)
            $('.progressbar').data('animate', false);
        }

        $('.progressbar').each(function () {
            var elementPos = $(this).offset().top;
            var topOfWindow = $(window).scrollTop();
            var percent = $(this).find('.circle').attr('data-percent');
            var percentage = parseInt(percent, 10) / parseInt(100, 10);
            var animate = $(this).data('animate');

            if (elementPos < topOfWindow + $(window).height() + 10 && !animate) {
                $(this).data('animate', true);
                $(this).find('.circle').circleProgress({
                    startAngle: -Math.PI / 2,
                    value: percent / 100,
                    thickness: 2, // Change this for thickness
                    fill: {
                        color: '#16A085'
                }
                }).on('circle-animation-progress', function (event, progress, stepValue) {
                    $(this).find('.percent').text((stepValue * 100).toFixed(0) + "%"); // NOTE: Change '.toFixed(0)' to '.toFixed(1)' to get 1 decimal place to the right...
                }).stop();
            }
        });

    }
    animateElements({}, true);
    $('.about_body_wrapper').scroll(animateElements);
});

=========================================================================

Any idea as to why the animation on scroll doesn't occur the first time the link is clicked?

Answer 1

Thanks to the help from Tony Hinkle - Here is the answer.

Due to the main div being hidden - we needed to show() the main div beforehand...However, adding $('#skill-set').show(0, animateElements); as suggested by Tony, didn't quite work right - so instead $('#skill-set').fadeIn(animateElements) replaced that along with taking out the 0 which seemed to do the trick.

Many thanks to Tony though for steering me in the right direction!

Here is the final snippet used to make this work as desired:

function animateElements(index, element) { // (e, init)

    $('.progressbar').each(function () {
        var elementPos = $(this).offset().top;
        var topOfWindow = $(window).scrollTop();
        var percent = $(this).find('.circle').attr('data-percent');
        var percentage = parseInt(percent, 10) / parseInt(100, 10);
        var animate = $(this).data('animate');

        if (elementPos < topOfWindow + $(window).height() + 10 && !animate) {
            $(this).data('animate', true);
            $(this).find('.circle').circleProgress({
                startAngle: -Math.PI / 2,
                value: percent / 100,
                thickness: 2, // Change this for thickness
                fill: {
                    color: '#16A085'
                }
            }).on('circle-animation-progress', function (event, progress, stepValue) {
                $(this).find('.percent').text((stepValue * 100).toFixed(0) + "%"); // NOTE: Change '.toFixed(0)' to '.toFixed(1)' to get 1 decimal place to the right...
            }).stop();
        }
    });

}

$('#skill-set-link').click(function () {
    $('.progressbar').data('animate', false);
    $('#skill-set').fadeIn(animateElements);
});

$(window).scroll(animateElements);

And here is the final iteration: DEMO

Don't mind the layout... :)