My Bootstrap code successfully animates a section of progress bars when the user views it. However, it currently animates all progress bars on the page rather than just those in the viewed section. This means that when the user moves to another section, the bars are already animated and no further animation is visible.
How can I modify the code below to independently animate different sections as they come into view?
CSS
#skills {
padding: 60px 0;
}
#skills .progress {
height: 35px;
margin-bottom: 10px;
}
#skills .progress .skill {
font-family: "Open Sans", sans-serif;
line-height: 35px;
padding: 0;
margin: 0 0 0 20px;
text-transform: uppercase;
}
#skills .progress .skill .val {
float: right;
font-style: normal;
margin: 0 20px 0 0;
}
#skills .progress-bar {
width: 1px;
text-align: left;
transition: .9s;
}
JS
// Skills section
$('#skills').waypoint(function() {
$('.progress .progress-bar').each(function() {
$(this).css("width", $(this).attr("aria-valuenow") + '%');
});
}, { offset: '80%'} );
HTML
<!-- First section of progress bars somewhere on the page -->
<section id="skills">
<div class="skills-content">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset 1 - Skill 1 <i class="val"></i></span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset 1 - Skill 2 <i class="val"></i></span>
</div>
</div>
</section>
<!-- Another section of progress bars further down the page -->
<section id="skills">
<div class="skills-content">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset N - Skill 1 <i class="val"></i></span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset N - Skill 2 <i class="val"></i></span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset N - Skill 3 <i class="val"></i></span>
</div>
</div>
</section>