Self-Typing Text Effect using CSS & JavaScript
Last Updated :
18 Apr, 2025
Self-Typing Text Effect is a type of effect in which all the alphabets of the text are revealed one by one, one after the other to give the look and feel of being typed on the screen by themselves. Even though this is a basic text effect, it is still eye-capturing and effective animation. This animation is widely used in all modern web applications and is very easy to implement. This can be designed and implemented using only CSS or only JavaScript and developers can modify this animation depending on their creativity. For example, we can increase or decrease the speed of the text reveals or even add a blinking cursor to the end of the text to enhance the animation. For a different version of the text reveal effect which works on the same lines and is similar to this text effect, refer to the article:
How to create a text-reveal effect using HTML and CSS?
In this tutorial, we will implement Self-Typing Text Effect using HTML, CSS, and JavaScript. We assume that you are familiar with HTML and CSS rules and have a basic knowledge of CSS Animations.
Step 1: Install Browsersync using npm. We will use Browsersync to start a server and provide a URL to view the HTML site, CSS Animation and to load the respective JavaScript files. We will install Browsersync globally.
npm install -g browser-sync
Step 2: Create an “index.html” file, an index.css file, and an index.js in your project root folder.
HTML: Add the following code snippet in that file. This file contains the codes for both CSS and JavaScript files which are included.
CSS: The overflow: hidden; CSS property specifies the behavior of the content if it overflows the HTML elements default box. As we have specified hidden, the content will be clipped initially and will be invisible to the user. This is important since we want to ensure that the text is not revealed until the animation is completed.
The white-space: nowrap; CSS property specifies the behavior of the white spaces in the text content. A sequence of white spaces, if present, will collapse into a single white space and the content will never be wrapped to the next line until a br HTML tag is encountered. This is important to keep the CSS Animation from breaking.
The margin: 0 auto; CSS property simply extends the margin as the text is revealed, to support the typing effect. Refer to the code comments for a better understanding. We have defined an additional wrapper class surrounding the entire CSS animation to align it to the center of the screen using the display: flex; and justify-content: center; CSS properties. The CSS Animation will be triggered as soon as the website is loaded. We have used simple CSS animation to achieve the typing effect as shown below. A detailed explanation of which can be found here. The steps(30, end) is a CSS animation timing function. The first parameter specifies the number of intervals in the function and it should be a positive integer greater than 0. The second parameter is an optional parameter and the value is set as an end.
Refer to the article: CSS animation-timing-function property
JavaScript: In this file, we are manually appending every alphabet to the HTML h1 tag’s #effect element by incrementing an index value, fetching, and appending every character from the text using the charAt() and the setTimeout() JavaScript functions. The interval set in the setTimeout() function determines the speed at which the text will be revealed thereby displaying the Self-Typing Effect. The textEffect() function is triggered by the onClick HTML property of the Self Typing Text Effect using the HTML & JS button. In our case, we have set the interval as 50 ms but it can be re-adjusted according to convenience.
html
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: flex;
justify-content: center;
}
.typewriter h1 {
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
animation: typing 3.5s steps(30, end);
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
</style>
</head>
<body>
<h2>
GeeksforGeeks - Self Typing
Text Effect in CSS & JS
</h2>
<div class="wrapper">
<div class="typewriter">
<h1>Hello Geeks of GeeksforGeeks</h1>
</div>
</div>
<button class="btn btn-lg" onclick="textEffect()">
Self Typing Text Effect using HTML & JS
</button>
<h1 id="effect"></h1>
<script>
var index = 0;
var text = 'Hello Geeks of GeeksforGeeks';
var speed = 50;
function textEffect() {
if (index < text.length) {
document.getElementById("effect")
.innerHTML += text.charAt(index);
index++;
setTimeout(textEffect, speed);
}
}
</script>
</body>
</html>
Step 3: At this point our Self-Typing Text Effect is ready. To launch the application using Browsersync, run the following command in the project directory or you can run the HTML file directly into your browser.
browser-sync start --server --files "*"
Output: This starts Browsersync in server mode and watches all the files within the directory for changes as specified by the * wildcard. The application will be launched at http://localhost:3000/ by default.
Similar Reads
Text Typing Animation Effect using HTML CSS and JavaScript
To create a text-typing animation effect, we will use a combination of HTML structure, CSS animations, and JavaScript logic to create the typing and deleting text like effect. [GFGTABS] HTML <!-- index.html --> <html> <head> <link rel="stylesheet" href="styles.css
2 min read
Design a typing speed test game using JavaScript
A typing test is designed to find how fast one types in a given amount of time. We will be designing a typing game using JavaScript that presents a simple typing challenge and finds the performance of typing by calculating the Characters Per Minute (CPM), Words Per Minute (WPM) and the accuracy of t
10 min read
Create the marquee text effect using JavaScript
In this article, we will be creating marquee text using JavaScript. This effect can be achieved using the <marquee> tag, but the marquee has been deprecated and the new websites do not use this tag. Still some browsers support this tag but to be on the safe side you should not use this tag. He
3 min read
How to Create Text Animation Effect using JavaScript ?
Creating text animations in JavaScript can add an extra layer of interactivity and engagement to a website or application. By using JavaScript, we can create text that moves, fades, changes color, or transforms in other ways. Animating text can also help convey important information or messages in a
2 min read
Text Split Effect using CSS
The Text Split Effect in CSS is a popular and visually engaging technique that breaks up a block of text into individual letters or words, which are then animated or styled separately. This effect can add a creative touch to any webpage, making it dynamic and interactive. In this article, we will ex
4 min read
How to make a text italic using JavaScript ?
Javascript provides various methods to modify the text according to our need. In this article, we are going to see how we can make the text italics in javascript. string.italics( ) is the method use to make the text italics. Basically, italics text are created by using the <i> </i> tag i
1 min read
Text to Emoji Translator using HTML CSS and JavaScript
In this article, we will explore how to create a TextEmoji Translator using HTML, CSS, and JavaScript, that allows users to convert emojis into text and text into emojis. Emojis are a fun and expressive way to add color, emotions, and context to your messages, making your conversations more lively a
4 min read
Design a Letter Hover Effect using HTML CSS and JavaScript
In this article, we will learn to implement the bouncing letter hover effect using simple HTML, CSS, and JavaScript. HTML is used to create the structure of the page, CSS is used to set the styling and JavaScript is used for animation. Approach to Create the Bouncing Letter Hover EffectHTML Code: To
2 min read
Build a Text to Speech Converter using HTML, CSS & Javascript
A text-to-speech converter is an application that is used to convert the text content entered by the user into speech with a click of a button. A text-to-speech converter should have a text area at the top so that, the user can enter a long text to be converted into speech followed by a button that
3 min read
How to create mousemove parallax effects using HTML CSS & Javascript ?
In this article, we will learn to create a Mousemove parallax effect using CSS and JavaScript. In the Mousemove parallax effect, an image moves in a different direction at a different speed when we move the cursor. Parallax effects are used to make the website more attractive and increase the intera
2 min read