Typewriter

Types the element's existing content out character by character, powered by GSAP's TextPlugin. The text you write in the HTML is the text that gets typed - no duplication needed.

Single stream

A plain .typewriter types everything as one string. Pair it with .ease-none so characters appear at a constant rate instead of easing in.

Split typewriter

.typewriter-split reveals per-part instead of per-string: each word (or letter) fades in sequence, which reads like typing but keeps already-typed words individually animatable.

The typed value is captured once per element and refreshed only from settled DOM, so React re-renders and engine restarts can never leave the element stuck on an empty string.

<h2 class="typewriter ease-none order">Hello world</h2>
<p class="scroll typewriter-split letter time-4">Long intro copy…</p>