How can I fade-into a passage, using Snowman?

dlgard

Hello,

I would like to implement the same fade-in transitions for passages that are used in Harlowe and Sugarcube.

I have tried to do this using CSS:

#passage {
	transition: 1s linear;
	-webkit-transition: 1s linear;
}

or JQuery, inside the passages:

<script>
$("#passage").fadeIn(1000);
</script>

but I can't seem to get it working. What am I missing?

greyelf

note: You may want to get a more experienced CSS coder to look at my answer.

Transitions generally monitor the state of a property and do something when it changes.

In the case of Fades the property being monitored is generally opacity and you generally are watching for it to change from either one-to-zero or zero-to-one. So the relevant CSS would look something like the following which is based on SugarCube's CSS.

#passage {
	transition: opacity 400ms ease-in;
}

Now you need some way to force the opacity to change when Snowman traverses from one passage to another and you do this by first defining a passage-in CSS class which changes the opacity to zero:

#passage.passage-in {
	opacity: 0;
	transition: opacity 0ms;
}

... and then use the Snowman hidepassage and showpassage:after events to add and remove the passage-in CSS class from the #passage div element. The following code goes in your Story Javascript area.

$(document).on('hidepassage', function() {
	$('#passage').addClass('passage-in');
});
$(document).on('showpassage:after', function() {
	$('#passage').removeClass('passage-in');
});

warning: you may need to add a time delay in the showpassage:after event's code using the setTimeout() Method depending on how complex your passage content becomes and how long it takes to render the HTML for the passage.
Sugacube 2 used a 40ms delay and the replacement code would look something like the following.

$(document).on('showpassage:after', function() {
	setTimeout(function(){
		$('#passage').removeClass('passage-in');
	}, 40);
});

dlgard

Thank you for the thorough answer! This is more complicated than I thought, I will try this today.