I have the following code (See the code below). It works BUT i have the following issue. When you scroll down and the animation starts, it takes ages to complete the full animation (around 4 seconds). In other words it start very very slow.
I have tried to remove the "slow" from the JS and the CSS transition but I have had not luck, either the progress bars animation stop working or they keep doing the animation very slow.
The idea behind the code is, when you scroll down the animation start and it should have a normal speed.
How could I fix this bug?
Thanks
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() {
$(".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;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div style="background-color: #f5f5f5">
<div class="container">
<div style="padding-top: 2.5rem !important; padding-bottom: 2.5rem" class="row">
<div class="col-12">
<h3>Skills</h3>
<hr style=" padding-bottom: 1.5rem" class="hr-dashes-yellow">
<div id="pbar" class="row">
<!--Skills-block-1-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill1-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number1 <span class="pull-right">30%</span></h5>
<div id="test" class="progress">
<div class="progress-bar" data-values="30" style="color: rgb(255, 255, 255);">
</div>
</div>
</div>
<!-- Skill2-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number2 <span class="pull-right">100%</span></h5>
<div class="progress">
<div data-values="100" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill3-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number3 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill5-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number4 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
</div>
<!--Skills-block-2-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill10-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number5 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill11-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number6 <span class="pull-right">70%</span></h5>
<div class="progress">
<div data-values="70" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill12-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number7 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill13-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number8 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
</div>
<!--Skills-block-3-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill19-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666"> Number9 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar"></div>
</div>
</div>
<!-- Skill20-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number10 <span class="pull-right">40%</span></h5>
<div class="progress">
<div data-values="40" class="progress-bar"></div>
</div>
</div>
<!-- Skill21-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number11 <span class="pull-right">50%</span></h5>
<div class="progress">
<div data-values="50" class="progress-bar"></div>
</div>
</div>
<!-- Skill22-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">number12 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar"></div>
</div>
</div>
</div>
</div>
</body>
<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>
You are binding the animation on every scroll event - you need to check if it is already animating before animating again:
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");
}
}
});
});
.progress-bar {
background-color: #53dceb;
height: 12px;
-webkit-transition: width 1.5s ease-in-out;
transition: width 1.5s ease-in-out;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div style="background-color: #f5f5f5">
<div class="container">
<div style="padding-top: 2.5rem !important; padding-bottom: 2.5rem" class="row">
<div class="col-12">
<h3>Skills</h3>
<hr style=" padding-bottom: 1.5rem" class="hr-dashes-yellow">
<div id="pbar" class="row">
<!--Skills-block-1-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill1-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number1 <span class="pull-right">30%</span></h5>
<div id="test" class="progress">
<div class="progress-bar" data-values="30" style="color: rgb(255, 255, 255);">
</div>
</div>
</div>
<!-- Skill2-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number2 <span class="pull-right">100%</span></h5>
<div class="progress">
<div data-values="100" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill3-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number3 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill5-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number4 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
</div>
<!--Skills-block-2-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill10-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number5 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill11-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number6 <span class="pull-right">70%</span></h5>
<div class="progress">
<div data-values="70" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill12-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number7 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill13-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number8 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
</div>
<!--Skills-block-3-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill19-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666"> Number9 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar"></div>
</div>
</div>
<!-- Skill20-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number10 <span class="pull-right">40%</span></h5>
<div class="progress">
<div data-values="40" class="progress-bar"></div>
</div>
</div>
<!-- Skill21-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number11 <span class="pull-right">50%</span></h5>
<div class="progress">
<div data-values="50" class="progress-bar"></div>
</div>
</div>
<!-- Skill22-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">number12 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar"></div>
</div>
</div>
</div>
</div>
</body>
<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>
You need to call .stop() (or finish()) before starting a new animation:
$(display).css("color", "#fff").stop().animate({ ...
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() {
$(".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").stop().animate({
"width": nextValue + "%"
}, "slow");
}
});
});
.progress-bar {
background-color: #53dceb;
height: 12px;
-webkit-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div style="background-color: #f5f5f5">
<div class="container">
<div style="padding-top: 2.5rem !important; padding-bottom: 2.5rem" class="row">
<div class="col-12">
<h3>Skills</h3>
<hr style=" padding-bottom: 1.5rem" class="hr-dashes-yellow">
<div id="pbar" class="row">
<!--Skills-block-1-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill1-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number1 <span class="pull-right">30%</span></h5>
<div id="test" class="progress">
<div class="progress-bar" data-values="30" style="color: rgb(255, 255, 255);">
</div>
</div>
</div>
<!-- Skill2-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number2 <span class="pull-right">100%</span></h5>
<div class="progress">
<div data-values="100" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill3-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number3 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill5-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number4 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
</div>
<!--Skills-block-2-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill10-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number5 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill11-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number6 <span class="pull-right">70%</span></h5>
<div class="progress">
<div data-values="70" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill12-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number7 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill13-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number8 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
</div>
<!--Skills-block-3-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill19-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666"> Number9 <span class="pull-right">90%</span></h5>
<div class="progress">
<div data-values="90" class="progress-bar"></div>
</div>
</div>
<!-- Skill20-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number10 <span class="pull-right">40%</span></h5>
<div class="progress">
<div data-values="40" class="progress-bar"></div>
</div>
</div>
<!-- Skill21-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">Number11 <span class="pull-right">50%</span></h5>
<div class="progress">
<div data-values="50" class="progress-bar"></div>
</div>
</div>
<!-- Skill22-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">number12 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar"></div>
</div>
</div>
</div>
</div>
</body>
<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>
As Pete said, you create a new animation with each tiny scroll, and these queue up. This becomes apparent when you remove the transition (my browser has a short animation by default anyway).
