Loop Issues...

[hybrid8287]

Hey there Kottenator!

First and foremost, great plugin!

I'm using build 0.6.0 and ran across a snag. I'm hoping you can help me out with this. I've made a few modifications to suit my needs, but found myself in a pickle.

Issue: I am using the Circle Progress JQuery plugin (version: 0.6.0) for a project and have made some modifications to it, however, each circle seems to repeat itself (or loop) for an extended period of time rather than only performing the animation once.

Due to the modifications made, such as adding a link to where if it is clicked, the animation begins, doesn't seem to be where the issue lies. It's when you start to scroll down, and when you do - every circle starts animating based on the percentage set but keeps repeating itself several times before it stops. It should only start the animation for each circle once when the user scrolls down but I can't seem to figure out the root of why this is occurring.

$('.about_nav a:nth-of-type(2)').click(function () {
function animateElements() {
    $('.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() - 30 && !animate) {
            $(this).data('animate', false); // Change this 'false -or- true' - Currently set to false so that each time a user clicks on 'Skill-set' link, animation occurs
            $(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();
$('.about_body_wrapper').scroll(animateElements);
});

Here is a rough demo of what I mean: http://jsfiddle.net/de41cppa/ - Click "Skill-set" tab and scroll down.

Any help on this would be greatly appreciated!

[hybrid8287]

Here is my next iteration: http://jsfiddle.net/de41cppa/1/

I got it to stop looping...However, all circles start over on scroll, it needs to be where each circle animation occurs right after the other on scroll and only occur once.

To be a bit more precise:
Once the visitor clicks on the link - the animation occurs for all circles seen on the page (or section) of the page. Then once the user scrolls down, each circle animates one after the other depending on the frequency of user scrolling and should only occur once. - Then if a user decides to scroll back up, nothing happens since all circles animation has been completed - same would apply if the user decides to scroll back down...However, if the user clicks on the link again, the entire process (or animation of circles) start all over again.

I think the underlying issue resolves around here: if (elementPos < topOfWindow + $(window).height() - 30 && !animate) - but I'm not entirely sure...

Any help is greatly appreciated!

[kottenator]

Hi!

Try to avoid $(window).scroll(animateElements). This re-starts the animation on each scroll tick. What you want is to try jquery.appear, see this ticket.

[hybrid8287]

Kottenator, Thanks for the reply. I am avoiding $(window).scroll(animateElements); - instead I have this declared: $('.about_body_wrapper').scroll(animateElements); - For some odd reason though, when I add that onto the fiddle, it doesn't work, but does work if i have it as "window" instead...weird...either way, I came up with the solution on looping.

Here is my latest iteration: http://jsfiddle.net/de41cppa/5/

Now, I ran into another snag though. I need to add a click handler. Here is my question on stackoverflow: http://stackoverflow.com/questions/33878486/circle-progress-bar-jquery-plugin-event-trigger-issue

If you will, could you take a gander at it? I'd greatly appreciate it.

[hybrid8287]

Solved:
Took me awhile, but I finally got it figured out and working! Here is the latest iteration: http://jsfiddle.net/de41cppa/10/

Don't mind the layout on that fiddle...Everything is working as it should now. No more loop issues and the circles animate on scroll as desired.