I have a couple of goals with the project I'm working on, one of which is that I'd like text that's revealed, appended etc, within a passage to fade in, similar to how the beginning part of a passage in Harlowe does by default.
The code below shows how I'm trying to do it currently, but I've hit a snag or two that make me think it's the wrong approach.
1.) When I click the "glass Mason jar" link/hook, a whole chunk of text (the part that dissolves in after clicking the link-reveal) fades in again. I presume this is because the link attached to the Mason jar hook gets removed, and the text is loaded again.
2.) The text that the Mason jar link appends to jarDescription ("The jar sat empty. It always did.") loads in a line too high at first, then gets shoved down the page.
Taken together, the result is really clunky & ruins the whole effect.
Is there a better way to have revealed text fade in with Harlowe? (All or nearly all revealed text would have this effect, ideally) If not, how do I avoid the fade-in repeating itself when revealed links are clicked, and how do I avoid text loading in then getting pushed down after other stuff above it loads? Or would dropping Harlowe for another story format be the solution?
Slightly related: the method I'm using to align the revealed text seems awkward too. Where I'm using the enchant macros now, I was using some HTML <center> tags before, but that seemed to break the transition in a big way. (The centered text would load immediately; the rest above the centered text would just pop in, not dissolve, after the elapsed time.)
Full code for the passage I've been working on to try to figure this out — apologies, as it's not cleanly formatted & indented yet, since I'm still getting the hang of managing whitespace:
I picked my way down the tarp-covered alleys of the slums, giving the black market a wide berth. I kept my head down and my hood up until I stood outside a weathered, flat-roofed wooden (link-reveal:"building.")[$fadeIn[|leftAligned>[<br>The Gutter.<br><br>Outside, on a stool by the saloon-style doors, there sat a [glass Mason jar]<jarHook| with a small handpainted sign on the wall above it:<br><br>|centered>[<i><b>Leave Your Mind Here</b></i><br><b>↓</b>]]]
(click: ?jarHook)[(append: ?jarDescription)[(The jar sat empty. It always did.)<br><br>> I went [[inside]].<br>> I went back to... (etc.)]]
(enchant: ?leftAligned, (align: "<=="))
(enchant: ?centered, (align: "==><=="))
And this is the $fadeIn variable, which lives in a header passage:
(set: $fadeIn to (transition: "dissolve")+(transition-time: 3s))
Let me know if there's anything I've left out that might be useful!