VELO Typewriter Effect

Ask the community
,
1

Hi there!
I used the following code https://www.grampsworkbench.com/Examples/Typewriter to create a typewriter effect. I am still pretty beginner level when it comes to coding.
This is the code, which actually works perfectly:

let interval ;
let timeInterval = 500 ;
let typeStr = “I AM NINA” ;
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 );

But I would like to add the following modification:
the first line should be erased (or even partially) and then retyped with another sentence and so on:

“I AM NINA” -erases-
-typed on same spot instead- “I AM DESIGNER” -erases-
-typed on same spot instead- “I AM STRATEGIST” -erases-

Any suggestions?

Thank you!!

2

I think I got it, see if it fits you…

$w.onReady(() => {
    typeAndErase($w("#typewriterPage")) //Just the function call
})

function typeAndErase(textElement) {
    let interval
    let timeInterval = 100
    let typeStrings = ["Bruno Prado", "Website Designer", "Wix Coder"]
    let wordIdx = 0
    let typeIdx = 0
    let displayStr = ""
    let endingString = "|"

    textElement.text = ""
    interval = setInterval(() => {
        displayStr = displayStr + typeStrings[wordIdx][typeIdx]
        typeIdx++

        textElement.text = displayStr + endingString

        if (typeIdx === typeStrings[wordIdx].length) {
            wordIdx++
            displayStr = ""
            typeIdx = 0
            wordIdx === typeStrings.length && clearInterval(interval)
        }
    }, timeInterval)
}
1 Like
3

Perfect! Thank you so, so much, Bruno!!

4

Hi there, I am a complete noob when it comes to coding, I have been redirected here as I asked a similar question. In what part of this code can I use to direct it to an element, say for example “#text37”? I may be missing a few steps but the above code does not work for me

5

Just change the marked element to the element ID you have in your page.

$w.onReady(() => {
    typeAndErase($w("#typewriterPage"))//Just the function call with the element
})
6

Great thanks Bruno that is great, works perfectly, Can I ask what would I need to add to loop continuously?

7

also can I add a pause before words change?

8

Just change the highlighted line from this:

wordIdx === typeStrings.length && clearInterval(interval)

To this:

if (wordIdx === typeStrings.length) wordIdx = 0
9

You can do it, but it is going to be way more complicated. You can slow down the animation changing the:

let timeInterval = 100 //In milliseconds
10

Thanks Bruno, this is awesome. I really appreciate your help.

11

Hi Bruno - a very quick question. If I wanted 3 separate Type Writer Effects on the same page - how would I do that? Also - thanks for this! Has helped me out so much

12

All you have to do is add the string elements to the function.

Instead of

function typeAndErase(textElement){
let interval
let timeInterval = 100
let typeStrings=["Bruno Prado","Website Designer","Wix Coder"]

Do this -

$w.onReady(() => {
    typeAndErase($w("#text26"), "Bruno Prado", "Website Designer", "Wix Coder") //Just the function call
})

function typeAndErase(textElement, text1, text2, text3) {
    let interval
    let timeInterval = 150
    let typeStrings = [text1, text2, text3]

This way you can call the typeAndErase function with any parameters.

13

Perfect! That works for me. Thanks once again so much. Really appreciate the help

14

I’ve been trying to use this code using an element ID but I get this error whenever I try to run the code, can anyone help with this? I’m a total beginner so I’m a bit stumped!

I’m using an element called #intro and I’m struggling with the code.

920×219 18 KB

15

Hi Nadia,
Check your curly brackets,
You are missing one 1 think.

16

sorry to impose, but I’d still like to know how to include a pause because the speed is just right

17

I know this is super late, and I’m no coder whatsoever (thank you bruno for your help!!), but if you add spaces after type strings, it will look like the type is pausing before the next string appears

18

Resurrecting this old post because I ran into this problem recently and needed to add a starting string and the backspace animation so I thought I’d add the updated changes here. Started with @bwprado 's code so thank you for the jumping off point!

$w.onReady(() => {
    typeAndErase($w("#typerwriterText")) //Just the function call
})

function typeAndErase(textElement) {
    let interval
    let backspaceInterval
    let timeInterval = 300
    let typeStrings = ["Blaise Clair", "Website Designer", "Wix Coder"]
    let stringStart = "I am " //<-- if you don't want a starting string just set this to ""
    let wordIdx = 0
    let typeIdx = 0
    let displayStr = stringStart
    let endingString = "|"
    let direction = 1

    textElement.text = ""
    interval = setInterval(() => {
        if(direction == 1) {
            displayStr = displayStr + typeStrings[wordIdx][typeIdx]
            typeIdx++

            textElement.text = displayStr + endingString

            if (typeIdx === typeStrings[wordIdx].length) {
                direction = 0
            }
        }
        else{
            typeIdx--;
            displayStr = displayStr.substr(0,stringStart.length + typeIdx-1);

            textElement.text = displayStr + endingString;

            if(typeIdx == 0) {
                direction = 1
                wordIdx++
                displayStr = stringStart
                if (wordIdx === typeStrings.length) wordIdx = 0
            }
        }
    }, timeInterval)
	
}
19

Hello everyone,

i struggle to implement the code, why is it not running?

$w.onReady(() => {
    typeAndErase($w("#typerwriterText")) //Just the function call
})

function typeAndErase(#text36) {
    let interval
    let backspaceInterval
    let timeInterval = 300
    let typeStrings = ["Weiterbildung", "Unterstützung", "Diversität"]
    let stringStart = "" //<-- if you don't want a starting string just set this to ""
    let wordIdx = 0
    let typeIdx = 0
    let displayStr = stringStart
    let endingString = "|"
    let direction = 1

    textElement.text = ""
    interval = setInterval(() => {
        if(direction == 1) {
            displayStr = displayStr + typeStrings[wordIdx][typeIdx]
            typeIdx++

            textElement.text = displayStr + endingString

            if (typeIdx === typeStrings[wordIdx].length) {
                direction = 0
            }
        }
        else{
            typeIdx--;
            displayStr = displayStr.substr(0,stringStart.length + typeIdx-1);

            textElement.text = displayStr + endingString;

            if(typeIdx == 0) {
                direction = 1
                wordIdx++
                displayStr = stringStart
                if (wordIdx === typeStrings.length) wordIdx = 0
            }
        }
    }, timeInterval)
	
}

The text elements ID is #text36, i am really new to coding and cant tell where my mistake is.
Thank you for your help!
Nicole