How to create Passage Transitions in Snowman?

Question

Does anyone have experience or advice in creating transitions between passages in Snowman in Twine 2.x?  This was my starting point - https://www.glorioustrainwrecks.com/node/5013 - but the 'transition' tags do not seem to be present or functional in Snowman?

Any help would be great!!

Answer 1

When passage transition occurs in Snowman, two events happen; the current passage is hidden ('hidepassage' event) and the new passage is shown ('showpassage' event).  You can set up some jQuery to run on the event.  Here's an example (put in StoryJavascript):

$(document).on('hidepassage', function(){
	$('#passage').fadeOut('fast');
});

$(document).on('showpassage', function(){
	$('#passage').hide().fadeIn('fast');
});

There might be a pure CSS way to do it, but I can't think of an easy one right now.

A couple other things, in case you didn't know:

1. There's nothing about 'transition' tags in that link that I can see, it's just talking about how to use tags to control CSS.
2. That link is for Twine 1.4, and is outdated even for recent versions of Twine 1.4.  Also, Story Formats all work differently, and Twine 1.4 didn't have the Snowman format at all.
3. Snowman is designed for people who know JavaScript very, very well, and it includes very little functionality outside of basic structuring and such.  It may or may not be for you, I'm just letting you know.  It's a cool format, very minimalist, but almost none of the Twine code snippets you find on the Internet will work with it.

Comments

This explanation is pretty good, but one thing that isn't quite right about it is that after the hidepassage event fires, the new passage immediately appears, so there isn't time to transition out the existing text. This is something I'm hoping to fix in a future release.

In the meantime, here's a workaround.

$('#passage').on('click', 'a[data-passage]', function(e) {
	var destination = $(e.target).data('passage');
		
	$('#passage').fadeOut('fast', function() {
		story.show(destination);
		$('#passage').fadeIn('fast');
	});
	
	e.stopPropagation();
});

 

---

Thanks, I didn't even notice that when I was testing the code.