Hello hello,
So, I was reading a post earlier about how to implement the typewriter effect into my site, however, I believe it is different from what I am actually trying to accomplish. I was wondering, how would I utilize the effect, for JUST my name on the home page of my portfolio site? I want it to type out something, then backspace, then type out my name. I have ZERO coding knowledge. Just trying to avoid having my brain explode, as that is no fun.
Here’s a simple example of a Typewriter in Wix Code that will give you a good start.
I tried it out. The only problem is that I keep getting “unlined” at the end of my text. Also, I have no idea how to change the font size and it keeps adding duplicates anytime the home button is click, instead of restarting message.
Also, it’s so cool so thanks
@universaliceman Sorry about the duplicates. I thought I was just putting together a “quick and dirty” example, but I should’ve known better. Hopefully I fixed it.
What do you mean by “unlined” at the end of the text. It works OK for me. What happens?
@yisrael-wix My apologies. That should have said “undefined.” It appears at the end of my text when I preview site.
@universaliceman Does the example also give you “undefined”? Or just your site? Please post the editor URL of your site so that I can take a look.
there is a undefined at the end which is showing up along with the text. Also, can you set it in such a way that this animation gets repeated again and again after 5 seconds intervals?
$w.onReady(function () {
let typing;
const text = "My text is here. Yes it's here."
let i = 0;
runTyping();
const showText = () => {
i++;
if(i > text.length){
i = 0;
clearInterval(typing);
return setTimeout(runTyping, 5000);
}
$w("#text3").text = text.slice(0, i);
}
function runTyping(){
typing = setInterval(() => showText(), 200);
}
});
$w.onReady(function () {
let typing;
const text = "My text is here. Yes it's here."
let i = 0;
runTyping();
const showText = () => {
i++;
if(i > text.length){
i = 0;
clearInterval(typing);
return setTimeout(runTyping, 5000);
}
$w("#text1").text = text.slice(0, i);
}
function runTyping(){
typing = setInterval(() => showText(), 200);
}
});
Or a shorter version:
let i = 0, interval = 100, pause = 5000;
const text = "My text is here. Yes, it's here.";
const runTyping = (ms) => setTimeout(() => showText(), ms);
function showText(){
$w("#text1").text = text.slice(0, i);
i = (i + 1) % (text.length + 1);
i > 0 ? runTyping(interval) : runTyping(pause);
}
$w.onReady(() => runTyping(interval));
how can i modify the above code to allow for this typewriter effect on 3-4 words, one after another, on an infinite loop (like a slideshow effect)
not sure what you’re asking.
Do you want each word to be written as a whole and not letter by letter?
If that what you mean then:
let i = 0, interval = 100, delay = 5000;//change the delay if you want
const text = "My text is here. Yes, it's here.";
const words = text.split(' ');
const runTyping = (ms) => setTimeout(() => showText(), ms);
function showText(){
$w("#text1").text = words.slice(0, i).join(' ');
i = (i + 1) % (words.length + 1);
i > 0 ? runTyping(interval) : runTyping(delay);
}
$w.onReady(() => runTyping(interval));
i would want every word letter by letter, just for several words. so the word “hello” gets typed out, gets cleared and then the word “world” gets typed out, then disappears to be followed by “foo”, etc . I know it will require an array of words that a loop is going through.
Try:
let i = 1,
letterInterval = 100,
pauseBetweenWords = 300; //ms
const sentence = `Hello lovely world. I think it's gonna be a really beautiful day!`;
const words = sentence.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);
}
}
$w.onReady(() => runTyping(letterInterval));
this works! thank you!
You’re welcome 
this works perfectly for me, thank you so much! have been working on this for an hour before I found this thread! great solution