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"}); setTimeout(function() {$("passages").removeChild($("passages").firstChild)},250); $("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.