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)}
=><=
<h1>[[Begin|Start]]</h1></div>
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.
Comments
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.
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
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
eg.
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.
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.
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:
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.