Twine: Combined <<Replace>> Macro Set

Last updated: 6-Jun-15
I've worked hard to combine my <<replace>>, <<timedreplace>>, <<revision>>, <<hoverreplace>> and <<once>> macros, and all their variations, into a single codebase, and included some new variations as well. Here's my combined "Replace Macro Set": (version 1.1.7)

The first good news is that you only need this much default CSS for all these macros:

.revision-span-in {
	opacity: 0;
.revision-span:not(.revision-span-out) {
	transition: 1s; -webkit-transition: 1s;
.revision-span-out {
	opacity: 0;
The reason I require this CSS is to enable people to modify it to make their own effects. You can, for instance, change this to an instant transition by removing the middle CSS block (with the "transition" property line.)

List of macros
This set includes the following "revision macros":
* <<insert>>, <<replace>>, <<continue>> — triggered by clicking their contents.
* <<timedreplace>>, <<timedinsert>>, <<timedremove>>, <<timedcontinue>>, <<timedcycle>> — triggered by time.
* <<hoverreplace>>, <<hoverremove>> — triggered by the mouse touching their contents, only temporarily.
* <<mousereplace>>, <<mouseremove>>, <<mousecontinue>>, <<mousecycle>> — triggered by the mouse touching their contents, permanently.
* <<once>>, <<later>> — triggered by visiting the passage a certain number of times in the game session.
* <<insertion>>, <<revision>>, <<removal>>, <<cycle>> — triggered by a separate "triggering macro".

It also includes these "triggering macros":
* <<revise>>, <<revert>>, <<randomise>> — hyperlinks.
* <<mouserevise>>, <<hoverrevise>> — sections that the mouse can touch.

Changed syntax
* <<replacewith>>, used to separate sections in <<timedreplace>>, has been replaced with <<becomes>>.
* You can now have multiple sections in most of the revision macros, by separating them with <<becomes>> or <<gains>> macros:

These function just like they do within <<revision>> macros - <<becomes>> replaces the previous section with the next section, and <<gains>> merely appends the next section.
* To reconcile differences between <<replace>> and <<timedreplace>>'s syntax, some macros (currently just the <<replace>>, <<mousereplace>> and <<hoverreplace>> varieties, as well as <<mousecontinue>>) have multiple syntax for specifying sections - the "normal" syntax, where each section is separated by <<becomes>>/<<gains>>, and a "shorthand" syntax, where the first several sections are strings within the opening tag:

The final section must be between the opening tag and the <<endreplace>> macro tag, though.
For most of these, the shorthand strings behave as if the <<becomes>> macro separates them. The exception to this is the "insert" named macros, wherein the strings will behave as if the <<gains>> macro separates them.

New macros
* <<later>> is the antonym of <<once>> - it displays its contained text on the second and subsequent visits.
* <<mousecycle>> creates a section of text that cycles between different versions whenever the mouse touches it. It's similar to <<cyclinglink>> in some respects, though you can't yet easily bind a variable to change when it changes.
* <<timedcycle>> constantly rotates through its sections without stopping. It is similar to <<timedloop>> and may well replace it in future.


In any of these examples, <<becomes>> can be substituted with <<gains>>.

Feel free to report any bugs to @webbedspace.
Don't use the attached file. It's out of date.


This macro is incredibly

This macro is incredibly versatile. I have found a problem, though.
Imagine the following tweecode:

«timedinsert 5s»
«set alert("executed!");»
[ [14] ]

If the user clicks on the link before 5s, the timedinsert will be executed nonetheless. There should be a check to avoid that.

Hi L, I've run into a weird

Hi L,

I've run into a weird issue with Timed Insert. I set a variable to 1 ($player), then use <> to show a passage that uses that variable.

If I put a timed insert around that display, $player changes from 1 to 2. If I don't use Timed Insert, and leave everything else the same, the variable stays at 1 as normal.

I'm too much of a beginner to understand how or why Timed Insert would change the value of one of my variables. I've tried changing the name (from $player to $winner), but the issue still occurs. Any help you could give would be greatly appreciated.

Advanced CSS for Replace?

If I wanted to use the advance CSS like this vertical dial (below) in a <> instead of a <> (I found this CSS through a cycling link post>> , how could I adapt it?

@keyframes cyc-vert-dial-out {
0% { top: 0em; }
100% { top: 2em; }
@keyframes cyc-vert-dial-in {
0% { top: -2em; }
100% { top: 0em; }
@-webkit-keyframes cyc-vert-dial-out {
0% { top: 0em; }
100% { top: 2em; }
@-webkit-keyframes cyc-vert-dial-in {
0% { top: -2em; }
100% { top: 0em; }
.cyclingLink {
overflow: hidden;
display: inline-block;
position: relative;
height: 2em;
vertical-align: middle;
white-space: pre;
.cyclingLinkEnabled {
display: inline-block !important;
height: 1em;
top: 0em;
left: 0em;
position: absolute;
.cyclingLinkDisabled {
top: -8em;
animation: cyc-vert-dial-out 1s; -webkit-animation: cyc-vert-dial-out 1s;
position: absolute;
.cyclingLinkEnabled {
top: 0em;
animation: cyc-vert-dial-in 0.8s; -webkit-animation: cyc-vert-dial-in 0.8s;
position: relative;
vertical-align: top;
.cyclingLinkInit, .cyclingLinkInit::before {
animation-iteration-count: 0 !important;
-webkit-animation-iteration-count: 0 !important;



I'm just using the basic CSS for the transitions that you list on this page. As I understand it, that should make each new piece of text fade in, and on rare occasion it does, but most of the time it just pops up instantly. I'm just using the <> command to gradually progress text on the same page, but there are a lot of them (sometimes it's only one sentence at a time), if that could be messing with it. Otherwise, anyway idea what's happening and why it's not transitioning right?


How am I actually supposed

How am I actually supposed to use this "Replace Macro Set"?
Where do I put this in my Twine story to use it?