setTimeout trigger on scroll

I'm trying to delay a timeout effect, currently the effect starts when the page is loaded, I want it to start when I scroll to a certain div Here is how it currently is

I did some searching and found a library called waypoint that allows to trigger events based on waypoints using the code below but no luck.I also tried setting the display to none and change it once the css animation was triggered but when it appeared on the page the progress bars were already in place.

 var waypoint = new Waypoint({
  element: document.getElementById('waypoint'),
  handler: function(direction) {
    console.log('Scrolled to waypoint!')
  }
})