My webpage has several animations running, and it seems that one particular animation is stuttering and not completing properly at times.
The animation I have written is meant to animate percentage bars on the page.
I attempted to add a timeout function to allow the other animations to finish before starting this one, but the timeout doesn't seem to work as intended. It triggers immediately after the page loads. Any advice on ensuring that my percentage animations complete smoothly would be greatly appreciated.
function animatePercentages()
{
$('.bar-percentage[data-percentage]').each(function () {
var progress = $(this);
var percentage = Math.ceil($(this).attr('data-percentage'));
$({countNum: 0}).animate({countNum: percentage}, {
duration: 1000,
easing:'swing',
step: function() {
// Actions to perform during each count
var pct = '';
if(percentage == 0){
pct = Math.floor(this.countNum) + '%';
}else{
pct = Math.floor(this.countNum+1) + '%';
}
progress.text(pct) && progress.siblings().children().css('width',pct);
}
});
});
}
$(document).ready(function() {
setTimeout(animatePercentages(), 1000);
});
Here is an example of the HTML code for the animated bar that failed at 91%:
<div id="bar-5" class="bar-main-container" style="margin-left:auto;margin-right:auto;background:#cb0050;max-width: 250px;">
<div class="wrap">
<div id="bar-percentage13" class="bar-percentage" data-percentage="100">91%</div>
<div class="bar-container">
<div class="bar" style="width: 91%;"></div>
</div>
</div>
</div>