Appearance
Typewriter
The Typewriter plugin animates text as if it is being typed one character at a time. It supports an optional blinking cursor, word-level typing via delimiter, and full control over cursor appearance and blink behaviour.
typewriter is a plain tween property - it sits alongside x, opacity, scale, or any other property in the same animate() call, and works inside timelines just like any other tween. All standard options (duration, ease, delay, stagger, onStart, onUpdate, onComplete, and so on) apply as normal.
Basic Typing
Pass a string directly to the typewriter property to type from the element's current text to the new value.
Basic Usage
Cursor
Set cursor to any string to append a blinking cursor after the typed text. blinkWhileTyping: false keeps the cursor solid during the typing phase and only starts blinking once finished - this matches the behaviour of a real terminal cursor.
Type & Delete
Use a timeline to sequence the type-in and delete phases. Add a delay on the second tween to pause at the end before deleting. Animating toward an empty string reverses the effect.
Composing with Other Properties
Because typewriter is just a tween property, it animates in parallel with anything else in the same call - transforms, opacity, colour, or any other property. Callbacks like onComplete work exactly as they do on any other tween.
Word-Level Typing
Setting delimiter: ' ' types one whole word per step instead of one character. Combine with a stepped or power ease for a telegraphic feel.
- The cursor element is injected as a
<span class="animx-cursor">inside an inline wrapper. The@keyframes animx-blinkrule is injected into<head>once on first use.