KaterinaLupacheva/react-progress-bar

Can't get animation to work

Closed this issue · 5 comments

mauro125 commented

Hello thank you for your work, I'm having some issues getting animations to work.

I'm on version 4.0.0 and using your progress bar generator.
Trying to use default values this is what its telling me to use but it's not working,

<ProgressBar 
    completed={50}
    labelColor="#e80909"
/>

I tried adding other values using generator but its not animating either on local or generator preview

<ProgressBar 
    completed={50}
    labelColor="#e80909"
    transitionDuration=".3s"
    transitionTimingFunction="ease"
/>

Is there something else I'm supposed to do?

KaterinaLupacheva commented

Hello! Here is the screen recording of the progress bar generator. As you can see, animation is working just fine. It animates the change of of the completed value. I changed the transitionDuration to 3s to make it more visible.

Screen.Recording.2021-11-13.at.10.41.59.mov

Please let me know if you are still having any issues.

  • 👍1
mauro125 commented

You're awesome thank you for replying so fast on a weekend!

I went digging through your repos and found an older "simple-progress-bar" one and saw you had used a setInterval so i just changed it to setTimeout, works now. first bar is with setTimeout second one no set time out all other options the same.

setTimeout.mp4

Would be a nice little addition maybe to add an initialValue to ProgressBarProps and it works on its own or maybe its there and didn't see option for it, anyhow thank you again!

KaterinaLupacheva commented

As far as I understand it now, you'd like to animate a progress bar on the initial render, right? Then yes, it's possible to achieve with setInterval. BTW, simple-progress-bar demo uses setInterval, not setTimeout, and randomly generated progress bar https://katerinalupacheva.github.io/react-progress-bar/ also uses setInterval.

So, if I add a new prop to the ProgressBar component something like animateOnInitialRender (true or false), will it help to your specific use case?

  • 👍1
mauro125 commented

I got it working thank you :) but yea I would think either maybe add a prop (animateOnInitialRender (true or false)) or add it to documentation about using setInterval would be helpful, for us beginners anyhow

KaterinaLupacheva commented

I've updated the library and added a new prop - animateOnRender. It's false by default. But if you upgrade the library version up to v4.1.0 and then use the progress bar component like this:

<ProgressBar completed={70} animateOnRender/>

The result will be as follows:

Screen.Recording.2021-11-14.at.19.47.26.mov

Hope it is useful for your case:)

  • 👍1