Upward slip after transition

Twine Version: 2.3.16
Story Format: Harlowe 3.2.3

I am using this syntax to reveal one line of text when clicking on the link of the last word. But I notice that the new line is displayed further down, and at the end of the transition, the line is moved up … I cannot understand why or find a solution to this problem.
In practice, I would like the next line to be displayed one line below the previous one, no further (and without any movement).

This is the first (t8n:"dissolve")+(t8n-time:1s)+(link-reveal:"phrase.")[=
And here is the (t8n:"dissolve")+(t8n-time:1s)+(link-reveal:"second.")[=
Third one.

Thanks for any help.

1 Like

The issue is caused by how the “dissolved” effect is implemented, specifically the CSS being used.

If you temporary alter the delay of (t8n-time:) macro associated with the 1st link from 1s to 10s (or more) then you can use your web-browser’s Web Developer Tools to inspect the HTML elements being used to achieve the “dissolved” effect.

1: The elements before the 1st link is selected…

This is the first 
<tw-expression type="macro" name="t8n" return="changer"></tw-expression>
<tw-expression type="macro" name="t8n-time"></tw-expression>
<tw-expression type="macro" name="link-reveal"></tw-expression>
<tw-hook>
	<tw-link tabindex="0" data-raw="">phrase.</tw-link>
</tw-hook>

2: The above <tw-hook> while the “dissolved” is in effect, after the 1st link has been selected.

<tw-hook>
	phrase.
	<tw-transition-container data-t8n="dissolve" class="transition-in" style="animation-duration: 20000ms; animation-delay: 0ms;display:block !important;width:100%">
		<br>
		And here is the 
		<tw-expression type="macro" name="t8n" return="changer"></tw-expression>
		<tw-expression type="macro" name="t8n-time"></tw-expression>
		<tw-expression type="macro" name="link-reveal"></tw-expression>
		<tw-hook>
			<tw-link tabindex="0" data-raw="">second.</tw-link>
		</tw-hook>
	</tw-transition-container>
</tw-hook>

3: The above <tw-hook> after the “dissolved” effect has ended.

<tw-hook>
	phrase.
	<br>
	And here is the 
	<tw-expression type="macro" name="t8n" return="changer"></tw-expression>
	<tw-expression type="macro" name="t8n-time"></tw-expression>
	<tw-expression type="macro" name="link-reveal"></tw-expression>
	<tw-hook>
		<tw-link tabindex="0" data-raw="">second.</tw-link>
	</tw-hook>
</tw-hook>

As you can see Harlowe briefly wraps the content being revealed within a <tw-transition-container> element, which has some inline CSS applied to it.

And if you use the CSS/Styles panel of your web-browser to individually disable each of the properties being applied to that element you will discover that the display:block !important setting is causing the “gap”.

And the facts that it is being applied using in inline CSS, and that it’s using the !important keyword/rule, makes it particular difficult (if not impossible) to work around.

Short from implementing your own custom “dissolved” effect using CSS, I personally don’t know a way to fix the issue with the macro. Maybe someone with greater CSS knowledge will.

2 Likes