Have you ever wondered how to create typing animations? In this article, you will learn how to create a typing animation using typed.js. You must have seen these types of typing animations on portfolio sites.
The typewriter effect is used to gradually reveal the text by increasing the width of its element from 0 to 100% using the CSS animations or any other library. We will be using typed.js.
Animations are preferred these days because the average attention span of human beings has dropped significantly. To keep the viewers engaged we use these types of animations. It also improves ranking in search engines promoting user retention.
Table of Contents
Introduction
Want to create good-looking portfolios? Then typing animations created using typed.js can help immensely. Typed.js is a library that types. Enter any string, and watch it type at the speed you’ve set, backspace what it’s typed, and begin a new sentence for however many strings you’ve set.
We animate text to highlight important information, such as a short quote. It can easily grab viewers’ attention and smoothly transition from one topic to another. You can effortlessly add animated lettering and typography to make your message stand out and it can increase viewers’ ability to remember the message.
Watch the full tutorial on YouTube
Instead of reading this article, you can watch a full tutorial on Typing Animation Using Typed.js on my YouTube channel. You can come back and access the full source code from here if needed. Don’t forget to subscribe and like the content while you are at it.
Source code for the Typing Animation using Typed.js
Creating the HTML Structure
Start with creating a file named index.html with the default HTML boilerplate code for the typing animation using typed.js.
Now, create a span element with the class name ‘typing’ inside the div having the class name ‘text’. Also don’t forget to include the script for typed.js.
Finally, create a Typed constructor inside the script section. The Typed constructor takes two parameters, one being the class name and another one being the function which contains the strings, type speed, and back speed. Optinally you can also loop the animation.
Refer to the following code and paste it in a file named index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Typing Animation</title>
</head>
<body>
<div class="text">I'm a <span class="typing"></span></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
<script>
var typing = new Typed (".typing" ,{
strings : ["Youtuber", "Web Developer", "Blogger", "Freelancer", "Designer"],
typeSpeed: 100,
backSpeed:60,
loop:true
});
</script>
</body>
</html>Styling with CSS
First, create a file named style.css. Do not forget to link it to the HTML file otherwise the CSS styles won’t be applied.
Style the body element to take up the full height of the viewport, display as flex, align-items to the center, and justify-content to the center.
Then style the text div to have a font size of 60px and a font weight of 600. Also, style the span element to have a crimson color.
Refer to the following code and paste it into a file named style.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.text{
font-size: 60px;
font-weight: 600;
}
.text span{
color: crimson;
}That’s all you have to do to create the typing animation using typed.js. You can access the full source code which is shown in the video tutorial by clicking on the button below.
Conclusion
In this article, we saw how to create a typing animation using typed.js. You can incorporate this in your portfolio designs. Now, I encourage you to build your own custom typing animation using typed.js.
If you are still stuck somewhere or have any doubts regarding the same, feel free to leave your question in the comment section, and I will be happy to help as soon as possible.
To learn more about creating awesome animations using HTML and CSS, please check out my article on Awesome Input Animation using HTML & CSS.
Do Visit: Responsive Navigation Bar using HTML, CSS, and JS
FAQ
How to create animated typing effect using typed js?
To create a typing animation using typed.js, firstly, add the typed.js CDN link. Now create a div with the class name ‘text’ and inside it create a span with the class name ‘typing’.
Finally, create a script section and add a Typed constructor to create a typing animation with appropriate type speed, back speed, and optionally loop the animation.
What is the typewriter effect in frontend?
The typewriter effect is used to gradually reveal the text by increasing the width of its element from 0 to 100% using the CSS animations or any other library.
Why do we animate text?
We animate text to highlight important information, such as a short quote. It can easily grab viewers’ attention and smoothly transition from one topic to another.
You can effortlessly add animated lettering and typography to make your message stand out and it can increase viewers’ ability to remember the message.