How to animate Progressbar.js when comes visible in the browser with Waypoints?

Question

I'm using Progressbar.js to create an animated progress bar. But the thing is when I place it down, it before it comes into view. I'm using Waypoints to trigger the animation only when visible, but I'm not getting it right.

Please help me figure it out.

Thank You.

var bar = new ProgressBar.Line(container, {
        strokeWidth: 5,
        easing: 'easeInOut',
        duration: 1400,
        color: '#FFEA82',
        trailColor: '#eee',
        trailWidth: 2,
    });

    bar.animate(1.0);  // Number from 0.0 to 1.0

#container{
  margin-top:500px;
  width: 300px;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>


scroll down
<div id="container"></div>

Answer 1

Simple waypoints will do. but note that, by default waypoints will trigger only when element reach the top of the page. scrolling page just to make it appear at the bottom is not enough. it's has to be all the way up or you can use offset parameter to help.

var bar = new ProgressBar.Line(container, {
        strokeWidth: 5,
        easing: 'easeInOut',
        duration: 1400,
        color: '#FFEA82',
        trailColor: '#eee',
        trailWidth: 2,
    });

    $("#container").waypoint(function(){
       bar.animate(1.0);  // Number from 0.0 to 1.0
    }, {offset: "50%"})
    

#container{
  margin-top:500px;
  margin-bottom:500px;
  width: 300px;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>


scroll down
<div id="container"></div>