Dissolve transition repeats for revealed text, when clicking hook in revealed text [Harlowe 2.0.1]

Question

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>]]]
[]<jarDescription|]
(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!

Answer 1

I'm pressed for time at the moment but one thing I noted was your glass Mason jar link.

There are two main issues with this:

1. The link text has a font weight of bold before it is selected and a font weight of normal afterwards, as bold characters are slightly wider than normal ones this causes the horizontal space needed to display those character to change slightly and thus the refreshing of said text.

2. The HTML used to display the link text changes structure between the two states, which in turn can cause a refresh of said text.

Structure before link is selected:
<tw-enchantment tabindex="0" class="link enchantment-link">
	<tw-hook name="jarhook">glass Mason jar</tw-hook>
</tw-enchantment>

Structure after link is selected:
<tw-hook name="jarhook">glass Mason jar</tw-hook>

 

Comments

Yeah, part 2 you mentioned was more or less what I figured. It seems there must be a way around it — for example, all the revealed text in Temple of No fades in neatly...

Part 1 isn't a factor here, though due to something I left out in my post. I have CSS in place that prevents all the links in the story from having the bold font-weight applied in the first place, mostly to avoid text bumping around & changes in line-wrapping.

---

According to the source code of that project it was created using Twine 1.x and the Sugarcane story format, which uses a different technique than Harlowe to render it's passages.

The project appears to use a custom <<replace>> macro to fade-in each section the text as needed, this may be the <<replace>> macro from the Glorious Trainwrecks website.

Without testing I believe to do something similar in Harlowe you would need to replace the standard markup links with ones that used custom Javascript to handle both the click events and the inserting of the new content within the page's DOM.