Start animation after scroll

[thallysondias]

I want the graphic load after I make the scroll . I tried this code:

//scroll menu
            $(function(){

            $(window).scroll(function(){
                //create instance
                $('.chart').easyPieChart({
                    animate: 2000
                });
                //update instance after 5 sec
                if($(window).scrollTop() > $(window).height() + 600) { 
                    $('.chart').data('easyPieChart').update(100);
                } 
            });
        });

The problem is that when it comes to the point he does not make the loading smoothly. Only appears with the full graphic. 0 to 100...

[craig-mrare]

Hey @thallysondias I had the same issue and figured out that because you're firing the update function on every scroll event, the plugin can't animate it. I got around this by setting a boolean to check whether the chart had already been updated:

var isActive = false;

if($(window).scrollTop() > $(window).height() + 600) {
    if(isActive === false){ 
        $('.chart').data('easyPieChart').update(100);
        isActive = true;
    }
} 

Hope this helps :)

[MarioPerini]

on scroll events should be debounced in general

[pfuhrmann]

The way to do this is to create an initial chart which is not animated without the barColor and then reset it + recreate again with the barColor and animation once scrolling.

Something like:

// prepare chart
$t.easyPieChart({
  animate    : { enabled : false },
  barColor   : false,
});

$(window).scroll(function(){
  // your logic
  $t.easyPieChart({
    animate    : { enabled : true },
    barColor   : '#fff',
  });
});