VELO Typewriter Effect

Ask the community
,
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)
	
}