Want to have my links fade in.

0 votes
asked Feb 14 by Shadowlell (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
answered Feb 15 by mazhem (1,150 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 

commented Feb 15 by Chapel (46,050 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?
commented Feb 15 by greyelf (83,590 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...*/


commented Feb 16 by Chapel (46,050 points)
I always forget about poor (click:).
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.