EFFECTS

Type Writer

Splits text into characters and reveals them one at a time, like they're being typed.

Classes

ClassPlays
fx-type-writer-plOn page load
fx-type-writer-stWhen the element scrolls into view
fx-type-writerAutomatically, when its section scrolls into view

Options that matter

  • Duration — fx-duration-[n], default 0.05 seconds per character (this is short on purpose — it's how fast each character appears, not the whole animation).
  • Delay — fx-delay-[n], default 0.
  • Stagger — fx-stagger-[n], default 0.03 seconds between characters — this is what actually controls the typing speed.
  • Ease — fx-ease-[name], default none (linear).
  • Start position — fx-start-[pos], default top 85% (scroll-triggered only).

Long paragraphs mean a lot of characters — check the total time (roughly character count × stagger) doesn't drag on too long.

Example

<h2 class="fx-type-writer-pl fx-stagger-[0.02]">Typed one letter at a time</h2>