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:
addStyle(".passage { position:absolute !important; } ");
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.
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
};