CODEWITHSUNDEEP
javascriptjquerycharts
vitalym
vitalym

Reputation: 893

Triggering animation of easypiechart.js with waypoints

I'm trying to bind animated charts build with easypiechart.js to waypoints, so that animation will trigger only when user scrolls down to charts. Script that creates charts looks like that:

$(function(){
$('.chart').easyPieChart({
        easing: 'easeOutBounce',
        barColor:'#545ec4',
        trackColor:'#ccc',
        scaleColor:false,
        lineWidth:2,
        size:191,
        lineCap:'circle',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});

However, when I'm trying to wrap this function into waypoints function, it doesn't work at all, even charts dissapear.

I do it like this:

$('.chart').waypoint(function(event, direction) {
    $('.chart').easyPieChart({
        easing: 'easeOutBounce',
        barColor:'#545ec4',
        trackColor:'#ccc',
        scaleColor:false,
        lineWidth:2,
        size:191,
        lineCap:'circle',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
},{
  triggerOnce: true,
  offset: 'bottom-in-view'
});

Any explanation or correction will be highly appreciated.

Upvotes: 0

Views: 1632

Answers (2)

RvDesignStudio
RvDesignStudio

Reputation: 31

Hi i am using this script and it works fine for me

$('.chart').waypoint(function() {
                      $(this).easyPieChart({
                        animate: 2000,
                        scaleColor: false,
                        trackColor: '#e5e5e5',
                        barColor: '#f36640',
                        lineWidth: 14,
                        size: 175,
                      });
                    }, {
                      triggerOnce: true,
                      offset: 'bottom-in-view'
                });

Upvotes: 1

Sia
Sia

Reputation: 133

Did you try wrapping the easy pie chart function in another function and calling that from the waypoint function? Not sure if that would even matter...

Upvotes: 0

Related Questions