Basically I am controlling both the string displayed and the component visibility using animate.css through the

state

property

visibility

.

Side effect is that, when the component is fading out, it shows "hidden" and then starts hiding. I would like to start the animation earlier, and only once it's done, change the string, so that "hidden" is never actually displayed.

The best way to change state after hiding animation completed is to listen for a animationend event. Since you need to change text state only when your component has hidden visibility state you should change it right after hiding animation complete and change back to visible on start animation.