965
5 min read

How to Create the Typewriter Effect in JavaScript

Fulfill a SaaS marketer's dream

author profile image
Will Carhart
How to Create the Typewriter Effect in JavaScript cover image

The typewriter effect

Have you ever seen on a conversion page for a SaaS company and seen

This effect is called the typewriter effect, and is a cool way of calling attention to some text on your webpage. Let's take a look at how we can implement this ourselves in just a few minutes.

Heads Up!

If you're looking for the complete sample code, check out this JSFiddle or this repository.



Start with some interesting text

First, we'll need to decide what to type. We'll need some static text, like Hi, my name is Will, and I'm a and then we'll need some dynamic text to complete the sentence, like software engineer.

Let's make a basic HTML skeleton in a file called index.html.

<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Typewriter Effect Test</h1>
<p>Hi, my name is Will, and I'm a <span id="typewriter-text"></span></p>
</body>
</html>

We'll use the #typewriter-text element for our dynamic text.


Target the dynamic text element

Next, we'll need to target our #typewriter-text element and change it dynamically. I'm going to use a little bit of jQuery for brevity and simplicity, and because I'm already using it for the webpage on which the typewriter effect will appear, but you can replicate this with vanilla JavaScript fairly easily as well. Let's make a new file typewriter.js. First, we'll write some code to interact with our #typewriter-text element and tell it to type and untype dynamically. We'll use a Promise to wait for 3s between typing and untyping, so the user can actually read our dynamic text.

$(document).ready(async () => {
let typewriterText = 'software engineer.'
do {
await typeText('#typewriter-text', typewriterText)
await new Promise(res => setTimeout(res, 3*1000));
await untypeText('#typewriter-text', typewriterText)
} while (true)
})

Next, we'll need to write the typeText() and untypeText() functions. For typeText(), we'll want to sequentially add letters to our #typewriter-text element until it becomes the desired dynamic text. Let's again use a Promise to slow down the typing speed. I'm using a delay of 75ms between each typed character, but you can change the typing speed as desired by increasing or decreasing the delay.

const typeText = async (id, text) => {
let typedText = ''
let delay = 75
while (text.length >= typedText.length) {
$(id).text(typedText)
await new Promise(res => setTimeout(res, delay))
typedText += text[typedText.length]
}
}

Now let's use the same logic for untypeText().

const untypeText = async (id, text) => {
let typedText = text
let delay = 75
while (typedText.length > 0) {
$(id).text(typedText)
await new Promise(res => setTimeout(res, delay))
typedText = typedText.substring(0, typedText.length - 1)
}
}

Great! Don't forget to link to typewriter.js in index.html.

Now our text is


Adding a circular queue of dynamic content

This is a great start. Now, what if we wanted the typed text to be even more dynamic?

For example, we could set up a countdown:

Let's come up with a few more dynamic phrases for our typewriter text.

guac lover
boba drinker
corgi snuggler

Now, let's update our jQuery to rotate through our list of dynamic texts. We'll make our queue of texts circular, so it never runs out of content to type dynamically.

$(document).ready(async () => {
let typewriterText = [
'guac lover.',
'boba drinker.',
'corgi snuggler.'
]
let index = 0
do {
await typeText('#typewriter-text', typewriterText[index])
await new Promise(res => setTimeout(res, 3*1000));
await untypeText('#typewriter-text', typewriterText[index])
index += 1
index = index % typewriterText.length
} while (true)
})

Here's what the result looks like:

Hi, my name is Will, and I'm a


Wrap up

There you have it, the typewriter effect done easy! You can download the complete code from this post from this JSFiddle or this repository. If you'd like more examples of the typewriter effect, check out the home and about pages. Now you're ready to create marketing homepages across the internet.


🦉

Artwork by weris7554

Back

Read More

©  Will Carhart