(A more readable version of the instructions can be read on the Tumblr blog!)

A demo of a SugarCube macro to fade to black between passages. It is downloadable to allow others to look into its contents!

Setup

1. Copy and paste this Pastebin to your Story JavaScript.
2. Copy and paste this Pastebin to your Story Stylesheet.
3. Make a new passage titled exactly as "black_fade". Add the passage tag, "black-fade". Inside, write <div id="black"></div>. Super important! Copy below identically.

After this, your installment of the macro should be complete!

Usage

1. In the passages where you will be fading from and where you will be fading to, tag it as "passage-fade". For example, I want to transition from "p1" to "p2" with a black fade. Thus, both p1 and p2 should have the tag.
2. In the passage where you will be fading from, write <<fadestart>>.
3. Use the <<link>> macro to link to your destination. Inside the link macro, use <<passagefade "[passage name]" [fade time]>> where [passage name] is the passage you want to go to, and fade time is how long the black fade will be in miliseconds. (1000ms = 1s). However, do NOT put the passage you will be going to in the <<link>> macro itself. See below:

Here, I want to go to the passage "p2". Do NOT write <<link "Next passage" "p2">><</link>>. Do not provide the destination passage in the link macro itself. The macro <<passagefade>> will handle it for you if you specify the passage name in the first argument.

Once you do all this, you should be able to sit back and happily use it as you please!

Problems?

• Make sure you have the passage "black_fade" titled exactly like that.
• Make sure "black_fade" is tagged with "black-fade".
• Make sure you used <<fadestart>> in the passage you are transitioning from.
• Make sure you are correctly using the macro <<passagefade>>. It is time in miliseconds; it should not have "ms" or "s" included in the argument. It should just be the number (e.g. 4000 for 4 seconds).
• Make sure the passages you are fading from and to are tagged with "passage-fade".
• There may be CSS/HTML that is interfering with the look of the fade!
• There may be other JavaScript code interering with the current code.

If you are having problems, please let me take a look at your Stylesheet or let me know what template you are using!