How To Use Typewriter Animation In Vue.Js

Use Vue.js custom typewriter animation and it’s easily customizable also, without any npm plugin and without jquery.

Step 1: Components

<template>
    <div class="typewrite-area">
        <h3 class="typewrite">
            {{typeValue}}<span class="cursor" :class="{'typing': typeStatus}">&nbsp;</span>
        </h3>
    </div>
</template>

 

Step 2: JS

<script>
export default {
    data: () => {
        return {
            typeValue: '',
            typeStatus: false,
            typeArray: ['Creative.', 'Digital.', 'Design.', 'Development.',],
            typingSpeed: 200,
            erasingSpeed: 200,
            newTextDelay: 1000,
            typeArrayIndex: 0,
            charIndex: 0,
        }
    },
    methods: {
        typeText() {
            if(this.charIndex < this. typeArray[this.typeArrayIndex].length) {
                if(!this.typeStatus)
                    this.typeStatus = true;

                this.typeValue += this.typeArray[this.typeArrayIndex].charAt(this.charIndex);
                this.charIndex += 1;

                setTimeout(this.typeText, this.typingSpeed);
            }
            else {
                this.typeStatus = false;
                setTimeout(this.eraseText, this.newTextDelay)
            }
        },
        eraseText() {
            if(this.charIndex > 0) {
                if(!this.typeStatus)
                    this.typeStatus = true;

                this,this.typeValue = this.typeArray[this.typeArrayIndex].substring(0, this.charIndex - 1);
                this.charIndex -= 1;
                setTimeout(this.eraseText, this.erasingSpeed);
            }
            else {
                this.typeStatus = false;
                this.typeArrayIndex += 1;
                if(this.typeArrayIndex >= this.typeArray.length)
                    this.typeArrayIndex = 0;
                
                setTimeout(this.typeText, this.typingSpeed + 1000);
            }
        }
    },
    created() {
        setTimeout(this.typeText, this.newTextDelay + 200)
    }
}
</script>

 

Step 3: SCSS

<style lang="scss" scoped>
.typewrite-area {
    text-align: center;
    .typewrite {
        margin-bottom: 30px;
        display: inline-block;
        color: var(--blackColor);
        padding: 8px 20px;
        line-height: 1;
        letter-spacing: 2px;
        background-color: #ebebeb;
        margin-top: 300px;
        
        font: {
            size: 20px;
            weight: 500;
        };
        span {
            &.cursor {
                display: inline-block;
                width: 1.5px;
                animation: cursorBlink 1s infinite;
            }
        }
        @keyframes cursorBlink {
            49% { background-color: var(--blackColor);}
            50% {background-color: transparent;}
            99% {background-color: transparent;}
        }
    }
}
</style>