Similar to my <<replace>> macro, this code causes the passage text in between the <<timedreplace>> and <<replacewith>> tags to be replaced with what is between those and the <<endtimedreplace>> tag, after a certain number of halves of seconds have elapsed.

New: <<timedinsert>> and <<timedremove>> can be used for simpler behaviour. <<timedinsert>> does not use <<replacewith>>, instead causing everything between itself and <<endtimedinsert>> to appear in the document. <<timedremove>> works in the opposite fashion.

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

By default the text instantly changes with no transition. You can add a fade-in transition with this CSS (or make your own transition!):

.replacement-in {
	opacity: 0;
}
.timedreplacement {
	transition: 1s;
	-webkit-transition: 1s;
}
.replacement-out {
	display:none;
}

Example program.

Implementation details:

* New: If inserted text appears and descends below the bottom of the screen, the page should automatically scroll down to make it visible.
* Note: due to the way the browser and Twine interact, any changes made by code inside a <<timedreplace>> 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.
* The passages are two <span>s, one visible, one hidden, each with the "timedreplacement" class. The one that is removed also has the class "timedreplacement1" and the passage that is added has the class "timedreplacement2".

Version history:
* 05/04/2013 - Added timedinsert and timedremove, as well as downward scrolling.
* 07/03/2013 - Made the transition CSS-based.
* 01/02/2013 - Initial.