How to suppress page-to-page transition effects in Twine 2.0.3/Harlowe?

Haunted Backlog

When a link loads a new page, I want it to happen without a transition effect. I can't seem to disable the default fade between pages. I've tried a number of older solutions that don't seem to work anymore, such as:

.transition-out { display:none; }

I've poked at this stuff with browser element inspection but I haven't been able to pinpoint it, partly because I'm not sure how to use element inspection with ephemeral effects. I've also had trouble finding the responsible code in Twine's .css and .js files.

Wouldn't mind turning transitions off in the editor as well.

PS: I am specifically talking about transitions between pages, not "text transitions" like shudder.

greyelf

Haunted wrote:

I've also had trouble finding the responsible code in Twine's .css and .js files.

I believe the function you want to look at in the source is showPassage, line 130 deals with 'Transitioning Out' the existing passage and line 192 deals with with render the new.

The out appears to uses a "instant" transition where as the render appears to use a "dissolve" transition.

Haunted Backlog

Well spotted. I hadn't checked engine.js. I guess on some level I assumed it would be modular and not baked in.

I don't know much about javascript. What's the best way to remove the transition effects? I assume I can't just put something in my project's stylesheet.

InspectorCaracal

I'm sure this isn't the best way, but I figured out a rather hacky way of doing it just using Harlowe macros.

(live: 100ms)[
(stop:)
(t8n: "instant")[This text appears without the dissolve transition.]
]

Basically, it holds the passage contents until the built-in dissolve transition is over, then displays them sans fade. If the 100ms delay will mess up what you're trying to do, then I've got nothing. (I didn't fine-tune the time too much, but 50ms was too short and 100ms worked.)

greyelf

If you are willing to lose the ability to use (transition: "dissolve") in your story then you could hack the related 'transition in' CSS so it works the same way (transition: "instant") does.

Add the following CSS to your Story Stylesheet


.transition-in[data-t8n^=dissolve] {
-webkit-animation:appear 0ms step-start;
animation:appear 0ms step-start
}


Haunted Backlog

That's perfect, thank you.