Typing animation that works with passage links?
I recently found TME's wonderful typed.js integration module for SugarCube 2.
Typed.js (check it out here) works great for giving a "typed" effect to passages, but has the unfortunate caveat of breaking Twine's internal passage links:
Hard-coded html ahref links still work, but internal passage links (dependent on javascript) break.
I've chatted briefly with TME by private message about whether there would be a way to make typed.js work with internal passage links, and he had this to say:
Being a javascript noob, this would likely take me a while to attempt.
There are handy css-only typing animation tricks that don't break passage links (for example, this one), but as far as I can tell, there's no way to get css typing animations to work smoothly and consistently with varying paragraph-length amounts of text... it seems that paragraphs always have to be split up manually line by line (at least for every demo I've seen).
So anyway, I thought I would go ahead and throw this out into the forum in case anyone else has tried to tackle this problem: has anyone discovered a typing animation technique that works with Twine's internal passage links, and also with varying-length paragraphs of text?
(I am currently using using Twine 1.4 and SugarCube 2, though am flexible there)
Typed.js (check it out here) works great for giving a "typed" effect to passages, but has the unfortunate caveat of breaking Twine's internal passage links:
You should only use non-interactive markup within typed sections. Due to the way Typed.js operates, any links or interactive macros placed inside typed sections will be rendered non-functional.
Hard-coded html ahref links still work, but internal passage links (dependent on javascript) break.
I've chatted briefly with TME by private message about whether there would be a way to make typed.js work with internal passage links, and he had this to say:
It would likely require hacking Typed.js to detect when it's just finished typing a tag (including the closing tag, if any), which creates an element in the DOM, and then looking up the original and replacing the new element with a copy of the original. That's probably harder to do than it sounds.
Being a javascript noob, this would likely take me a while to attempt.
There are handy css-only typing animation tricks that don't break passage links (for example, this one), but as far as I can tell, there's no way to get css typing animations to work smoothly and consistently with varying paragraph-length amounts of text... it seems that paragraphs always have to be split up manually line by line (at least for every demo I've seen).
So anyway, I thought I would go ahead and throw this out into the forum in case anyone else has tried to tackle this problem: has anyone discovered a typing animation technique that works with Twine's internal passage links, and also with varying-length paragraphs of text?
(I am currently using using Twine 1.4 and SugarCube 2, though am flexible there)
Comments
Duplicate the typed text (including links) within the same passage, using absolute css positioning with a container div so that the duplicate text overlays on top of the (to be) typed text. Set opacity to 0 for the duplicate text. Now you have invisible, clickable links sitting directly on top of where the unclickable typed links show up. Not pretty, but it works.