Cinematic Fade To Black / Fade In from Black

Hello all (again),

Sugarcube 2.31.1 question. I’m trying to create a passage transition effect where the screen fades to black on the outgoing passage, then fades in on the new passage. Like in the movies.

I have a solution… but only if there is no text on-screen: Two CSS animations first change the background color to black, and then from black to white. I then add a transition passage with a timed goto macro. So it runs like this:

  1. Original Passage
  2. Transition Passage - tagged with .fadetoblack and <<timed1s>><<goto "new passage">><</timed>>
  3. New passage - tagged with .fadefromblack

It works great. Unless there’s text in the Original passage. Then, the text pops out when the Transition Passage loads, taking away from the nice fade effect. Ideally the text would fade with the background color change.

Is there a way to solve this?

For example, if the animation included a text colour change that matched the background color change, can I run the animation on the outgoing passage when the link is clicked, rather than when the new passage loads?

Many thanks, Ben

1 Like

By default in SugarCube, when you go from one passage to another, it fades out and then fades back in.

I’m not quite clear what you want to do that is any different from what it does by default.

Could you please clarify?

Sugarcube doesn’t fade out though. It clears and fades in.

A passage fade-out can be configured via the Config.passages.transitionOut setting and a little CSS.

Something like the following should give you a fade-out completely then fade-in effect. You may have to tweak the timings and timing function to your liking, but it should serve as a base.

JavaScript:

Config.passages.transitionOut = "opacity";

Styles:

#passages {
	position: relative;
}
.passage {
	left: 0;
	position: absolute;
	top: 0;
	transition: opacity 1s ease 1.5s;
}
.passage-out {
	opacity: 0;
	transition-delay: unset;
}

Will the “.passage” apply to all passages or just those tagged as such? If I only the effect a few times. Many thanks, Ben

I’m looking to fade everything to black—the whole screen, not just the text—then fade in again.

Just tested this and it does apply to every passage. Is there a way to tag it to specific passages?