Decoupling state & graphics, while sequentially executing graphic updates

Hi there! I'm working on a turn-based game with a pretty generic sequence of events:

1. The player selects a move

2. The character moves to the enemy character and attacks it

3. Damage text pops up

4. The enemy character's health bar decreases

5. The character moves back to their initial position

I've decoupled the character state from the on-screen visuals (as separate classes), but also data-bound them such that when the state (e.g. health) is updated, the visuals (health bar) gets a callback and updates accordingly. When the player selects a move, the state change is instantaneous. However, I don't want the health bar to update until the rest of the movement/attack animation has played out.

Is there a way to keep these two components decoupled while still allowing the visual updates to play out in the right sequence? The only options I can think of are:

1. Don't data-bind, and execute parallel/separate updates to both the state and the visuals (this duplicates logic and seems very error-prone).

2. Implement a delayed data-binding system with a visual update queuing system that forces each visual update to execute in a sequence (this is my current approach, but it seems very over-engineered).

Thanks!