GSAP Text Plugin — Animating Text Content and Typing Effects

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about GSAP Text Plugin. We cover key concepts, practical examples, and best practices to help you master this topic.

GSAP Text plugin animates text content by typing characters one at a time, creating typewriter effects and dynamic text replacement.

What You'll Learn

By the end of this guide, you will create typewriter effects with variable speed, replace text with animation, scramble text effect for transitions, control typing speed per character, and sequence multiple text animations.

Basic Typewriter

gsap.to('.text', {
    text: 'Hello, world! This is animated typing.',
    duration: 3,
    ease: 'none'
});

Scramble Effect

gsap.to('.scramble', {
    text: {
        value: 'Final Revealed Text',
        speed: 0.5,
        oldClass: 'old-text',
        newClass: 'new-text'
    },
    duration: 3
});

Delayed Character Start

gsap.from('.text', {
    text: '',
    duration: 2,
    delay: 1,
    ease: 'none'
});

Sequential Typewriter

var tl = gsap.timeline();
tl.to('.line1', { text: 'First line', duration: 1, ease: 'none' })
  .to('.line2', { text: 'Second line', duration: 1, ease: 'none' })
  .to('.line3', { text: 'Third line', duration: 1, ease: 'none' });

Common Mistakes

1. Not Including Plugin

The Text plugin must be loaded after gsap core and registered. Without it, the text property is ignored.

2. Using Ease With Typing

Typing should use ease: 'none' for linear character-by-character display. Other easings create uneven pacing.

3. Text Getting Cut Off

If the text has special characters or HTML entities, they may display incorrectly. Use plain text.

4. Overwriting Text Mid-Animation

Calling gsap.to on the same element while a text animation is running causes stuttering. Kill existing tweens first.

5. Duration Too Short

Short duration with long text creates a rapid, unreadable typewriter. Calculate duration = text.length * 0.03 (30ms per char).

Practice Questions

Q1: What plugin is required for text animations? A: GSAP TextPlugin.

Q2: What ease should you use for typewriter effect? A: 'none' for linear character-by-character typing.

Q3: How do you control typing speed? A: The duration property controls total time. For finer control, use a timeline with smaller text chunks.

Q4: Can you animate HTML content? A: No. TextPlugin works with plain text strings. Use innerHTML for HTML content.

Q5: How do you create a delete-and-ret type effect? A: Use a timeline: text to 'some text', then text to '' (empty), then text to 'new text'.

Challenge: Build a terminal emulator that types line by line, pauses at each colon, and accepts a fake command prompt input at the end.

FAQ

Does TextPlugin support emoji?

Yes. Emoji characters are treated as single characters.

Can I use TextPlugin with CSS class changes?

Yes. Use oldClass and newClass options to style text during transitions.

How do I make a cursor blink?

Add a CSS animation on a ::after pseudo-element that blinks.

Can I animate multiple text elements simultaneously?

Yes. Each element gets its own text animation.

Does TextPlugin work in React?

Yes. Target the text node via ref.

Try It Yourself

Build a typewriter effect.

<!DOCTYPE html>
<html>
<head>
    <title>GSAP Text Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12/TextPlugin.min.js"></script>
    <script>gsap.registerPlugin(TextPlugin);</script>
    <style>
        body { font-family: 'Courier New', monospace; padding: 20px; background: #1a1a2e; color: #4ecdc4; }
        .text-line { font-size: 20px; margin: 8px 0; }
        .cursor::after { content: '|'; animation: blink 0.7s infinite; color: #4ecdc4; }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
        button { background: #4ecdc4; border: none; padding: 8px 16px; color: #1a1a2e; font-weight: bold; border-radius: 4px; cursor: pointer; margin-top: 16px; }
    </style>
</head>
<body>
<h2 class="text-line cursor" id="headline"></h2>
<p class="text-line" id="subtitle"></p>
<p class="text-line" id="description"></p>
<button onclick="replayText()">Replay</button>
<script>
var tl = gsap.timeline({ paused: true });
tl.to('#headline', { text: 'GSAP Typing Effect', duration: 1.5, ease: 'none' })
  .to('#subtitle', { text: 'Animate text one character at a time', duration: 2, ease: 'none' })
  .to('#description', { text: 'Supports any font and blends seamlessly with other GSAP features.', duration: 2.5, ease: 'none' });

tl.play();

function replayText() {
    gsap.set(['#headline', '#subtitle', '#description'], { text: '' });
    tl.restart();
}
</script>
</body>
</html>

What's Next

Use CSS properties plugin.

CSS Plugin — CSS properties animation. Scroll Trigger Advanced — Advanced ScrollTrigger.

← Previous GSAP Draggable — Interactive Drag-and-Drop Elements Next → GSAP CSS Plugin — Animating CSS Properties and Variables

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Gsap