top of page

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;
}

bottom of page