Typewriter Effect Code

Ask the community
, ,
1

Hello! I used the code from this site: https://www.grampsworkbench.com/Examples/Typewriter to create a typewriter effect. I am still pretty beginner level when it comes to coding. The code I used for my site is as follows:

// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import wixData from ‘wix-data’ ;

let interval ;
let timeInterval = 100 ;
let typeStr = “Website Designer” ;
let typeIdx ;
let htmlStr = ‘’ ;
let displayStr ;

$w . onReady ( function () {

// Get the original html string, and split it into two pieces. 
// In the process, remove the separator !##! 
// By saving the original html, we preserve the style of the text to display. 
if  ( htmlStr . length  ===  0 ) {  // just get the original html text the first time 
    htmlStr  =  $w ( "#typewriterPage" ). html ; 
} 
$w ( "#typewriterPage" ). html  =  '' ;  // don't show the original text 
let  strPieces  =  htmlStr . split ( "!##!" ); 

displayStr  =  '' ;  // init string that we will "type" to 
typeIdx  =  0 ;  // start at beginning of string we want to "type" 

// Declare an interval function that will run in the background. 
// This function will be triggered by the defined timeInterval. 
interval  =  setInterval ( function  () { 
    // Get next char from string to be typed and concatenate to the display string. 
    displayStr  =  displayStr  +  typeStr [ typeIdx ++]; 
    // Make a sandwich with the display string in between the original html pieces. 
    $w ( "#typewriterPage" ). html  =  strPieces [ 0 ] +  displayStr  +  strPieces [ 1 ]; 
    // Stop the interval from running when we get to the last character to by "typed". 
    if  ( typeIdx  ===  typeStr . length )  clearInterval ( interval ); 
},  timeInterval );

});
// For full API documentation, including code examples, visit Velo API Reference - Wix.com

I would like to add more text, but I would like it to be below. Example:

Web Designer
SEO Analyst

How can I add a line break to this code? I attempted to add
, but it broke the code. I would like all the text to be in one textbox. Any suggestions?

2

I streamlined a little bit the code and here it is, just put \n inside the string to make it break a line.

Try it:

let interval
let timeInterval = 100
let typeStr = "Website Designer \n SEO Analyst"
let typeIdx = 0
let displayStr = ""
let endingString = "|"

$w.onReady(() => {
    $w("#typewriterPage").text = ""
    interval = setInterval(() => {
        displayStr = displayStr + typeStr[typeIdx]
        typeIdx++

        $w("#typewriterPage").text = displayStr + endingString

        typeIdx === typeStr.length && clearInterval(interval)
    }, timeInterval)
})
3

How do i add this effect for multiple texts on the same page?

4 
let interval = [];
let txtInput = [];
    txtInput[0] = "Website Designer \n SEO Analyst"; 
    txtInput[1] = "What the hell!!! Another text showing as Type-Writer-Effect???"; 
    txtInput[2] = "Wow, it's amazing!!!"; 

$w.onReady(async function() {
    for (let i = 0; i < 3; i++) {
        const element = txtInput[i];
        await setTimeout(()=>{xxx(i);},2500);
    }

    function xxx(value){
        let timeInterval = 100;
        let typeIdx = 0;
        let displayStr = "";
        let endingString = "|";

        interval[value] = setInterval(() => {
            displayStr = displayStr + txtInput[value][typeIdx]
            typeIdx++

            $w("#twInput"+value).text = displayStr + endingString

            typeIdx === txtInput[value].length && clearInterval(interval[value]);
        }, timeInterval)
    }    
});
5 
IMPROVED-VERSION.....   

    By the way --> NICE CODE from BRUNO!


let interval = [];

// -------------- USER - INTERFACE --------------------
let txtInput = [];
    txtInput[0] = "Website Designer \n SEO Analyst"; 
    txtInput[1] = "What the hell!!! Another text showing as Type-Writer-Effect???"; 
    txtInput[2] = "Wow, it's amazing!!!"; 

let DELAY = 500;
let timeInterval = 50;
let SYMBOL = "|"
// -------------- USER - INTERFACE --------------------


$w.onReady(async function() {
    for (let i = 0; i < txtInput.length; i++) {const element = txtInput[i]; xxx(i);}

    function xxx(value){
        setTimeout(()=>{
            let typeIdx = 0, displayStr = "", endingString = SYMBOL;
            interval[value] = setInterval(() => {
                displayStr = displayStr + txtInput[value][typeIdx]
                typeIdx++

                $w("#twInput"+value).text = displayStr + endingString

                typeIdx === txtInput[value].length && clearInterval(interval[value]);
            }, timeInterval)
        },DELAY);
        DELAY=DELAY+500;
    }    
});