0 votes
by (120 points)

I'm a super new user of twine, literally just picked it up yesterday (I have to create an interactive story for my university class). I want both of my text and links to fade in as the player progresses through each passage in order to make the text a bit more dynamic. I managed to get the text to fade in just fine using...

(live: 5s)[(t8n:"dissolve")[This story has choices. They are neither good nor bad, but simply decisions that you must make.](stop:)]

However it keeps giving me an error message when I try doing the same method for my links. Any help with the matter would be greatly appreciated.

1 Answer

0 votes
by (1.1k points)

Try using css instead

   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;

   a:hover {
      opacity: 0.1;

this specifically fades on hover, but if you work with keyframes like http://devinvinson.com/delayed-fade-in-effects-with-css/ you can get it to fade in whatever you want 

by (63.1k points)
Harlowe doesn't use standard anchor elements for links. You need to use its custom <tw-link> elements.

@Shadowlell what does the error message say?
by (159k points)

Don't forget that Harlowe uses different HTML structures for it's two main types of links:

'' TW-LINK element based links.''
[[Markup based link|Next]]
(link-goto: "Macro based link", "Next")[]

'' TW-HOOK element based links.''
|link>[Hook based link]
(click: ?link)[]

... the tw-hook based link has a HTML structure that looks something like the following:

<tw-expression type="macro" name="link-goto">
	<tw-enchantment tabindex="0" class="link enchantment-link">
		<tw-link tabindex="0" passage-name="Next" data-raw="">Markup based link</tw-link>

... where as the the tw-hook based link looks something like the following:

<tw-enchantment tabindex="0" class="link enchantment-link">
	<tw-hook name="link">Hook based link</tw-hook>

... so any CSS used to add an effect to a link should really target both generic types of links like so.

tw-link, .enchantment-link {
	/* Effect code...*/


by (63.1k points)
I always forget about poor (click:).