0 votes
by (220 points)

Hi, so I've been playing around with the Typed.js integration module for SugarCube (currently using 2.21.0), and I wondered if I could get it to delay the typewriter effect whenever it reaches puncuation.

I managed to achieve this effect although it's kind of hacky.

<div class="typed-speed20-delay0">So,</div><div class="typed-speed20-delay130"> you’re reading some text that uses the Typed.js integration module.</div><div class="typed-speed20-delay410">
It’s really nifty,</div><div class="typed-speed20-delay130"> but what if it paused for a set amount of time during
different puncuation cues?</div><div class="typed-speed20-delay410"> Why,</div><div class="typed-speed20-delay130"> that’d be even more nifty!</div>

So although the delays work, my problem lies within how the outputted text becomes reformatted. It ends up looking like is this: https://www.dropbox.com/s/vp2qpgw2xyfscqz/ss%2B%282018-10-05%2Bat%2B07.41.41%29.png?dl=0

When I intend it to look like this: https://www.dropbox.com/s/h9nhe3o0erwaq53/ss%2B%282018-10-05%2Bat%2B07.33.25%29.png?dl=0

It seems it's the extra code that interferes with how the text is formatted. I've tried things like the <<nobr>> macro and \ for line continuation, but to no avail. Is this an internal Twine thing? Some wrapping option in the passage editor itself?

I was also wondering if it's possible to create 'tokens' that could be passed into the custom styles markup (@@.typed;) to achieve these delays. Something to the effect of: || gives a 130ms delay, ~~ gives a 410ms delay, etc. It would looks something like this:

Hello,|| this is a test sentence.~~ Please enjoy.

If anyone can help me out with this problem it would be much appreciated. Thank you!

1 Answer

0 votes
by (68.6k points)
selected by
Best answer

Use Typed.js' delay escapes (i.e. ^# -- where # is the number of milliseconds to pause).  For example:

Dramatic pauses… ^2000 are the key to success.


by (220 points)

Right under my nose this whole time^500.^500.^500. Boy I feel dumb. I got a little ahead of myself and skipped right over it in the documentation. Thanks SO MUCH TheMadExile! I am really grateful!

by (63.1k points)
Also, <div>s are block level, hence the line breaks. Try <span>s.