top of page

UTILITY

TOOLS

How to Create a Typewriter Text Effect in Wix Using Velo? Full Tutorial with Code

Typewriter effect is one of the most used #text_effects in web design. It allows users to send a powerful message in a limited space with a beautiful design. This article explains how you can achieve the typewriter text effect in Wix using the Velo Code. This method applies for both #Wix_Studio as well as #Wix_Editor.


ree

The necessary code to achieve this effect is also included in the article. You can use the code directly in your Wix website. Please note that you do not need a premium plan to use this method.


Velo vs Iframe - Which is better?

One obvious question in your mind must be, "Why can't I just use ChatGPT to write an iframe code that generates a typewriter effect and embed it in a Wix website?"


The reason is SEO! While iframe embed makes adding the effect easy, it is not a good choice for the main content of the website. Google does not recommend using iframe in a website as they might be used to inject malicious code. Sometimes search engines fail to index the iframe as well.


ree

Since text content is crucial for the search ranking of your Wix website, using Velo to add the content in the main DOM is beneficial for SEO compared to an iframe.


While Google does try to crawl the iframe content using DOM flattening, it is not guaranteed. Furthermore, using an iframe might cause compatibility and performance issues.If you still want to embed the code, use Custom Element with SEO Markup instead.


Using Velo to create Typewriter Effect

First, I will share the #Velo_code we are going to use to create the typewriter effect. Then we will dive into its use, editing, and modification.


The following Velo code creates a typewriter effect with rotating words. This template can be used to create any typewriter text effect. 


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

With small changes across the code, you can create your own typewriter effects on a Wix website. The next section explains how the code works and where to replace and change the syntax to adopt the template for your use case.


The Code Breakdown and Modification

Let's look at how the code works and how you can modify it. The first syntax - 

$w.onReady(function () {
    startTypewriterEffect();
    addBlinkingCursor();
});

ensures that the code runs after the page fully loads and adds the global variables "startTypewriterEffect" and "addBlinkingCursor". While startTypewriterEffect triggers the animation effect, the addBlinkingCursor adds a "|" sign at the end of the dynamic words.


The second part is most crucial, this is where you need to change the effect settings and set dynamic words - 

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;

The Syntax

const words = ["The Future", "Everything", "Love", "Like Art"];

contains the dynamic words that rotate in the typewriter effect. You need to replace words in "The Future", "Everything", "Love", "Like Art". Each word should be inside quotation marks and separated by a comma. You can also add as many words as you like.


Then we have some time and speed parameters. The syntax "const typingSpeed = 100;" sets the speed of the typing animation for each character in milliseconds. 100ms is equal to 0.1 seconds.  The syntax const erasingSpeed = 50;  sets the time of erasing each character.


const pauseBetweenWords = 1500; sets decides how long the word will stay after the typewriter animation before erasing. In the template, it is set to 1500 milliseconds or 1.5 seconds. Similarly, const pauseAfterErase = 500; sets the pause after the word gets erased.


The currentWordIndex and isTyping are to keep the animation bug-free. While the currentWordIndex keeps track of the words, isTyping prevents any overlapping in the animation cycles.


The code syntax


function startTypewriterEffect() {
    $w('#typewriterText').text = "";
    typeNextWord();
}

is super important. It connects the code to your website's text element. When you add the text element to your website, change its element ID to "typewriterText". It will assign the code to that text element and make sure that your website visitors see the effect.


The Syntax

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

starts the typing function and has all the necessary functions to start typing.


Similarly, the syntax

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

has the function to erase the current word. It has all the necessary functions to erase the words after it completes the effect.


Finally, we have the code syntax

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

This code part adds the blinking cursor effect, which is crucial for finishing the typewriter effect and adding visual candy to it. It toggles the "|" sign every 500ms.


Finally, we have some utility and reset functions.


export function restartTypewriter() {
    currentWordIndex = 0;
    isTyping = false;
    startTypewriterEffect();
}

export function updateWords(newWords) {
    words.length = 0;
    words.push(...newWords);
    currentWordIndex = 0;
}

All these code parts together create a full typewriter effect for your website.


How to Edit the Code

Now, as you understand how the code actually works, let me show you how to edit the parameters within the code to adapt it for your use case.


First, you need to change all the words in 

const words = ["The Future", "Everything", "Love", "Like Art"];

Then change the time of animation for the characters in 

const typingSpeed = 100; 
const erasingSpeed = 50;

Finally, change the pause time after each word's pause and animation completion in 

const pauseBetweenWords = 1500; 
const pauseAfterErase = 500;

Now for the most important part. Set the element ID of the text to "typewriterText". Without it, you can not show the animation on the live website. You can use any element ID you want; make sure you change it in the code as well.


One last thing you might wanna change is the frequency of the blinking cursor, which you can do in the code syntax - 

 showCursor = !showCursor;
    }, 500);

With these changes, you can show a cool typewriter text effect in your Wix Website.


Conclusion

Thanks for reading! I hope this walkthrough on how to create a typewriter effect for text using Velo code will help you improve your Wix website design. Both Wix Editor and Wix Studio users can use this code in their websites.


For SEO purposes, using Velo to create this type of effect is much better. Search engines like Google sometimes do not correctly index the content inside an HTML iframe. However, Velo is integrated well in the original DOM of your website and will definitely index your text as it is.


If you like the article, make sure to rate us and drop a comment below to let us know your feedback, questions, or suggestions.

Comments

Rated 0 out of 5 stars.
No ratings yet
Add a rating
bottom of page