How to animate *independently* several sections of progress bars in Bootstrap?

user_3838644 0
Viewed 623

I have some Bootstrap code which works perfectly well to animate a section of progress bars when it is viewed by the user.

However it animates all the progress bars in the page instead of animating only the progress bars in that viewed section. As a result, when the user goes to another section of progress bars, these are already animated and he does not see any animation.

My question is then: how to modify the code below to animate independently the different sections as they are viewed?

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


<!-- The first section of progress bars somewhere in 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>
jquery-waypoints twitter-bootstrap-3 progress-bar css javascript
2 Answers

i just noticed you don't close your section elements and other tags properly

<section class="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 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 class="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 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 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>

when your waypoint function called you each all your progress elements instead of only child progress elements

$('#skills').waypoint(function() {
  $('.progress .progress-bar').each(function() { // <- you are getting all progress elements
    $(this).css("width", $(this).attr("aria-valuenow") + '%');
  });
}, { offset: '80%'} );

change to 

$('.skills').waypoint(function () {
   var el = this.element;
   var children = $(el).find(".progress-bar");
   $(children).each(function () { // <- make sure getting only children elements
        $(this).css("width", $(this).attr("aria-valuenow") + '%');
   });
}, { offset: '80%' });

and make sure other skills section not viewing by user when page loaded(not in the viewport)

render

user_66194260

It should work if you use different classes in your HTML and then in your JS initiate the different classes one by one when needed 

    <div class="progress">
      <div class="progress-bar progress-bar-1" 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>

$('#skills').waypoint(function() {
  $('.progress-bar.progress-bar-1').each(function() {
    $(this).css("width", $(this).attr("aria-valuenow") + '%');
  });
}, { offset: '80%'} );
user_123545350
Related