animation on the same element

Question

Hi I trying to animate the progress bar when it appears on viewport. It should animates the width and the count number. I use animateProgressBar function to animate the width and the number and I call it on waypoint. I use a jquery each for executing that function on each matched element. But it fails

function animateProgressBar(){
 
    var bar = $('.progress-bar');
    var value = $('.progress-bar').find('.count');

    bar.prop('Counter', 0).animate({
            Counter: parseFloat(bar.attr('aria-valuenow'))
        },
        {
            duration: 3000,
            easing: 'swing',      
            step: function(now) {
                var number = parseFloat(Math.round(now * 100) / 100).toFixed(2);
                bar.css({ 'width': number + '%' });
                value.text(number + '%');
            }
        });
    

}
 $('.progress-bar').each(function()  {
var waypoint = new Waypoint({
      element: this,
      handler: function(direction) {
        animateProgressBar();
      }
})
});

/**
 * Progress bars with centered text
 */

.progress {
  position: relative;
}

.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
}
.progress .progress-bar {
    transition: unset;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span class="count"></span>
  </div>
</div>

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis tortor auctor, mattis nulla vel, varius mauris. Maecenas cursus eleifend consequat. Fusce hendrerit dui quis ante iaculis sagittis. Aliquam vehicula quam sollicitudin vestibulum porttitor. Aliquam id quam auctor, ultrices elit eu, lacinia tortor. Phasellus in scelerisque mauris. Suspendisse rutrum at odio at sodales. Cras porta nisl sed justo volutpat, eu efficitur ante pharetra. Pellentesque congue turpis vitae lorem mattis, et molestie quam condimentum. Pellentesque imperdiet orci vitae tortor rutrum viverra. Suspendisse quis rhoncus orci. In vestibulum ac lacus sodales feugiat. Aliquam tempor vehicula urna in egestas.

Curabitur eget ultricies nisi, id consequat arcu. Nulla vitae finibus sem. Mauris bibendum justo non suscipit porttitor. Nulla vel egestas leo, ac hendrerit lacus. Curabitur consequat massa nec nisi cursus scelerisque. In hac habitasse platea dictumst. Aliquam ornare nibh vel lacus mattis efficitur. Nullam sit amet dui ut sapien auctor consectetur sit amet et urna. Morbi placerat eros sem. Phasellus non velit tempor mi pretium eleifend.

Curabitur auctor dui lorem, eu convallis massa facilisis dignissim. Sed sed mi ut nulla scelerisque cursus nec vel odio. Fusce et bibendum libero. Donec vehicula eleifend diam, eget auctor lorem gravida vel. Cras tincidunt ac ligula ut pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eget eros at tellus ultrices feugiat in a massa. In fermentum non turpis in lacinia.

Fusce mauris lorem, fermentum vitae massa ut, convallis tristique purus. Quisque euismod auctor vulputate. Sed sodales a risus ac gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec in volutpat metus. Phasellus pharetra, nisl vitae rhoncus blandit, dolor elit lacinia nulla, vel maximus erat erat eget nunc. Vivamus feugiat lorem urna, nec sodales arcu efficitur vel. Duis eros nibh, lobortis at ipsum sit amet, ultricies dapibus purus. Quisque feugiat, nisi in aliquam dictum, sapien purus dignissim eros, in dapibus nisi turpis bibendum dolor. Curabitur dapibus, sapien at ultrices porttitor, urna erat sodales justo, ut dictum est lacus nec orci.

Donec eu sapien non velit facilisis rutrum. Donec accumsan eget erat in lacinia. Maecenas scelerisque ut lorem eget pharetra. Suspendisse potenti. Fusce vitae neque a massa lacinia cursus ac vel lacus. Nulla quis ipsum dapibus, commodo nunc in, blandit urna. Nullam non porta mi. Aliquam feugiat sodales justo, nec semper est pharetra quis. Nulla ut dui varius, vestibulum quam at, efficitur ante. Cras tortor purus, auctor eu velit quis, posuere sodales enim. Pellentesque nec dolor sed arcu maximus convallis. Ut varius ex nec nunc fringilla, sed dictum turpis aliquam. 
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span class="count"></span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <span class="count"></span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
    <span class="count"></span>
  </div>
</div>

Answer 1

Check this updated code. I have sent elem that refers for this in animateProgressBar function for each element.

function animateProgressBar(elem){
 
    var bar = $(elem);
    var value = $(elem).find('.count');

    bar.prop('Counter', 0).animate({
            Counter: parseFloat(bar.attr('aria-valuenow'))
        },
        {
            duration: 3000,
            easing: 'swing',      
            step: function(now) {
                var number = parseFloat(Math.round(now * 100) / 100).toFixed(2);
                bar.css({ 'width': number + '%' });
                value.text(number + '%');
            }
        });
    

}
 $('.progress-bar').each(function(index, elem)  {
var waypoint = new Waypoint({
      element: elem,
      handler: function(direction) {
        animateProgressBar(elem);
      }
})
});

/**
 * Progress bars with centered text
 */

.progress {
  position: relative;
}

.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
}
.progress .progress-bar {
    transition: unset;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span class="count"></span>
  </div>
</div>

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis tortor auctor, mattis nulla vel, varius mauris. Maecenas cursus eleifend consequat. Fusce hendrerit dui quis ante iaculis sagittis. Aliquam vehicula quam sollicitudin vestibulum porttitor. Aliquam id quam auctor, ultrices elit eu, lacinia tortor. Phasellus in scelerisque mauris. Suspendisse rutrum at odio at sodales. Cras porta nisl sed justo volutpat, eu efficitur ante pharetra. Pellentesque congue turpis vitae lorem mattis, et molestie quam condimentum. Pellentesque imperdiet orci vitae tortor rutrum viverra. Suspendisse quis rhoncus orci. In vestibulum ac lacus sodales feugiat. Aliquam tempor vehicula urna in egestas.

Curabitur eget ultricies nisi, id consequat arcu. Nulla vitae finibus sem. Mauris bibendum justo non suscipit porttitor. Nulla vel egestas leo, ac hendrerit lacus. Curabitur consequat massa nec nisi cursus scelerisque. In hac habitasse platea dictumst. Aliquam ornare nibh vel lacus mattis efficitur. Nullam sit amet dui ut sapien auctor consectetur sit amet et urna. Morbi placerat eros sem. Phasellus non velit tempor mi pretium eleifend.

Curabitur auctor dui lorem, eu convallis massa facilisis dignissim. Sed sed mi ut nulla scelerisque cursus nec vel odio. Fusce et bibendum libero. Donec vehicula eleifend diam, eget auctor lorem gravida vel. Cras tincidunt ac ligula ut pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eget eros at tellus ultrices feugiat in a massa. In fermentum non turpis in lacinia.

Fusce mauris lorem, fermentum vitae massa ut, convallis tristique purus. Quisque euismod auctor vulputate. Sed sodales a risus ac gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec in volutpat metus. Phasellus pharetra, nisl vitae rhoncus blandit, dolor elit lacinia nulla, vel maximus erat erat eget nunc. Vivamus feugiat lorem urna, nec sodales arcu efficitur vel. Duis eros nibh, lobortis at ipsum sit amet, ultricies dapibus purus. Quisque feugiat, nisi in aliquam dictum, sapien purus dignissim eros, in dapibus nisi turpis bibendum dolor. Curabitur dapibus, sapien at ultrices porttitor, urna erat sodales justo, ut dictum est lacus nec orci.

Donec eu sapien non velit facilisis rutrum. Donec accumsan eget erat in lacinia. Maecenas scelerisque ut lorem eget pharetra. Suspendisse potenti. Fusce vitae neque a massa lacinia cursus ac vel lacus. Nulla quis ipsum dapibus, commodo nunc in, blandit urna. Nullam non porta mi. Aliquam feugiat sodales justo, nec semper est pharetra quis. Nulla ut dui varius, vestibulum quam at, efficitur ante. Cras tortor purus, auctor eu velit quis, posuere sodales enim. Pellentesque nec dolor sed arcu maximus convallis. Ut varius ex nec nunc fringilla, sed dictum turpis aliquam. 
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span class="count"></span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <span class="count"></span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
    <span class="count"></span>
  </div>
</div>

s ac gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec in volutpat metus. Phasellus pharetra, nisl vitae rhoncus blandit, dolor elit lacinia nulla, vel maximus erat erat eget nunc. Vivamus feugiat lorem urna, nec sodales arcu efficitur vel. Duis eros nibh, lobortis at ipsum sit amet, ultricies dapibus purus. Quisque feugiat, nisi in aliquam dictum, sapien purus dignissim eros, in dapibus nisi turpis bibendum dolor. Curabitur dapibus, sapien at ultrices porttitor, urna erat sodales justo, ut dictum est lacus nec orci.

Donec eu sapien non velit facilisis rutrum. Donec accumsan eget erat in lacinia. Maecenas scelerisque ut lorem eget pharetra. Suspendisse potenti. Fusce vitae neque a massa lacinia cursus ac vel lacus. Nulla quis ipsum dapibus, commodo nunc in, blandit urna. Nullam non porta mi. Aliquam feugiat sodales justo, nec semper est pharetra quis. Nulla ut dui varius, vestibulum quam at, efficitur ante. Cras tortor purus, auctor eu velit quis, posuere sodales enim. Pellentesque nec dolor sed arcu maximus convallis. Ut varius ex nec nunc fringils ac gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec in volutpat metus. Phasellus pharetra, nisl vitae rhoncus blandit, dolor elit lacinia nulla, vel maximus erat erat eget nunc. Vivamus feugiat lorem urna, nec sodales arcu efficitur vel. Duis eros nibh, lobortis at ipsum sit amet, ultricies dapibus purus. Quisque feugiat, nisi in aliquam dictum, sapien purus dignissim eros, in dapibus nisi turpis bibendum dolor. Curabitur dapibus, sapien at ultrices porttitor, urna erat sodales justo, ut dictum est lacus nec orci.

Donec eu sapien non velit facilisis rutrum. Donec accumsan eget erat in lacinia. Maecenas scelerisque ut lorem eget pharetra. Suspendisse potenti. Fusce vitae neque a massa lacinia cursus ac vel lacus. Nulla quis ipsum dapibus, commodo nunc in, blandit urna. Nullam non porta mi. Aliquam feugiat sodales justo, nec semper est pharetra quis. Nulla ut dui varius, vestibulum quam at, efficitur ante. Cras tortor purus, auctor eu velit quis, posuere sodales enim. Pellentesque nec dolor sed arcu maximus convallis. Ut varius ex nec nunc fringils ac gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec in volutpat metus. Phasellus pharetra, nisl vitae rhoncus blandit, dolor elit lacinia nulla, vel maximus erat erat eget nunc. Vivamus feugiat lorem urna, nec sodales arcu efficitur vel. Duis eros nibh, lobortis at ipsum sit amet, ultricies dapibus purus. Quisque feugiat, nisi in aliquam dictum, sapien purus dignissim eros, in dapibus nisi turpis bibendum dolor. Curabitur dapibus, sapien at ultrices porttitor, urna erat sodales justo, ut dictum est lacus nec orci.

Donec eu sapien non velit facilisis rutrum. Donec accumsan eget erat in lacinia. Maecenas scelerisque ut lorem eget pharetra. Suspendisse potenti. Fusce vitae neque a massa lacinia cursus ac vel lacus. Nulla quis ipsum dapibus, commodo nunc in, blandit urna. Nullam non porta mi. Aliquam feugiat sodales justo, nec semper est pharetra quis. Nulla ut dui varius, vestibulum quam at, efficitur ante. Cras tortor purus, auctor eu velit quis, posuere sodales enim. Pellentesque nec dolor sed arcu maximus convallis. Ut varius ex nec nunc fringil