Text Animations

intermediate

SplitText presets, typewriter, and scramble text — splitting by characters, words, and lines.

How SplitText Works

GSAP's SplitText plugin splits a text element into individual characters, words, or lines — each wrapped in a span. Etch Motion animates each span with a stagger delay for wave-like text reveals. After animation completes, the original text is restored (SplitText revert). The module is only loaded on pages with text-* presets.

SplitText works best on plain text elements. Complex nested HTML may not split as expected.

Split by Words

Most readable option. Each word animates individually. Presets: text-fade-up (words fade and slide up), text-fade-down (words fade and slide down). Good for subheadings and short paragraphs.

data-etch-motion="text-fade-up"
data-etch-motion-trigger="scroll"
data-etch-motion-split="words"
data-etch-motion-stagger="0.05"

Split by Characters

Most dramatic. Each letter animates individually. Presets: text-rotate-in (chars rotate from 8deg below baseline), text-blur-in (chars deblur from 8px), text-scale-in (chars scale from 0 with back.out bounce), text-wave (chars in a wave pattern with rotation). Best for hero headlines.

data-etch-motion="text-wave"
data-etch-motion-trigger="scroll"
data-etch-motion-split="chars"
data-etch-motion-stagger="0.04"

A console warning appears when 100+ split elements exist on a page, helping catch performance issues.

Split by Lines (Masked)

Each line slides from behind a clip mask (overflow: hidden wrapper). Presets: text-slide-up (lines reveal upward), text-slide-down (lines reveal downward). The split_wrapper: true config wraps each line in a container. Very polished for multi-line text.

data-etch-motion="text-slide-up"
data-etch-motion-trigger="scroll"
data-etch-motion-split="lines"
data-etch-motion-stagger="0.1"

Typewriter & Scramble

typewriter types out text character by character with an optional blinking cursor. Speed is controlled by the duration attribute (seconds per character). Does not use SplitText. text-scramble decodes from random characters to the final text using ScrambleTextPlugin (loaded conditionally). Character set is configurable.

data-etch-motion="typewriter"
data-etch-motion-trigger="scroll"
data-etch-motion-duration="0.05"

data-etch-motion="text-scramble"
data-etch-motion-trigger="scroll"
data-etch-motion-scramble-chars="upperCase"