Hello, I'm new to GSAP but am excited to learn more! I came to GSAP because jQuery animate and Velocity both failed in their performance across devices and I'm hoping this will look better.
I'm trying to animate a progress bar that changes width from left to right and also tells you what percent it's at. So far the GSAP animation is moving smoothly from left to right but I am unsure how to make the percentage count update. Here is what I have so far:
<div class="progress progress-rounded progress-1">
<div class="progress-bar js-progress-bar-search"><p>0%<p></div>
</div>
function progressbar(progressbar, time) {
var progressbar = $(progressbar);
var tween = new TweenLite(progressbar, time, {
width: '100%',
ease: 'linear',
onComplete: function(){ // progressbar completed
progressbar.css({"width": "100%"});
progressbar.addClass("complete").html("<p>100%</p>");
}
});
};
progressbar(".js-progress-bar-search", 60);
Here is the function that I used with Velocity. It gives you a progress option that is a function and passes in values that you can use.
progressbar.velocity({"width": "100%"}, {
duration: time,
easing: "linear",
progress: function(elements, c, r, s, t) {
var number = Math.floor((c * 100) + 1);
progressbar.html("<p>" + number + '%' + "</p>");
},
complete: function(){ // progressbar completed
progressbar.addClass("complete").html("<p>100%</p>");
}
});
I'm not sure how this would be done in GSAP and I'd really appreciate any help!