Search the Community
Showing results for tags 'count progress'.
Found 1 result
-
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!
