Similar to my <<timedreplace>> macro, this macro creates an internal link that, when clicked, vanishes and is replaced with whatever is between the << replace >> and << endreplace >> tags. This could be useful if (just for starters) you want to have a passage that can be modified by clicking specific details inside it.

Copy the code in here: http://www.glorioustrainwrecks.com/files/TwineMacro-Replace-1.1.0.txt

By default, the text instantly appears with no transition. You can give the replaced text a fade-in transition using this CSS:

.replacement-in {
	opacity: 0;
}
.replacement {
	transition: 1s;
	-webkit-transition: 1s;
}

(Feel free to customise this CSS to make your own transition style.)
Here is a macro usage example: You see <<replace "a half-eaten cake">>a plate of crumbs<<endreplace>>

A short example program.

Some notes:
* Code inside << replace >> tags is only executed when you click the link. You may notice that the "mailbox" link in the example program produces different text if you click the "front door" link first.
* Note: due to the way the browser and Twine interact, any changes made by <<set >> or <<print>> macros inside a <<replace>> tag will be forgotten if you use the Back or Forward browser buttons. This means that if you put long-term variable changes that affect future passages inside one, you should disable the Back button.
* For those writing CSS: the <a> tag of the link has the class names "internalLink" and "replaceLink". It is immediately followed with a <div> tag with a class name of "replacement" and the style "display:none". Clicking the link removes the link, changes the span's display style to "inline", and toggles the "replacement-in" class, causing the CSS transition.

Attachment	Size
TwineMacro-ReplaceTest.html	186.33 KB
TwineMacro-Replace-1.1.0.txt	1.57 KB