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.
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.
})
@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.
}
}