0 votes
asked 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:

@@.typed;
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
answered by (55.4k points)
selected by
 
Best answer

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

@@.typed;
Dramatic pauses… ^2000 are the key to success.
@@

 

commented 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!

commented by (55.6k points)
Also, <div>s are block level, hence the line breaks. Try <span>s.
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.
...