Multiple stance of typewriter effect on same page

Ask the community
,
1

I recently found this closed thread which I am really thankful because it works great for the typewriter effect.
(https://www.wix.com/velo/forum/coding-with-velo/typewriter-effect)
I wanted to reference it here to make is easier to understand what I am trying to accomplish even though it is a closed thread.
Basically I want to try and have 3 stances of the typewriter effect happening on the same page.
Can someone help? I apologize for my lack of code knowledge

this is what I tried so far

let i = 1 ,
letterInterval = 200 ,
pauseBetweenWords = 3000 ; //ms
const sentence = Word1, Word2, Word3, ;
const sentence2 = Word4, Word5, Word6, ;
const sentence3 = Word7, Word8, Word9, ;
const words = sentence . split ( ’ ’ );
const words2 = sentence2 . split ( ’ ’ );
const words3 = sentence3 . split ( ’ ’ );
let index = 0 ;
const runTyping = ( ms ) => setTimeout (() => showText (), ms );

function showText () {
const text = words [ index ];
$w ( ‘#text1’ ). text = text . slice ( 0 , i );
i = ( i + 1 ) % ( text . length + 1 );
if ( i > 0 ) {
runTyping ( letterInterval );
} else {
index ++;
index %= ( words . length );
runTyping ( pauseBetweenWords );
}
}

function showText2 () {
const text2 = words2 [ index ];
$w ( '#text2

’ ). text2 = text2 . slice ( 0 , i );
i = ( i + 1 ) % ( text2 . length + 1 );
if ( i > 0 ) {
runTyping ( letterInterval );
} else {
index ++;
index %= ( words . length );
runTyping ( pauseBetweenWords );
}
}

$w . onReady (() => runTyping ( letterInterval ));
$w . onReady (() => runTyping ( letterInterval ));

2

Do you want to have them show up letter by letter or word by word?
Do you want to have an infinite loop over and over again or one time only?

3

Word by word and infinite loop!
world pool1 = “A, B, C”
world pool2 = “D, E, F”
world pool3 = “G, H, J”

display
line1: any word from world pool1
line2 : any word from world pool2
line3 : any word from world pool3

they all can start typing at same time all lines at once
or top line to bottom line after each

with a longer pause so user can ready 3 words phrase.

I got it working with all code with the help of a friend but it’s not super clear and not completely random order. I shuffled the phrases manually.
ideally the pool would look something like this:

Here is the code:

4

You can do something like:

const pauseBetweenWords = 3000; //ms
const sentences = [
    'Word1, Word2, Word3',
    'Word4, Word5, Word6',
    'Word7, Word8, Word9'
];
const words = sentences.map(e => e.split(' '));
let currentIndices = sentences.map(e => 0);
$w.onReady(() => {
   const elements = [$w('#text1'), $w('#text2'), $w('#text3')];
            setInterval(showText, pauseBetweenWords);
            function showText() {
                elements.forEach((e, i) => {
                  let text;
                  currentIndices[i] === 0 ? text = '' : text = e.text;
                    e.text = text + words[i][currentIndices[i]];
                    currentIndices[i] = (currentIndices[i] + 1) % words[i].length;
                });
            }
})
5

J.D. This is what it shows when I test it. it seems like it never shuffles.
the example on the left is my old html code.

6

Ah, sorry, I didn’t read your request carefully.
Do you want it to shuffle how exactly?
Please elaborate what should be the output.
Shuffling the words inside each sentence?
like:
sentence 1 : w1, w2, w3 OR w2, w1, w3 etc?

7

The text block will show something like this:
1 word per line
line1, =(anyword from W1, W2, W3)
line2, =(anyword from W4, W5, W6)
line3 =(anyword from W7, W8, W9)
just one word per line selected randomly
In a loop

8

So something like this:

const pauseBetweenWords = 1000; //ms
const sentences = [
    'Word1, Word2, Word3',
    'Word4, Word5, Word6',
    'Word7, Word8, Word9'
];
const words = sentences.map(e => e.split(' '));
let restWords = [...words];
$w.onReady(() => {
   const elements = [$w('#text1'), $w('#text2'), $w('#text3')];
            setInterval(showText, pauseBetweenWords);
            function showText() {
                elements.forEach((e, i) => {
                    const wordInx = Math.floor(Math.random() * restWords[i].length);
                    let randomWord = restWords[i][wordInx];
                    e.text = randomWord;
                    restWords[i] = words[i].filter(w => w !== randomWord);
                });
            }
})
9

it is just not typewriting any longer but this is it!

10

Everything can be done, but you have to describe it precisely.
Do you want each word to appear letter by letter? the whole word together (which is what you currently have)? word-pause-word? something else?

11

Yes each word letter by letter. nothing else

12

I’m trying to do a text animation where a new word populates and makes the last word disappear, in the same place… anyone can help?