Animated Progress Bars with waypoint

Question

I'm trying to trigger the animation of my progress bars when scrolling to it using waypont.js

---

JS

function animateProgressBar(){
    $(".meter > span").each(function() {
        $(this)
            .data("origWidth", $(this).width())
            .width(0)
            .animate({
                width: $(this).data("origWidth")
            }, 1200);
    });
}

$(".meter > span").each(function() {
    var waypoint = new Waypoint({
      element: $(this),
      handler: function(direction) {
        animateProgressBar();
      }
    });
});

Fiddle

I got Uncaught ReferenceError: Waypoint is not defined :(

Any hints / suggestions will be much appreciated !

Answer 1

You need to call your animateProgressBar function inside the handler method of your waypoint

function animateProgressBar(){
    $(".meter > span").each(function() {
        $(this)
            .data("origWidth", $(this).width())
            .width(0)
            .animate({
                width: $(this).data("origWidth")
            }, 1200);
    });
}


var waypoint = new Waypoint({
      element: document.getElementById('thing'),
      handler: function(direction) {
        animateProgressBar();
      }
});