Create Typing Text Animation using HTML CSS JavaScript

A typing text animation is one of the most popular UI effects on modern websites. It gives your web pages a professional look by dynamically showing different words or roles one after another, often with a blinking cursor effect.

In this tutorial, we’ll build a typing text animation using HTML, CSS and JavaScript. The cursor blinks naturally and the text smoothly transitions between multiple words like Web Developer, Freelancer, UI/UX Designer. This effect is perfect for personal portfolios, landing pages or hero sections.

HTML Structure

We’ll begin by writing the basic HTML markup for the typing text animation. This includes creating a main container, a text wrapper, and separate span elements for the dynamic words and the blinking cursor. This structure will later allow us to style and animate the typing effect using CSS and JavaScript.

<div class="main-container">
    <div class="content">
        <span>I'm</span>
        <span class="typing-text">
            <span class="insert-text"></span>
            <span class="cursor blink-animation"></span>
        </span>
    </div>
</div>

• .main-container → wraps everything and centers the text on the screen.
• .content → contains the static text (I'm) and the typing effect.
• .typing-text → holds two parts:
  • .insert-text → where dynamic words will appear (Web Developer, Freelancer, etc.).
  • .cursor → the blinking vertical line that mimics a real typing cursor.

This minimal structure allows JavaScript to control which words are displayed while CSS handles the cursor blinking animation.

CSS Styling

Next, let’s add the styles that create the typing and blinking cursor effect.

.main-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 450px;
    min-height: 100vh;
}

.content {
    width: 400px;

• Layout basics → .main-container centers everything; .content sets the font size and spacing.
• .insert-text → starts with width: 0px; overflow: hidden; so text gradually appears when width increases.
• .cursor → a thin white line styled to look like a typing cursor.
• Blinking effect → .blink-animation uses @keyframes cursorBlinking to alternate between transparent and white, simulating cursor blinking.
• .width class → applied dynamically with JavaScript to expand .insert-text and reveal the word smoothly.

The CSS ensures that the cursor blinks naturally and the text smoothly reveals itself step by step, creating a realistic typing illusion.

JavaScript Functionality

Finally, we’ll use JavaScript to insert text dynamically and control when the cursor blinks.

const textBox = document.querySelector('.insert-text');
const cursor = document.querySelector('.cursor');
const stringArr = ["Web Developer", "Freelancer", "UI/UX Designer"];
let index = 0;
let ct = 0;

function insertText() {
    textBox.innerText = stringArr[index];
    index++;
    if (index > stringArr.length - 1) {

The JavaScript handles the logic of when to insert new words and syncs the cursor animation with text transitions for a natural typing effect.

Final Thoughts

With this simple setup of HTML, CSS and JavaScript, you now have a typing text animation with a blinking cursor. This effect is lightweight, reusable and highly customizable.

You can use it for:

• Portfolio websites (to show skills or job titles).
• Landing pages (to cycle through features or services).
• Hero sections (to grab attention instantly).

Try customizing the text array, typing speed or cursor style to make it match your branding perfectly.