Howdy, Stranger!

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

Fading between passages

Okay, I'm using Harlowe 1.2.4. I'm trying to figure out how to get the passages to fade in and out as a transition, instead of just snapping into place. I mean all the text and everything, fading in smoothly from one page to the next. I've read every thread I can find on this topic and tried a ton of different things, but nothing has worked. When I only have text on the page and nothing else, it does work fine, but when I have the text in a div, it doesn't work. It's my first game on Twine and my first experience with CSS, so I hope I've explained the problem correctly/clearly, if someone has solved this, please help? Also I'm really dumb so if someone does know how to do this, please explain it in the simplest way possible?

I have this in the Javascript:

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

and this in the stylesheet:

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

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

Comments

  • Please use the code tag when posting examples - it's the C on the editor bar.

    The hidepassage and showpassage:after events your examples are based on only exits in the Snowman story format, which is why they are not working in you Harlowe based story.

    I personally don't know a way to achieve the effect you want, and you are not the first person to notice the visual issue that occurs during passage transition. Due to how Harlowe handles it's HTML transitions between passages, I am not sure if it is solvable but someone with more experience may know of a solution.
Sign In or Register to comment.