How to add a (go-to:) macro AFTER a javascript animation?

Question

So, I've followed the answer from user greyelf to the question of how to implement a health bar into Twine Harlowe, as seen from this: http://twinery.org/questions/351/how-can-i-implement-a-visual-health-bar-in-harlowe-2-0-1?show=3333#c3333

And I implemented it into my own project and it works wonderfully. BUT, I'd like to force the player to a different passage once the health bar reaches 0, but I'd like for the new passage to be loaded after the health bar animation is updated (i.e.- you watch it run down to 0, and then the page refreshes to a "You are dead" passage). 

I've tried playing around with adding...

(if: $health < 1)[(go-to: "dead")]

...after

(display: "Update Health Bar")

in the TwineScript from the link above, which indeed takes me to the "dead" passage, but we unfortunately don't see the health bar deplete and then be taken to the passage.

Is there any way to force the javascript animation to finish and then force the player to go to a different passage?

I hope this question makes sense. Let me know if you have more questions about what I'm asking!

Thank you in advance!

Answer 1

Replacing your...

(if: $health < 1)[(go-to: "dead")]

with something the following which uses a (live:) macro to delay the execution of your (goto:) macro by 2 seconds... 

(if: $health < 1)[
	(live: 2s)[
		(go-to: "dead")
	]
]

.. it should allow you to see the updating of the Heath bar before being sent to the dead Passage.

warning: the above example was written from memory and has not been tested, it may contain syntax errors.

Comments

That's exactly what I was looking for! I tested it out and it worked perfect for me. Thank you!