This is the current code and it works, but as you can see I have to manually add code for each element in the array. I want to have more elements in the array. Is it possible to code to loop through each element in TypeIt.js
If it could randomly picked (or shuffled) instead of linear, that would be better too.
var id="lines";
var element=document.getElementById(id);
var content=[
"Example sentence one",
"Another example string two",
"String three",
"Another Example String, long sentence, sentence four"
];
var p = 100;
new TypeIt("#lines",{loop:true})
.type(content[0])
.pause(p)
.delete(0-element.innerText.length)
.type(content[1])
.pause(p)
.delete(0-element.innerText.length)
.type(content[2])
.pause(p)
.delete(0-element.innerText.length)
.type(content[3])
.pause(p)
.delete(0-element.innerText.length)
.go();
<script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>
<div id="lines"></div>
Instead of chaining directly after initializing the TypeIt instance you could save it to a variable. Then use a loop to add all the strings to the instance. After you've added the strings you can call the go
method to kickstart it all.
var id = "lines";
var element = document.getElementById(id);
var content = [
"Example sentence one",
"Another example string two",
"String three",
"Another Example String, long sentence, sentence four"
];
var p = 100;
const instance = new TypeIt("#lines", {loop: true});
for(const str of content) {
instance.type(str).pause(p).delete(0 - str.length);
}
instance.go();
<script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>
<div id="lines"></div>