VELO Typewriter Effect

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