How do I make a typewriter effect in GSAP?

Register TextPlugin, then tween the `text` property of an element to your string with `ease: "none"`. GSAP reads the element's current text as the start and reveals the new text character by character over the duration. For a one-line type-on, that's the whole thing. If you need the text to delete and loop through multiple phrases, build a manual timeline instead, because TextPlugin only types in one direction.

What's the difference between TextPlugin and SplitText?

TextPlugin replaces the element's text content and reveals the new string character by character, so the characters just appear. SplitText splits the existing text into separate char, word, or line elements that you then animate (fade, rotate, slide, stagger). Use TextPlugin to swap or type a string, use SplitText when you want to move or transform the individual characters.

How do I type word by word instead of letter by letter?

Pass `text` as an object and set `delimiter: " "`. The default delimiter is an empty string, which reveals per character. Setting it to a space makes GSAP reveal one whole word per step. Any string works as a delimiter, so you can split on other characters too.

Why does TextPlugin strip the HTML inside my element?

TextPlugin overwrites the element's inner content with the tweened string, so any nested markup (links, spans, bold tags) inside the start text gets replaced. If you need to keep markup, animate a child element that holds only plain text, or use SplitText, which wraps the existing characters instead of rewriting them.

Do I need to register TextPlugin before using it?

Yes. Import it with `import { TextPlugin } from "gsap/TextPlugin"` and call `gsap.registerPlugin(TextPlugin)` once at module load. In Next.js or any SSR setup, register inside a `if (typeof window !== "undefined")` guard or inside your client-side effect. Without registration the `text` property is silently ignored and nothing types.

Text

TextPlugin

TextPlugin is a GSAP plugin that animates the text content of an element from its current string to a new one, swapping characters in across the tween's duration. It's the built-in way to build typewriter intros and live text replacement without scheduling each character by hand.

Updated June 30, 2026

Mechanics

How TextPlugin works

You register the plugin once, then add a text property to any tween. GSAP reads the element's current textContent as the start, the text value as the end, and reveals the new string character by character as the tween plays. The element's existing text is the start state, so you don't set a from value.

For more control, pass text as an object. value is the target string, delimiter sets the unit it reveals (the default splits per character, " " reveals word by word), and speed scales the duration to the string length so long and short strings type at a consistent pace. newClass and oldClass wrap the incoming and outgoing text in a span so you can style them differently.

object form

Use a linear ease

Typewriter motion reads best with ease: "none" so characters appear at a steady cadence. An ease like expo.out front-loads the reveal, which makes the typing feel like it stalls at the end.

When

Use it for

Typewriter hero intros where a single line types itself out on load
Live text replacement, swapping one label or status string for another ("Saving..." to "Saved")
Terminal and CLI-styled sections where the typing cadence carries the vibe
Word-by-word reveals via delimiter: " " when per-character is too granular

Alternatives

Use something else when

You need to transform the characters (fade, rotate, slide each one) rather than just reveal them, use SplitText and stagger the resulting chars
You want a glitch or decode reveal where characters scramble before settling, use ScrambleTextPlugin
The element contains markup you need to keep, TextPlugin overwrites the inner content, so nested tags get replaced
You need backspacing, looping through phrases, or per-character timing jitter, a manual GSAP timeline gives you that control (this is what the Annnimate Typewriter does)

All three text plugins are free

TextPlugin ships in GSAP core, and SplitText and ScrambleTextPlugin have been free for commercial use since Webflow made GSAP 100% free on April 30, 2025 (webflow.com/blog). There's no paid tier to reach for any of them.

In production

Used in these Annnimate components

TextPlugin is the shortest path to a typewriter or text-swap effect. Annnimate's text components solve the same problem with a manual timeline instead, because they need behavior TextPlugin doesn't cover: deletion, looping, and per-character jitter.

Typewriter types each phrase out, holds, then deletes it before the next, looping through the list. It sequences one tween per character on a GSAP timeline so it can also jitter per-character duration for a human rhythm, which TextPlugin's steady cadence can't do
Text Morph swaps one string for another by replacing the characters that change, the same live-text-replacement job TextPlugin targets, built character-aware so unchanged letters hold position

The takeaway: reach for TextPlugin first for a one-direction type-on or a simple swap. Drop to a hand-built timeline when you need to delete, loop, or vary the rhythm.

Where this sits

GSAP runs on roughly 2.2% of all websites (w3techs, June 2026), and TextPlugin is part of its core, so the typewriter pattern is available the moment GSAP is loaded with no extra install.

Used in components

See it running in production

TypewriterTypes out a list of phrases one letter at a time, pauses on each, then deletes it and moves to the next.

Text MorphLetters slide into new positions as you type, so the text feels alive as it changes.

FAQ

Common questions

How do I make a typewriter effect in GSAP?: Register TextPlugin, then tween the text property of an element to your string with ease: "none". GSAP reads the element's current text as the start and reveals the new text character by character over the duration. For a one-line type-on, that's the whole thing. If you need the text to delete and loop through multiple phrases, build a manual timeline instead, because TextPlugin only types in one direction.
What's the difference between TextPlugin and SplitText?: TextPlugin replaces the element's text content and reveals the new string character by character, so the characters just appear. SplitText splits the existing text into separate char, word, or line elements that you then animate (fade, rotate, slide, stagger). Use TextPlugin to swap or type a string, use SplitText when you want to move or transform the individual characters.
How do I type word by word instead of letter by letter?: Pass text as an object and set delimiter: " ". The default delimiter is an empty string, which reveals per character. Setting it to a space makes GSAP reveal one whole word per step. Any string works as a delimiter, so you can split on other characters too.
Why does TextPlugin strip the HTML inside my element?: TextPlugin overwrites the element's inner content with the tweened string, so any nested markup (links, spans, bold tags) inside the start text gets replaced. If you need to keep markup, animate a child element that holds only plain text, or use SplitText, which wraps the existing characters instead of rewriting them.
Do I need to register TextPlugin before using it?: Yes. Import it with import { TextPlugin } from "gsap/TextPlugin" and call gsap.registerPlugin(TextPlugin) once at module load. In Next.js or any SSR setup, register inside a if (typeof window !== "undefined") guard or inside your client-side effect. Without registration the text property is silently ignored and nothing types.

PreviousSplitTextSplitText is a GSAP plugin that breaks a block of text into per-character, per-word, or per-line wrappers so each unit can be animated independently.Nextgsap.timeline()gsap.timeline() creates a sequenced container for multiple tweens.

Related conceptsSplitText ScrambleText stagger