aa-split

aa-split splits an element into .aa-word, .aa-char, or .aa-line parts and stops there. Use it when you want a CSS-only stagger, a hover effect, or you’re driving the animation yourself. Powered by GSAP’s SplitText plugin.

Modes

aa-split is a single attribute with one mode token plus an optional mask flag.

Token	Effect
`words`	Split into `.aa-word` parts.
`chars`	Split into `.aa-char` parts.
`lines`	Split into `.aa-line` parts.
`lines-words`	Split into chars+words, group by line for cascading line waves.
`lines-chars`	Split into chars, group by line for cascading line waves.
`mask` (flag)	Wrap each split unit in `overflow: clip` for slide-up reveals.

Config attributes

Attribute	Default	Notes
`aa-split`	(required)	One mode token + optional `mask` flag. Example: `"lines mask"`.
`aa-stagger`	(off)	Seconds, or `"<unit> <line>"`. One value = unit stagger only. Two = unit then line.

lines-chars and lines-words keep the chars/words split but group the animation by line: chars within a line stagger by the first value of aa-stagger, while each line’s tween starts the second value later than the previous one — e.g. aa-stagger="0.02 0.2" spaces chars 0.02s apart and lines 0.2s apart. A single value reuses itself for both. With mask, the mask is applied at the line level (aa-line-mask).

| shorthand and -sm / -md / -lg / -xl suffixes work like elsewhere — e.g. aa-split="words|lines" splits to words on mobile and lines from md up.

Required GSAP plugins

gsap, SplitText (chars fall back to a regex splitter when SplitText is missing).

Live demo — words

The headline below is split into words. Hover any word — pure CSS picks up the .aa-word class to apply a per-word transform.

Hover any word in this headline.

Live demo — lines + mask

aa-split="lines mask" wraps each line in a clipped wrapper. On hover, CSS slides each line up out of the mask.

Hover this headline. Each line slides upward, clipped by its mask wrapper.

Live demo — combining with `text-fade-up`

Override the animation’s default split granularity by adding aa-split to a text animation. Each block below uses the same text-fade-up animation on a three-line heading and only differs by aa-split.

aa-split=“lines”

A three-line headline that fades up one line at a time, staggered top to bottom across the heading.

aa-split=“words”

A three-line headline that fades up one word at a time, staggered through the whole heading.

aa-split=“chars”

A three-line headline that fades up one character at a time, staggered through the whole heading.

aa-split=“lines mask”

A three-line headline that fades up one line at a time, each line clipped by its mask wrapper.

aa-split=“lines-chars” aa-stagger=“0.02 0.2”

A three-line headline where chars within each line burst in together while the lines themselves cascade.

aa-split=“lines-words mask” aa-stagger=“0.05 0.25”