How to Create the Typewriter Effect in JavaScript
Fulfill a SaaS marketer's dream
Will Carhart
Will Carhart
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
