Typing animation for total beginner.. help!

Ask the community
,
1

I’ve spent all day looking amongst Velo at various ways to add typewriting animation to a text box in editor. Unfortunately I’ve not been able to make any of them work.

I’m using a pre-made template and I have a text box on the home page with the ID #intro. None of the current Wix animations is a ‘typing’ style and I literally need it explaining to me like I’m a 5 year old to use the code feature in editor. If anyone is able to help or has the code ready to go that I can just paste into the editor or a simple tutorial that would be great.

2

There’re many posts about it in the forum. You can search for it.
Basically you need something like:

const intervalInMilliseconds = 300;// interval between letters
const text = 'Some text some text';//the full text
let typingInterval;
$w.onReady(() => {
$w('#text1').text = '';
typingInterval = setInterval(typeItUp, intervalInMilliseconds);
})

function typeItUp(){
if($w('#text1').length >= text.length){
return clearInterval(typingInterval);//to stop when the entire text is displayed
}
$w('#text1').text = text.substring(0, $w('#text1').text.length + 1);//here you add one character every time.
})
3

How would I insert each character individually? I’ve tried adding them but it doesn’t work :frowning:

4

@nadia-beeley
What do you mean, insert each character individually?
The example works fine from J. D.
I changed a small part since J. D.'s example stops when there is a space.

$w.onReady(function () {

});

export function btnDownload_click(event) {
    const intervalInMilliseconds = 300; // interval between letters
    const text = 'Some text some text'; //the full text
    let count = 0
    let typingInterval;
    $w.onReady(() => {
        $w('#text1').text = '';
        typingInterval = setInterval(typeItUp, intervalInMilliseconds);
    })

    function typeItUp() {
        if ($w('#text1').text.length >= text.length) {
            console.log("done")
            return clearInterval(typingInterval); //to stop when the entire text is displayed
        }
        count ++
        $w('#text1').text = text.substring(0, count); //here you add one character every time.
    }
}
5

@volkaertskristof if you do so, I guess it’ll make more sense to change the stop condition as well:

let count = 1;
//...
if(count > text.length){return clearInterval(typingInterval);}
$w('#text1').text = text.substring(0, count);
count++;
}
//..