title: Skill Bar Animation on page scroll
body: <p>How to Achieve Skill bar animation on the specific section of page scroll. I have tried to make a sliding skill bar animation but not making up to the effect that I want. it starts animating at starting page but I want it to start animation on specific page section scroll.</p>
  
  <p>In my below code I want the animation to be started on page scroll of <strong>third-sec</strong>. But it is not happening. Please fix the code with attached snippet of fixed code.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;section id="first-sec"&gt;&lt;/section&gt;
  &lt;section id="second-sec"&gt;&lt;/section&gt;
  &lt;section id="third-sec"&gt;
  
    &lt;div class="container"&gt;
      &lt;!-- First bar --&gt;
      &lt;div class="progress-bar" data-percentage="95%"&gt;
        &lt;h4 class="progress-title-holder"&gt;
          &lt;span class="progress-title"&gt;HTML5&lt;/span&gt;
           &lt;span class="progress-number-wrapper"&gt;
        &lt;span class="progress-number-mark"&gt;
          &lt;span class="percent"&gt;&lt;/span&gt;
           &lt;span class="down-arrow"&gt;&lt;/span&gt;
          &lt;/span&gt;
          &lt;/span&gt;
          &lt;/h4&gt;
        &lt;div class="progress-content-outter"&gt;
          &lt;div class="progress-content"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Second bar --&gt;
      &lt;div class="progress-bar" data-percentage="90%"&gt;
        &lt;h4 class="progress-title-holder clearfix"&gt;
              &lt;span class="progress-title"&gt;CSS3&lt;/span&gt;
                  &lt;span class="progress-number-wrapper"&gt;
        &lt;span class="progress-number-mark"&gt;
          &lt;span class="percent"&gt;&lt;/span&gt;
              &lt;span class="down-arrow"&gt;&lt;/span&gt;
                  &lt;/span&gt;
                  &lt;/span&gt;
                  &lt;/h4&gt;
        &lt;div class="progress-content-outter"&gt;
          &lt;div class="progress-content"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>body{
    margin:0;
  }
  
  #first-sec {
    height:100vh;
    background-color:#283c86;
  }
  
  #second-sec {
    height:100vh;
    background-color:#45a247;}
  
  #third-sec {
  
  }
  
  /*====Skill Bar=====*/
  
  .container {
      height: 300px;
      max-width: 100%;
    width:70%;
    margin: 10% auto;
  }
  
  .progress-bar {
      margin: 20px 0 10px;
      overflow: hidden;
      /*padding-left:20px;
    padding-right: 25px; /* Separate bars from container */
  }
  
  .progress-title-holder {
      padding-bottom: 7px;
      position: relative;
      margin: 5px 0;
      font-family: Montserrat, sans-serif;
      font-size: 2e;
      line-height: 15px;
      font-weight: 400;
      color: #2e2e2e;
  }
  
  .progress-title {
      z-index: 100;
      font-weight: bold;
  }
  
  .progress-number-wrapper {
      width: 100%;
      z-index: 10;
  }
  
  .progress-number-mark {
      margin-bottom: 4px;
      border-radius: 3px;
      background-color: #00d2ff;
      padding: 0 8px;
      position: absolute;
      bottom: 0;
      -moz-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
  }
  
  .progress-number-wrapper,
  .progress-number-mark {
      font-family: Open Sans, sans-serif;
      font-size: 11px;
      line-height: 24px;
      height: 24px;
      letter-spacing: 0px;
      font-weight: 600;
      font-style: normal;
      text-transform: none;
      color: #ffffff;
  }
  
  .down-arrow {
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      border-top: 3px solid #00d2ff;
      position: absolute;
      left: 50%;
      top: 100%;
      -moz-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
  }
  
  .progress-content-outter {
      height: 12px;
      background-color: #E1E1E0;
  }
  
  .progress-content {
      height: 21px;
      background-color: #00d2ff;
      width: 0%;
  }
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>// Skill Bar Animation
  
  jQuery(document).ready(function() {
    jQuery(".progress-bar").each(function() {
      jQuery(this).find(".progress-content").animate(
        {
          width: jQuery(this).attr("data-percentage")
        },
        2000
      );
  
      jQuery(this).find(".progress-number-mark").animate(
        {
          left: jQuery(this).attr("data-percentage")
        },
        {
          duration: 2000,
          step: function(now, fx) {
            var data = Math.round(now);
            jQuery(this).find(".percent").html(data + "%");
          }
        }
      );
    });
  });
  </code></pre>