title: How to activate progress bar on scroll using waypoints?
body: <p>I want to activate my progress bar on scroll and use <code>waypoints.js</code> for that. However it's not working and the progress bar is either 'filled' before I scroll over or (<a href="https://jsfiddle.net/codingcodingcoding/x1wnqsqn/7/" rel="nofollow noreferrer">like in my current code</a>) remains 'empty' on scroll as well as on page load.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="progress-bar-start" class="center-block progress-wrapper"&gt;
      &lt;h4&gt;UI/UX Design:&lt;/h4&gt;
      &lt;div class="progress"&gt;
          &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 60%"&gt;
              &lt;span class="title"&gt;60%&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#skills {
    margin-top: 0px;
    margin-bottom: 50px;
    .skills-title::first-letter {
      font-size: 60px;
      color: pink;
    }
    .progress-wrapper {
      width: 50%;
      margin-top: 30px;
      .progress-bar {
        background-color: pink;
        width: 0;
        animation: progress 1.5s ease-in-out forwards;
        .title {
          opacity: 0;
          animation: show 0.35s forwards ease-in-out 0.5s;
        }
      }
      .progress {
        height: 40px;
      }
    }
    @keyframes show {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  }
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$('#skills').waypoint(function(direction) {
      if (direction === 'down') {
          $('.progress-bar').addClass("show");
      } else {
          $('.progress-bar').removeClass("show");
      }
  }, {
      offset: '50%'
  });
  </code></pre>