Howdy, Stranger!

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

Harlowe 2.0.0 Fade In Transition Help!

It's been a while, Twinerites!

I'm having a really odd and probably simple problem with the effect of text fading in on each passage. I read up on a past thread in the discussions that gave a CSS code to disable the fade in transition, but it appears to work when it wants.

Here's an example of some code I have:
<div class="animated fadeIn">{(set: $stories_completed to 5)}



Seemingly at random, the code fades in only once how I want it and some other times it fades in twice (which is ugly and what I don't want). I've done this in a number of different ways, including and excluding the transition suppression CSS. Any help with this is appreciated.


  • Optimistically cautious bump.
  • Can you link the discussion? Also, what do you have in your css?
  • I'm not sure what you mean by discussion, but here's the snippit of code that's giving me problems:
    @import url('');
    tw-passage {
       font-family: 'Raleway', sans-serif;

    I'm also using animate.css for animations that play later in the game. I decided to have the fadeIn animation start on every passage to replicate Harlowe's transition counterpart (and have the code to suppress it) but the CSS now only plays one or the other. I can have either a custom font that fades in twice, or a bland font that fades in once.
  • Neoroman wrote: »
    I read up on a past thread in the discussions that gave a CSS code...
    Neoroman wrote: »
    I'm not sure what you mean by discussion...
    You stated you found some CSS to disable Harlowe's fade-in transition in a thread, we need to know which thread that was so we can determine:

    a. How the CSS was implemented. (eg. how it works.)
    b. Which version of Harlowe it was written for. (eg 1.x or 2.x)
    c. If written for 1.x does it need to be changed to work for 2.x
  • Gotcha. Here's the discussion I got the code from, the second to last post on there.

    As for the rest:

    1. The CSS currently has the text fading in twice and with the Google font applied.
    2. This is for Harlowe 2.1.0
    3. N/A
  • Neoroman wrote: »
    As for the rest:
    Those three points were not questions for you to answer, they were things that a person supplying a solution may need to think about.
    The CSS in that thread was written for Harlowe v1.2.2 and is based on:
    a. how the showPassage() function works in that version's Javascript engine.
    b. the core CSS supplied by that version.

    The showPassage() function in the Harlowe v2.0.0 engine has been extended to support the ability for callers of that function to supply overrides for both the transitionOut (defaults to 'instant') and the transitionIn (defaults to 'dissolve") effects to use.

    The CSS selector used by Harlowe v2.0.0 for the transition-in-dissolve is
    ...which I believe is functionally the same as the one used by v1.2.2+
    ... but web-browsers can behave in strange and funny ways so you may want to change the CSS selector you're using for v2.0.0

    I ran a number of tests based on the information you supplied and was able to reproduce your issue, even when the external font was loaded but not assigned. Chrome's Animations debugging panel showed no additional event when the second fade-in occurred so I was not able to determine what is happening, it is almost like the content is being rendered twice but that should result in additional events.

    side-note: Currently Harlowe 1.x assign it's default font to the html element, where as Harlowe 2.x assigns it to the tw-story element. I suggest for consistence you should also assign your 'Raleway' font to the same element that the story format does.
  • So if I understood this correctly, my code now looks like this:
    @import url('');
    [data-t8n^=dissolve].transition-in {
    	-webkit-animation:appear 0ms step-start;
    	animation:appear 0ms step-start
    tw-story {
     	color: white;
            font-family: 'Raleway', sans-serif;

    I think there's some major clashes with Harlowe and Google fonts in general. I tried this with a blank project, just working with the fade and font and it's giving me the exact same issue.
  • edited February 2017
    I believe that this is related to my explanation from ABELV's thread.

    As far as I can tell—based purely on observation and a very brief look at its source—Harlowe makes use of various <tw-transition-container> elements, which it wraps around content that it wants to animate. To prevent the animation container elements from staying around post-animation, even in the event that the user disables/removes the animations, Harlowe uses a hard coded timeout-based dewrapping function to remove them.

    As far as I am aware, this causes issues for two reasons:
    1. If a user uses a longer duration for the animation—either the stock one or an alternate they've chosen to use—or adds a delay, then the dewrapper will remove the animation container too soon, causing them to restart.
    2. Even if the user has disabled/removed the stock animation for whatever reason—e.g. to use their own animations—if their content falls within a section Harlowe has wrapped, then when the dewrapper removes the container and the nodes are rehomed, any animation timers will be reset. Depending on how the animations are triggered, this will have the effect of either prematurely terminating them or causing them to restart.
    Basically, the way that Harlowe provides some (most?, all?) of its built-in animations seem unfriendly to both other CSS-based animations and/or any modifications of its own animations which extend their durations past the dewrapper values for any reason.
  • So is this an issue awaiting an update to fix it? If so, I can try and continue working on my game in the meantime.
  • Neoroman wrote: »
    So is this an issue awaiting an update to fix it?
    I am not sure if this limitation has been reported to the story format's developer or not, although issue #81 seems related even if the description is unclear.

    I suggest you create a new issue explaining your problem and include a link to this forum thread, I would also include TheMadExile's breakdown of what is potentially causing the unwanted effect.

    Only Harlowe's developer knows whether this issue is just a design limitation of the engine's implementation or if it is a bug that they will fix.
Sign In or Register to comment.