Menu
How to create typewriter effect with JavaScript by Cules Coding

How to create typewriter effect with JavaScript

In this blog, I will show you how to create a typewriter effect with JavaScript.

Typewriter Effect Demo

Basic Idea

We will have an h1 tag. It will contain the text I am a. Then we will have a word with the typewriter effect. We will take each of the characters and put them in a span tag. Then we will put that span tag inside the h1 tag. We will do this for each character. After completing the word, we will wait for a while and then start removing the character. After removing the whole word, we will wait for a while and then start adding the next word. This is how we will create the typewriter effect.

Html

1<body>
2    <h1 class="text">I am a&nbsp;</h1>
3</body>

a&nbsp; is an HTML entity for non-breaking space.

Css

1@import url('https://fonts.googleapis.com/css2?family=Cousine:wght@700&display=swap');
2

3* {
4    padding: 0;
5    margin: 0;
6    box-sizing: border-box;
7}
8

9html {
10    font-size: 62.5%;
11}
12

13body {
14    font-family: 'Cousine', monospace;
15    min-height: 100vh;
16    display: grid;
17    place-items: center;
18    background-color: black;
19}
20

21:root {
22    --text-color: white;
23}
24

25.text {
26    font-size: 4rem;
27    display: inline-block;
28    letter-spacing: 0.2rem;
29    color: var(--text-color);
30    border-right: 1rem solid var(--text-color);
31    animation: blink 0.5s step-end infinite alternate;
32}
33

34.char {
35    color: orange;
36}
37

38@keyframes blink {
39    50% {
40        border-color: transparent;
41    }
42}
43

44@media (min-width: 600px) {
45    .text {
46        font-size: 6rem;
47    }
48}
49

50@media (min-width: 900px) {
51    .text {
52        font-size: 8rem;
53    }
54}
55

56@media (min-width: 1200px) {
57    .text {
58        font-size: 11rem;
59    }
60}
61

62@media (min-width: 1600px) {
63    .text {
64        font-size: 14rem;
65    }
66}

Basic css for the website.

Javascript

1const textEl = document.querySelector('.text')
2

3const words = ['Developer', 'Youtuber', 'Blogger'].map(word => word + '.')
4

5let wordIndex = 0
6let charIndex = 0
7

8let addingChars = true
9let shouldWait = false
10

11let currentWord = words[wordIndex]

Explanation:

  • textEl is the h1 tag.
  • words is an array of words that will have the typewriter effect.
  • wordIndex is the index of the current word.
  • charIndex is the index of the current character.
  • addingChars is a boolean that tells us if we are adding characters or removing them.
  • shouldWait is a boolean that tells us if we should wait for a while.
  • currentWord is the current word that we are working on.
1const addChar = () => {
2    let currChar = currentWord[charIndex]
3

4    const char = document.createElement('span')
5

6    char.innerText = currChar
7    char.classList.add('char')
8

9    textEl.appendChild(char)
10

11    charIndex++
12

13    if (charIndex === currentWord.length) {
14        charIndex--
15        addingChars = false
16        shouldWait = true
17    }
18}

Explanation:

  • currChar is the current character. We put them in a span tag and them inside the textEl element.
  • We increase the charIndex by 1.
  • If the charIndex is equal to the length of the current word, we decrement charIndex by 1. Because we have to start removing from the last character.
  • We set addingChars to false and shouldWait to true. Because we have to wait for a while.
1const removeChar = () => {
2    const char = textEl.lastElementChild
3

4    textEl.removeChild(char)
5

6    charIndex--
7

8    if (charIndex < 0) {
9        charIndex++
10        addingChars = true
11        updateCurrWord()
12    }
13}

Explanation :

  • We remove the last child of the textEl element and decrease the charIndex by 1.
  • If the charIndex is less than 0, we increase it by 1. Because we have to start adding from the first character to the next word.
  • We set addingChars to true and shouldWait to false. Because we have to add the next word.
  • And we call the updateCurrWord function. Let's implement the updateCurrWord function.
1const updateCurrWord = () => {
2    wordIndex++
3

4    if (wordIndex === words.length) wordIndex = 0
5

6    currentWord = words[wordIndex]
7}

Explanation:

  • We increase the wordIndex by 1.
  • If the wordIndex is equal to the length of the words array, we set wordIndex to 0. Because we have to start from the first word.
  • Finally, we update the currentWord to the current index.
1const runTypewriter = () => {
2    const operation = addingChars ? addChar : removeChar
3

4    operation()
5

6    let timeout = addingChars ? 200 : 100
7

8    if (shouldWait) {
9        timeout = 1000
10        shouldWait = false
11    }
12

13    setTimeout(runTypewriter, timeout)
14}
15

16setTimeout(runTypewriter, 1500)

Explanation:

  • We create an operation variable. It will store the function that we want to call. It will be either addChar or removeChar depending on the addingChars variable.
  • We create a timeout variable. It will store the time that we want to wait. It will be either 200 or 1000 depending on the shouldWait variable.
  • If shouldWait is true, we set timeout to 1000 and shouldWait to false.
  • We call the runTypewriter function inside the typewriter function. This is what we call recursion. But don't worry about it. It will create a loop that will create the typewriter effect.
  • Finally, we call the runTypewriter function globally after 1500 milliseconds.

Final Result

That's it! You can check out the GitHub repository for the code. Feel free to Star it, fork it, and make your own version.

Shameless Plug

I have made an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Previous PostEverything you need to know about JSON
Next PostTop 10 array methods to learn to become a pro in JavaScript