Adding Percentage Counter to GSAP Progressbar Animation

[linx97]

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!

[PointC]

Hi linx97 

 

Welcome to the Greensock forum.

 

You'd want to get the progress() when the tween/timeline updates and that will be a value between 0 and 1. You'd then use that to feed into your percentage counter. I did something quite similar in this demo:

 

See the Pen pydXLG by PointC (@PointC) on CodePen

 

Lines 10 and 11 are the timelines that call the changeIt() function onUpdate. On line 30 you'll see how the progress() updates the text. This demo is SVG, but works the same way for regular text.

 

Here's some more info about progress()

https://greensock.com/docs/#/HTML5/GSAP/TweenMax/progress/

 

If you have other questions, a CodePen demo makes it easier to get you the best answers. Here's some more info about that.

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Hopefully that helps.

 

Happy tweening and welcome aboard.

[GreenSock]

Nice one, Craig!

[linx97]

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

[PointC]

You're really close. Just a few corrections and you'll be good to go.

1. Your onUpdate call needs to be on the tween, not the empty timeline. 
2. You have some CSS transitions on the elements which is causing a fight between GSAP and CSS animations. It's best not to mix the two.
3. Your update function that changes the text was using .textContent = newPercent which is for plain JavaScript. You're using jQuery for that update so you'd want:

$('#count').text(newPercent + "%");

Here's a fork of your pen with those changes. Hopefully that helps.

See the Pen jmmdJq by PointC (@PointC) on CodePen

 

Happy tweening.

[linx97]

You're great!! Thanks so much!