[Adding Percentage Counter to GSAP Progressbar Animation]

You're great!! Thanks so much!

[Adding Percentage Counter to GSAP Progressbar Animation]

Thanks for your help, PointC!

 

I am still a little stuck. I'm unsure of how I'm supposed to combine the Tween with the Timeline? I have added a codepen which you can see here: 

See the Pen aWJaXp by linxlatham (@linxlatham) on CodePen

[Adding Percentage Counter to GSAP Progressbar Animation]

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!