Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

[Harlowe] Passage Transition?

Using Twine 2.0.10, Harlowe, on a mac.

So, I have no idea if this is even a thing that I can do, but essentially the issue I'm having is that some of my passages look very similar, and I'm worried people will click links and not realize they've moved to a new passage. At the moment, there doesn't appear to be any transition between passages (text just immediately appears).

My question is, is it possible to fade out the entire tw-passage element on link click and fade in the next? I have no clue if that's even possible, but I've seen a thread on here about preventing transitions between passages, so I figure one could make those transitions happen somehow.

For reference, here's my CSS for tw-passage:
tw-passage{
	background-image: url("passage.jpg")
	overflow: hidden;
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	text-align: center;
	width: 90%;
	margin: 0 auto;
	padding: 40px;
	border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	-webkit-border-radius: 30px 30px 30px 30px;
	border: 10px double #333333;
	line-height: 140%;
}

The full project (so far) is attached, if it's necessary.

Comments

  • edited November 2015
    As explained in the Dissolve as standard transition on stylesheet (Harlowe) thread Harlowe appears to use a hard-wired dissolve transition(src) when navigating between passages.

    The thread explains one method to get around the issue by using a local copy of the relevant CSS selectors in your Story Stylesheet area and changing their attributes, but it would result in you losing the ability to use the dissolve effect in your story.

    A more experienced CSS coder may have a different solution.
  • I've already added those selectors to my stylesheet and edited them a few different ways, each to no effect. It seems that not even the default effect is happening to the passages, though--even without the added css, the passages just pop up immediately, there's no .8s fade between the two pages.

    Given that apparently there ought to be a transition and there isn't, I'm guessing something is going wrong. It might be a similar issue to what this thread was trying to deal with, but I'm using Firefox (and neither it nor the twine preview dealio are showing a transition.)

    Upon further testing, I've tried to add
    -webkit-transition: all 2s linear;
    	transition: all 2s linear;
    
    to tw-passage, as well as the fix from the "Dissolve as standard..." thread you mentioned, and neither seem to solve the issue--there's no discernible effect at all.

    Any ideas?
  • edited November 2015
    Leon did state that there is an undetected syntax error in Harlowe CSS files, so maybe that is effecting this as well.

    I tried the following in Twine 2.0.8 using Harlowe 1.1.1 and it works but the same CSS in Twine 2.0.10 using Harlowe 1.2.1 does not.
    .transition-in[data-t8n^=dissolve]{
    	-webkit-animation:appear 5s;
    	animation:appear 5s;
    }
    
    [data-t8n^=dissolve].transition-out{
    	-webkit-animation:appear 5s reverse;
    	animation:appear 5s reverse;
    }
    
  • Ah, okay. In the meantime, I'll try to do something textual to make a visual difference, but it looks like this might magically resolve itself with the next twine patch.

    Thanks!
Sign In or Register to comment.