Progressbar.js combine two effects

Question

I am trying to combine 2 effects from progressbar.js but I can't get it working. Could somebody take a look and maybe help me out?

This is my codepen with the code that I have so far:

http://codepen.io/stephan-v/pen/MwQQzJ

var startColor = '#FC5B3F';
var endColor = '#9ec64d';

window.onload = function onLoad() {
    var circle = new ProgressBar.Circle('.progress', {
        color: startColor,
        duration: 3000,
        easing: 'bounce',
        strokeWidth: 8,

        // Set default step function for all animate calls
        step: function(state, circle, bar) {
            circle.path.setAttribute('stroke', state.color);
          bar.setText((bar.value() * 100).toFixed(0));
        }
    });

    // This will get the number from the page
    var value = ($('.progress').attr('value') / 100);

    // This will determine the circumference of the circle
    circle.animate(value, {
        from: {color: startColor},
        to: {color: endColor}
    });
};

I am trying to combine the percent text with the custom animation. The demo's can be found on this page:

http://kimmobrunfeldt.github.io/progressbar.js/

I would have no problem rewarding whoever can help me out with this.

Answer 1

you need to add the step function in the circle.animate method

this is how your circle.animate should look

circle.animate(value, {
    from: {
        color: startColor
    },
    to: {
        color: endColor
    },
    step: function(state, circle, bar) {
        circle.path.setAttribute('stroke', state.color);
        console.log(circle);
        circle.setText((circle.value() * 100).toFixed(0));
    }
});

here's a working JSFIDDLE for the same.