GSAP Text Rotator — Free TextPlugin Typing Snippet

The rotating typed word — "Build products that convert… retain… delight…" — is the hardest-working headline pattern in SaaS. This snippet drives it with GSAP's TextPlugin, which tweens the *string content* of an element the way other plugins tween numbers: each word types in character by character, holds while the caret blinks, then backspaces out, forever. No character spans, no CSS steps() hacks — the DOM's actual text changes per tick.

TextPlugin tweens strings, not styles

gsap.to(el, { text: 'convert' }) interpolates from the element's current text to the target: at 40% progress the element genuinely contains the first 40% of the diff. That's fundamentally different from the width-mask typewriter trick (where full text hides behind a clipped box) — here, copy-pasting mid-animation yields partial text, screen readers see real content states, and no measuring or masking exists. Deleting is just tweening to '', which removes characters from the end — a backspace for free.

Per-word durations keep the typing speed constant

Durations are computed from length: w.length × 0.09 to type, × 0.05 to delete. A fixed one-second duration would type "scale" lazily and "delight" frantically; scaling by character count locks the *per-character* rhythm (~90ms type, ~50ms delete — deletion reads natural when roughly twice as fast, matching how people hammer backspace). ease: 'none' matters too: any easing would make characters appear in accelerating clumps instead of a steady keystroke cadence.

The empty-tween hold is a timeline idiom

Between typing and deleting sits tl.to({}, { duration: 1.3 }) — a tween on an empty object that animates nothing but occupies time. It's the cleanest way to insert a reading pause inside a builder loop (position parameters would need running offsets; delays attach awkwardly to the wrong tween). During the hold, the CSS caret blinks via steps(1), exactly like an idle terminal.

One repeating timeline builds itself from data

The WORDS.forEach loop appends type–hold–delete triplets sequentially onto a single repeat: -1 timeline. Adding a fifth word is adding an array entry; the timeline's total duration self-adjusts. Because the last word deletes back to empty and the first tween types from empty, the loop seam is invisible.

Layout is reserved so the sentence never dances

The slot span holds min-width: 5.4ch (sized past the longest word) with left-aligned text, so the sentence doesn't reflow as words grow and shrink. The gradient on the word survives text changes because background-clip: text is a style on the element — only its text nodes are being rewritten.

Caret is CSS, positioned by layout

The caret is a separate inline-block after the word span, so it naturally rides the text's right edge as characters appear and vanish — no JS positioning. Its steps(1) blink runs continuously; during typing the constant motion masks the blink, and during holds it reads as idle.

Customizing it

Edit WORDS, retune the per-character constants, or use text: { value: w, delimiter: ' ' } to type word-by-word for long phrases. Related: scroll-scrubbed typing in scroll typewriter, glyph-churn transitions in scramble text links, the vanilla typewriter, and slot-machine words in word flip hero.