Fade between background images in Twine 2 (Sugarcube 2)

Question

Hi all,

I posted this question a few days ago, but I'm not sure it ever actually made it anywhere because my profile says I've asked no questions. If it did, I apologize in advance.

I'm trying to use different background images in different sections of my Twine 2 game. This is pretty easy using tags, but I can't get the transition to work. I'm using this code in my CSS section:

body.menu {
  background-image:url("blah.jpg");
  background-attachment: fixed; 
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  color: #000000
/*Transition*/
	-webkit-transition: background-image 2s ease-in;
    transition: background-image 2s ease-in;
    -moz-transition: background-image 2s ease-in;

}

... which works perfectly in the Twine preview, but doesn't do anything at all in a browser.

I read somewhere that webkit doesn't work anymore and to use @supports instead. I tried a variation of this, but it didn't work either.

So, long story short: how can I get background images to fade in and out?

Thanks in advance!

Answer 1

Beyond the various issues your example style rule has, you have a more serious and fundamental issue.  Namely that animating background transitions is only supported by WebKit/Blink based browsers.  This technique does not currently work in Firefox or Edge (or IE).

You may still be able to accomplish your goal (in all browsers), depending on what exactly you're looking to do, you simply cannot do it with the technique you tried.

• Will you want to fade multiple backgrounds?  (I do not mean simultaneously)
• Will you want to crossfade backgrounds?

---

As an FYI, about the technique.  You can only transition between images, so you need an image for your default state too.  To get the effect you're looking for, I'd suggest a transparent image roughly the size of your other background(s).

Here's a working example: (again, this does not work in non-WebKit/Blink browsers)

body {
	background-attachment: fixed;
	background-image: url("transparent.png");
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-transition: background 2s ease-in;
	-moz-transition: background 2s ease-in;
	transition: background 2s ease-in;
}
body.menu {
	background-image: url("menu.png");
}

 

Comments

In answer to your questions:

1. If I understand you correctly, you're asking whether or not I want to perform this transition multiple times in the same story. The answer is yes, and frequently.

2. If you mean, do I want to fade to black first or fade between images, then I'd prefer to fade directly between images. In other words, you see one, fade to an in-between, and then see the second. However, I'm not too picky as long as I can adjust the duration.

Thanks so much!

---

Really any form of transition would be great as long as it works in all browsers. If you have an idea, I'd love to try it! I'm completely lost at this point. :)