Utility
Tools
Velo Code - Typewriter Text Animation
Velo Code - Typewriter Text Animation

The following Wix Velo Code creates a typewrite animation effect for texts. It uses the velo code with a text element to create the effect. Change the words in
const words = ["The Future", "Everything", "Love", "Like Art"];
The time functions are controlled by
const typingSpeed = 100;
const erasingSpeed = 50;
const pauseBetweenWords = 1500;
const pauseAfterErase = 500;
Code
$w.onReady(function () {
startTypewriterEffect();
addBlinkingCursor();
});
const words = ["The Future", "Everything", "Love", "Like Art"];
const typingSpeed = 100;
const erasingSpeed = 50;
const pauseBetweenWords = 1500;
const pauseAfterErase = 500;
let currentWordIndex = 0;
let isTyping = false;
function startTypewriterEffect() {
$w('#typewriterText').text = "";
typeNextWord();
}
function typeNextWord() {
if (isTyping) return;
isTyping = true;
const currentWord = words[currentWordIndex];
let currentChar = 0;
const typingInterval = setInterval(() => {
const displayText = currentWord.substring(0, currentChar + 1);
$w('#typewriterText').text = displayText;
currentChar++;
if (currentChar >= currentWord.length) {
clearInterval(typingInterval);
setTimeout(() => {
eraseCurrentWord(currentWord);
}, pauseBetweenWords);
}
}, typingSpeed);
}
function eraseCurrentWord(word) {
let currentChar = word.length;
const erasingInterval = setInterval(() => {
currentChar--;
const displayText = word.substring(0, currentChar);
$w('#typewriterText').text = displayText;
if (currentChar <= 0) {
clearInterval(erasingInterval);
currentWordIndex = (currentWordIndex + 1) % words.length;
isTyping = false;
setTimeout(() => {
typeNextWord();
}, pauseAfterErase);
}
}, erasingSpeed);
}
function addBlinkingCursor() {
let showCursor = true;
setInterval(() => {
const currentText = $w('#typewriterText').text;
if (showCursor) {
if (!currentText.endsWith('|')) {
$w('#typewriterText').text = currentText + '|';
}
} else {
if (currentText.endsWith('|')) {
$w('#typewriterText').text = currentText.slice(0, -1);
}
}
showCursor = !showCursor;
}, 500);
}
export function restartTypewriter() {
currentWordIndex = 0;
isTyping = false;
startTypewriterEffect();
}
export function updateWords(newWords) {
words.length = 0;
words.push(...newWords);
currentWordIndex = 0;
}