Text Animation Part01: How to make the Typewriter animation in Vue.js?

The easy way to make the typewriter in Vue.js without outer framework or library

Overview

If you are good at After Effect, the Typewriter effect is just a cake. In CSS animation, that is not the struggle part also. But, how about Vue? Personally think, the “Data-Binding” concept and v-model in Vue.js is the best way I ever used to do the typewriter implement, let’s take a look at it!

Preparation

Text and Paper

First, we should do the vue create to make a Vue project

Then, clear Home.vue to an empty page but the title <h1> tag without any text, and add a new text String in data , here my sample is “Hello, Typewriter can type anything~”. And, we need the empty paper and empty timer in data, too.

The last, set the v-html to <h1> as the property.

Methods and data-binding

After we did the paper and text, there are some functions we need. We have to control our typewriter by start and stop methods. In methods, I make two functions in methods, printer() start typing text, and stoper() does stop the typewriter.

mehtods:{
  printer(){ // put start function here },
  stoper(){ // put stop functions here }
}

Timing control & CSS setting

setInterval() and clearInterval()

Now, we got all tools to go! Firstly, we have to set the text adding, here we use setInterval() to type and clearInterval() to stop. The speed 200 will be more real, and we should use ()=>{} for calling universal data, not typical function(){}.

const i = -1
setInterval(()=>{
  i++
},200)

Here we can variable a x by remainder with i and titleText.length, then do the accumulate into this.paper

const x = i%this.titleText.length 
            this.paper += this.titleText[x]

The function code here, but there are some little tricks, we put the stoper() function at the very first to clear the old data before we do the start, cause we can do the start at any point in the typewriter sprint.

printer(){
        this.stoper()
        let i = -1
         this.timer = setInterval(()=>{
            i++
            const x = i%this.titleText.length 
            this.paper += this.titleText[x]
          },200)
      }

The stop function is easier, we only need to put clearInterval() with this.timer as an argument to clear and stop the type, then we re-variable this.paper to the empty string.

stoper(){
  clearInterval(this.timer)
  this.paper=''
}

Watcher

After the start and stop, let’s do the watcher to reset the spring, it will make our animation has an infinite cycle look. It’s easy, you only need to make this.paper as this.paper has all text in this.titleText

Finally, we can get the basic typewriter animation here.

And all code’s here for check out.

Human being typing speed adjustment and typing bar

Here we can add the flashing typing bar in our animation by CSS animation.

Also, human’s typing speed is not the stable flow, There are different pressing speed and strength for each finger, so we can set a random speed for typing interval. The ideal speed range is between 250–300 mini second

All same speed typing like the machine only

random speed typing has more human being feel

Important points

• You have to put stop function before the setInterval()
• Use the remainder as the index of the text array, then you don’t need to count how many text letters you have.
• Set the watcher to do the infinite cycle
• Do the random speed & CSS bar can make your animation has more real feeling

Review

The typewriter effect is interesting, next phase we will use <transition> in Vue.js to make advanced text and typewriter animation. Thanks for your reading, if you have any question, welcome to leave the comment to me, thanks!!