Change state of Progress Bar afterAnimateIn

[fernandofas]

How to use the inVisible in this code to change the state of the Progress Bar to animate after the animation is complete?

I'm using react-animate-on-scroll package to animate my page and in this page I have some Progress Bar.

I would like to animate the progress bar after the scroll animation finished.

For example:

The progress bar will animate from the left side and after reach the position on the screen, then will change the width of the bar till the value assigned.

So far, my code looks like this:

[(https://stackoverflow.com/questions/64393319/change-progress-value-afteranimatedin)]

I'm not sure how to change the state of the progress bar inside the function afterAnimatedIn.

React-animate-on-scroll gives the option, but I'm not sure how to implement it.

Any help will be appreciated.