How could I make the animation starts on scroll down?

Question

I wonder how could I make this animation start either when you scroll down 1000px from the top or when you see this it on your screen?

I have tried different ways and zero luck, it starts automatically when the website loads.

 $(".progress div").each(function() { var display = $(this), currentValue = parseInt(display.text()), nextValue = $(this).attr("data-values"), diff = nextValue - currentValue, step = (0 < diff ? 1 : -1); if (nextValue == "0") { $(display).css("padding", "0"); } else { $(display).css("color", "#fff").animate({ "width": nextValue + "%" }, "slow"); } }); 

 .progress-bar { background-color: #53dceb; height: 12px; -webkit-transition: width 1.5s ease-in-out; transition: width 1.5s ease-in-out; } 

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <div style="margin-bottom: 2rem"> <h5 style="color: #666">test12 <span class="pull-right">50%</span></h5> <div class="progress"> <div data-values="50" class="progress-bar" style="color: rgb(255, 255, 255);"></div> </div> </div> 

Answer 1

You were running the script on page load instead of 'onscroll' of the container element. In you case that might be body , in my case I put it inside scrollable-div for demonstration purposes.

Also, set the width in your css, otherwise the bar will look as if it were 100% wide.

 $(function(){ var progressBar = $('.progress-bar'), display = $('#display'), initProgress = 0, targetProgress = parseInt(progressBar.attr("data-values")); $('#scrollable-div').on('scroll', function(){ var currentValue = parseInt(display.text()), nextValue = targetProgress, diff = nextValue - currentValue, step = (0 < diff ? 1 : -1); if (nextValue == "0") { progressBar.css('width', '0%'); } else { progressBar.css('width', nextValue+'%'); } }); }) 

 .progress-bar { background-color: #53dceb; height: 12px; width: 0%; -webkit-transition: width 1.5s ease-in-out; transition: width 1.5s ease-in-out; } 

 <div id="scrollable-div" style="margin-bottom: 2rem; height: 150px; border: 1px solid #CCC; overflow: auto;"> <h5 style="color: #666">test12 <span id="display" class="pull-right">50%</span></h5> <div class="progress"> <div data-values="50" class="progress-bar" style="color: rgb(255, 255, 255);"></div> </div> <div style="height: 500px;"><!-- push down to show scroll --></div> </div> <!-- JS code --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 

Answer 2

It has been solved here .. How could I fix the animation speed?

 function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } var IsViewed = false; $(document).scroll(function() { // this code is run everytime you scroll console.log('scrolling'); // scroll a little bit and see how many times this is logged - that is how many times you run the code below $(".progress div").each(function() { var display = $(this), currentValue = parseInt(display.text()), nextValue = $(this).attr("data-values"), diff = nextValue - currentValue, step = (0 < diff ? 1 : -1); if (!display.is(':animated')) { // this checks to see if you are currently animating - if you are, you do not want to start the animation again (otherwise you get that slow start you were seeing) if (nextValue == "0") { $(display).css("padding", "0"); } else { $(display).css("color", "#fff").animate({ "width": nextValue + "%" }, "fast"); } } }); });