Transition b/w passages - fade in/out, incl bg

In the Infectious storytelling game, I wanted to be able to fade to black and back up again between passages. These passages had different backgrounds - and backgrounds can’t be animated, and the #story class is limited to the content on the passage, not the background.

My workaround:

Create a black image (in mine, it’s named “fade.png”), and place it in the same folder as the twine html. Basically, it’s an image overlay that we’re going to call to fade in and out.

In the Stylesheet:

/* sets the image style so that it covers the whole screen, and is on top of any other image */

#fade {
  position: fixed;
  display: block;
  width: 100%;
  z-index: 100;
  pointer-events: none;
}
/* animate fade (the transition to black b/w specified passages) */
.fade-in-out {
  opacity: 1;
  animation-name: fade-in-out;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-duration: 6s;
  animation-fill-mode: forwards;
}
@keyframes fade-in-out {
    0%,
    to {opacity: 0}
    50% {opacity: 1}
}

/* sets the image style so that it covers the whole screen, and is on top of any other image */

#fade {
  position: fixed;
  display: block;
  width: 100%;
  z-index: 100;
  pointer-events: none;
}
/* animate fade (the transition to black b/w specified passages) */
.fade-in-out {
  opacity: 1;
  animation-name: fade-in-out;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-duration: 6s;
  animation-fill-mode: forwards;
}
@keyframes fade-in-out {
    0%,
    to {opacity: 0}
    50% {opacity: 1}
}

Most of these are obvious, but just in case:

• animation-fill-mode: forwards; sets the image to set on its final keyframe (if you don’t have this, it will return to the full image opacity - so just a black screen - after the animation is complete.
• keyframes is the actual animation instructions.

In the passage you are leaving:

<<link “next passage">><<script>>$('<img id=“fade" class="fade-in-out" src="fade.png" >').appendTo(document.body);<</script>><<timed 3s>><<goto [[next passage]]>><</timed>><</link>>

so on the link “next passage”, the Javascript there will add “fade.png” to the body of the game (just putting it into the passage is no good, as it won’t cover the whole screen). Because my entire animation is set to last 6 seconds, I add a timer macro to wait half that time (3 sec) so that the passage transitions just at the black image. The next passage will be waiting underneath that for the fade out.