It is unclear from your question whether you are using the Typed.js library directly or SugarCube's Typed.js integration module add-on, so I will assume that you are using the SugarCube add-on. It should be noted that using the add-on doesn't stop you from access the Typed.js library's functionallity directly within your project.
eg. The following example demostrates how you can still use the Typed.js library directly within a Passage, it makes use of SugarCube's :passagedisplay event to allow the targeting of the typed ID'ed element by the Typed() function.
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
<span id="typed"></span>
<<script>>
$(document).one(':passagedisplay', function (ev) {
var typed = new Typed("#typed", {
strings: ["The quick brown fox jumped over the lazy dog."],
typeSpeed: 40
});
});
<</script>>
To achieve the "screen > click > Typed.js" use-case you will need to attach a click event listener to the page, which can be an issue because it is likely that it was a click event that cause the current Passage to be shown and that that click event is still active during the :passagedisplay event.
One way to get around this potential issue is to attach our click event listener to an element that is being (re)created during the Passage Transition process and one such element is the ,passage CSS classed one that the engine wraps the contents of the current passage in. One downside of using this element this is that by default it's height dimention is the minimum required to display the visible content of the passage, which can make the area the end-user needs to click in quite small.
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
<span id="typed"></span>
<<script>>
$(document).one(':passagedisplay', function (ev) {
$(".passage").one('click', function() {
var typed = new Typed('#typed', {
strings: ["The quick brown fox jumped over the lazy dog."],
typeSpeed: 40
});
});
});
<</script>>
Using the strings option to add the new Typed content to the existing page can be messy if that new content is large, one way to get arround this is to use the stringsElement option instead however this option does have some quirks you need to watch out for.
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
<span id="typed"></span>
<div id="typed-strings" style="display: none;">
<p>The quick brown fox jumped over the lazy dog.</p>\
</div>
<<script>>
$(document).one(':passagedisplay', function (ev) {
$(".passage").one('click', function() {
var typed = new Typed('#typed', {
stringsElement: '#typed-strings',
typeSpeed: 40
});
});
});
<</script>>
some of the quirks:
a. The text to be Typed seems to need to be wrapped in text related elements like span, p, b, etc...
b. Any br elements found at the end of a line seems to cause that line to be cleared once it has finish being Typed. Because SugarCube automatically replaces all line-feeds found in the Passage content with br elements, you may need to use a feature like Line Continuation to suppress them like the above example does.
To achieve the "Typed.js > click > Typed.js" use-case you need to change the previous examples to listen for the :typedcomplete event instead of the :passagedisplay one.
<div class="typed-speed40">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<span id="typed-2"></span>
<div id="typed-2-strings" style="display: none;">
<p>The quick brown fox jumped over the lazy dog.</p>\
</div>
<<script>>
$(document).one(':typedcomplete', function (ev) {
$(".passage").one('click', function() {
var typed = new Typed('#typed-2', {
stringsElement: '#typed-2-strings',
typeSpeed: 40
});
});
});
<</script>>