Question on waypoints and jquery-circle-progress

[soniapello]

Hi!

I wonder if it's possible to have the circle progress and animate it on waypoints. Because now the circle doesn't show and it appears when the offset is reach.

I've made a stackoverflow question here with the demo.

Thanks!

[kottenator]

Hi!

I've answered you on SO.

Shortly:

1. Init the circle with value: 0 - it'll be rendered "empty".
2. Do .circleProgress({value: realValue}) when the circle reaches the waypoint.

Here's a working demo, and another demo (a bit different implementation), and one more demo (using jQuery Appear instead of jQuery Waypoints).

This issue is related to #8. As you can see, one of the first project issues/questions was about the lazy rendering :)

[kottenator]

I hope I've helped you. I'm closing this ticket, but feel free to reopen.

[soniapello]

@kottenator you've helped me a lot thank you for your explanation and your plugin

[kottenator]

In this link I use Waypoints with multiple circles.

If you want to make it in pure JS (though it'd be not 100% pure because of my plugin):

var elements = document.querySelectorAll('.circle');

Array.prototype.slice.apply(elements).forEach(function(el) {
  var $el = $(el);

  $el.circleProgress({value: 0});

  new Waypoint({
    element: el,
    handler: function() {
      $el.circleProgress({
        value: $el.data('value')
      });
      this.destroy();
    },
    offset: '50%'
  });
});

Here's a demo example.