Jump to content
GreenSock

Fernando Matias Cohen

How to improve my power bar?

Recommended Posts

Hello everyone!, I wanted to try to perform the typical power bar functionality based on the keyUp event, but let's say that the functionality was not very fluid, if someone has an idea of how it could be more fluid, I accept the ideas to learn, many Thank you. 😎

See the Pen wvPxpoK by designfenix (@designfenix) on CodePen

Link to comment
Share on other sites

I don't quite understand your question here - can you please be more specific? I didn't see anything jerky. 

 

You should definitely switch to the more modern GSAP 3 syntax:

// OLD
TweenMax.to(".bar", 0, {width: "-=3%"});

// NEW
gsap.set(".bar", {width: "-=3%"});

If you want to animate things instead of suddenly setting them, you could use a small duration on a gsap.to() call, and make sure to set overwrite: true so that you're not creating conflicting tweens. 

 

If you're setting the same value over and over again, you might want to look into using gsap.quickSetter() for performance reasons.

  • Like 1
Link to comment
Share on other sites

And make sure you don't have a CSS transition on a property that GSAP is animating. Using all will definitely cause issues when you animate the element with GSAP.

 

transition: ease all 0.3s;

 

  • Like 1
Link to comment
Share on other sites

Perfect, both tips implemented, how can I make the progress movement smoother?, it looks very hard when it increases and when it decreases the bar

Link to comment
Share on other sites

It's going to be a little jerky because your animations don't have a duration, and your setInterval doesn't update on every animation frame.

 

How about this? It would probably perform better if animate scaleX instead of width, but it mess up the gradient in the bar.

 

See the Pen GROBBwP by GreenSock (@GreenSock) on CodePen

 

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

That smooth transition is what I was looking for, thank you very much, I'm going to analyze and implement your advice, I'm also going to see about adding a particle emitter at the end of the bar, and I'm going to use the keyPower to make it more or less drop particles.

I'll let you know how it goes later, thank you very much!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×