HUD Animations Based on Variable gains and losses?

Trying to create a health/mana system using a pip like system. When health or mana is lost, an asset is animated to a different state. Example: Can't Figure It Out GIF | Gfycat
The example shows the animation working when my Mana variable goes below 1 2 and 3.
I’m pretty sure what I need to do is have the HUD widget check if my Mana variable has been added or removed then play the associated animation. However I can’t quite figure out HOW to do that. Joys of being new to this, right? Right now this is how it looks, however if I try to add in the second image the animations either don’t play or go straight to the final frame. I think it’s because the values are checking a similar state so it messes up the priority on the animations. The first two potions slots will trigger at the same time to end of animation and only the third slot will show the correct animation.

I feel like having this on a OnTick event is a bit of overkill but I’m not entirely sure on where to start with the verification on if Mana goes up play X and if Mana goes down play Y. Any idea on how this could be done correctly? Would I make these checks in the SideScrollerCharacter and somehow link it on the HUD?