0

I am designing a One page scrolling webpage. In the webpage I am using easy pie chart in my skill page. Now I want to load the easy pie chart animation when I reached the skill page. I used the waypoint js but it not working. It load the animation when i am in the skill page but when i am in top and refresh the page & than go to the skill page, its not working.

my code are given bellow

custom.js:

jQuery('.skill').waypoint(function() {
$('.chart1').easyPieChart({
animate: 4000,
barColor: '#000',
trackColor: '#ddd',
scaleColor: '#e1e1e3',
lineWidth: 15,
size: 152,
});
}, {
triggerOnce: true,
offset: 'bottom-in-view'
});

Now how can i solve the problem ?

user3778886
  • 1
  • 1
  • 3
  • 1
    Can you please provide a working [example](http://stackoverflow.com/help/mcve)? – Andy Jun 26 '14 at 10:42
  • jQuery('.skill').waypoint(function(event) { alert('You have reached the waypoint'); }); this code work fine. When i reached the skill page it worked. But my animation not working. – user3778886 Jun 26 '14 at 10:45
  • 1
    A working example of your problem. Try [JSFiddle](http://jsfiddle.net/) – Andy Jun 26 '14 at 10:46

1 Answers1

0

You can try this code:

    $(window).scroll( function(){

    /* Check the location of each desired element */
    $('.skill').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it in */
        if( bottom_of_window > bottom_of_object ){

        $('.skill').easyPieChart({
          size: 140,
          lineWidth: 6,
          lineCap: "square",
          barColor: "#22a7f0",
          trackColor: "#ffffff",
          scaleColor: !1,
          easing: 'easeOutBounce',
          animate: 5000,
          onStep: function(from, to, percent) {
          $(this.el).find('.percent').text(Math.round(percent));
          }
        });

        }

    }); 

});
Sanu
  • 330
  • 3
  • 15