How to fire jQuery in page view?

Question

I want this animation to start when the portion is either selected from the nav bar or is in view on scrolling.
Sample code:
HTML:

    <section id="section-skills" class="section appear clearfix">
            <div class="container">
                <div class="row mar-bot40">
                    <div class="col-md-offset-3 col-md-6">
                        <div class="section-header">
                            <h2 class="section-heading animated" data-animation="bounceInUp">Skills</h2>
    </div>
</div>
</div>
</div>
<div class="container">
                <div class="row" >
                <div class="col-md-6">
<div class="skillbar clearfix " data-percent="80%">
    <div class="skillbar-title" style="background: #333333;"><span>Java</span></div>
    <div class="skillbar-bar" style="background: #525252;"></div>
    <div class="skill-bar-percent">75%</div>
</div> <!-- End Skill Bar -->

<!--REST OF THE CODE FOLLOWS AS IN THE EXAMPLE LINK PROVIDED-->

 </section>

I tried using waypoint in jQuery but it's not working.

jQuery(document).ready(function(){
  $('#section-skills').waypoint(function(direction) {  
    jQuery('.skillbar').each(function(){
        jQuery(this).find('.skillbar-bar').animate({
            width:jQuery(this).attr('data-percent')
        },6000);
    });
});
});

Any solution would be really helpful.

Answer 1

Use jQuery Appear repository to start the animation when the elements are in viewport.

Here is the sample code

HTML:

    <!-- Progress Bars -->
<div class="skills-wrap">
    <div class="container">
        <!-- Blue progress bars -->
        <h1 class="text-center">BLUE PROGRESS BARS</h1>
        <div class="skills progress-bar1">
            <ul class="col-md-6 col-sm-12 col-xs-12">
                <li class="progress">
                    <div class="progress-bar" data-width="85">
                        Wordpress 85%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="65">
                        Graphic Design 65%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="90">
                        HTML/CSS Design 90%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="60">
                        SEO 60%
                    </div>
                </li>
            </ul>
            <ul class="col-md-6 col-sm-12 col-xs-12 wow fadeInRight">
                <li class="progress">
                    <div class="progress-bar" data-width="75">
                        Agencying 75%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="95">
                        App Development 95%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="70">
                        IT Consultency 70%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="90">
                        Theme Development 90%
                    </div>
                </li>
            </ul>
        </div>
        <!-- /Blue progress bars -->
    </div>
</div>

The CSS:

.progress {
    height: 35px;
    line-height: 35px;
    margin-bottom: 45px;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    list-style: none;
}

.progress-bar {
    font-weight: 600;
    line-height: 35px;
    padding-left: 20px;
    text-align: left;
}

.progress-bar1 .progress-bar {
    background: #026ea6;
}

Script:

jQuery(document).ready(function () {

/*----------------------------------------------------*/
/*  Animated Progress Bars
/*----------------------------------------------------*/

    jQuery('.skills li').each(function () {
        jQuery(this).appear(function() {
          jQuery(this).animate({opacity:1,left:"0px"},800);
          var b = jQuery(this).find(".progress-bar").attr("data-width");
          jQuery(this).find(".progress-bar").animate({
            width: b + "%"
          }, 1300, "linear");
        }); 
    });   

});

The live demo is here at Bootstrap Animated Progress Bar