Twine|Sugarcube - How to slide+fade out sidebar

Authoring Twine
,
1

Twine Version: 2.3.14
Story Format: Sugarcube 2.34.1

So, some time ago, I found some code that can dynamically fade out/in the story sidebar, effectively fully hiding it when it’s stowed away.

The issue is that this code completely destroys the transition the sidebar makes in order to stow it (the sliding visual to the left), which I need in order to center the main passage text when the sidebar is stowed.

Stylesheet Code - 

#ui-bar.hide {
	opacity: 0;
	visibility: hidden;
  	right: 0
	-webkit-transition: opacity 400ms ease-in, visibility 400ms step-end;
	transition: opacity 400ms ease-in, visibility 400ms step-end;
}
#ui-bar:not(.hide) {
	-webkit-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
}

/*Code to center story passage*/
#ui-bar.stowed~#story #bbblock {
	margin-left: 4.5em;

}

Is there a way I can make the sidebar slowly slide out to the left as it’s fading out and slide back in to the right as it’s fading back in? Similarly, is there a way I can translate the transformation of the story passage’s margin to match the translation of the sidebar as it fades?

2

First of all there is an error; after right: 0 there should be a semicolon.

However even after fixing that the code is not doing anything for me, maybe because I am using Sugarcube 2.35 not 2.34. Anyway, I am starting from scratch.

Basically instead of dealing with transitions at all, I’m going to use animation instead. First, I am going to create keyframes that will define the fade in/out effect.

Note that I’ve made the opacity 0.2 rather than 0 (fully transparent), otherwise there would be no way for the user to see the unhide button!


@keyframes fadeout {
  0% { opacity: 1 }
  100% { opacity: 0.25 }
}

Now I am going to apply those keyframes to the ui-bar classes. Digging into Sugarcube’s CSS code, I can see that the slide transition lasts 0.2 seconds. Note that I have made the animation last 0.1 seconds rather than 0.2 seconds so that the fade effect can be perceived before the bar fully slides in and out.

#ui-bar.stowed {
    animation: fadeout 0.1s linear;
   animation-fill-mode: forwards;
}

Delete your original CSS and add those two sections. This only works for fading out; I have not found a way to fade in yet. The not pseudoclass in your original code does not seem to work here.

3

Re: centering, I assume you want the text to stay in place when the ui-bar is collapsed.

Digging into the code I can see that the text isn’t actually perfectly centered, it’s actually just offset, so we need to override that. Create a new styleshhet in your story

#ui-bar.stowed~#story {
 margin-left:20em
}

Now we also have to make this work on small displays too, because Sugarcube’s CSS responds to the screen size.

@media screen and (max-width:1136px) {
 #ui-bar.stowed~#story {
  margin-left:3.5em
 }
}

@media screen and (max-width:768px) {
 #story {
  margin-left:3.5em
 }
}

One thing you’ll want to consider now is that on small screens, the player will need to toggle between the sidebar and the story itself, more or less. You might want to design the game around that, by not putting especially important information in the sidebar.