Previously I was experimenting with alternatives to Twine's default fade-in animation. Now, I've figured out how to make such alterations with a single block of JavaScript insertion that you can drop into your story.

Here's a block of code that, when inserted into a Sugarcane formatted Twine game, changes the passage transition to a dissolve, where the previous passage fades out at the same time as the next passage fades in.

[Note: This will not work with the one-page Jonah format.]

addStyle(".passage { position:absolute !important; } "); History.prototype.display = function (d, b, a) { var c = tale.get(d); this.history.unshift({ passage: c, variables: clone(this.history[0].variables) }); this.history[0].hash = this.save(); var e = c.render(); if(a != "offscreen") { var f = $("passages").firstChild; fade(f, {fade: "out", onComplete: function(){$("passages").removeChild($("passages").firstChild)} }); $("passages").appendChild(e); if(a != "quietly") { fade(e, {fade: "in"}) } } if((a == "quietly") || (a == "offscreen")) { e.style.visibility = "visible" } if(a != "offscreen") { document.title = tale.title; this.hash = this.save(); document.title += ": " + c.title; window.location.hash = this.hash; window.scroll(0, 0) } return e };

Just put this in a vacant passage tagged with "script".

Note that in order to do this, it will set the passage divs to use the style "position: absolute", so keep that in mind if you're using CSS that requires a different positioning.

What this actually does is replace the TiddlyWiki engine's History.prototype.display function with an alternative version that sets the previous passage to fade out and then be removed, instead of just immediately removing it. Since the passage divs are set to absolute positioning, they're drawn one top of the other while they simultaneously exist, instead of being vertically arranged.