Typography / text · 4.1
Split-text stagger reveal
A departure board flipping into place.
A heading split into characters, words or lines, animated in with a time offset.
4 knobs
How it actually works
The most-used effect in the index, which is exactly why it is worth turning the knob on. Three options in one dropdown produce three genuinely different feels from one line of config, and most sites ship the first one they tried.
Wrap each unit in an element, then animate y and opacity with a stagger between them. The split unit is the config; everything else is timing. Vanilla is entirely possible for chars and words. Responsive line re-splitting on resize is the hard part that SplitText exists to solve.
The knobs, named
Split unit, stagger interval, travel distance, easing. The split unit is the biggest character change available for the least work anywhere in this catalog.
| Knob | Source | What it teaches |
|---|---|---|
| Split unit | sourced | The single biggest character change. Chars is mechanical, words is spoken, lines is cinematic. |
| Stagger interval | ours | Delay between units. At 0 it is a plain fade; past 60ms with chars it is a crawl. |
| Travel distance | ours | How far each unit rises. Small is confident; large is theatrical. |
| Easing | ours | The curve each unit runs. back-out overshoots, which is what makes it feel mechanical. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (author)
Codrops "From SplitText to MorphSVG: 5 Creative Demos Using Free GSAP Plugins". The article names the units, not the timings: the timing knobs above are marked ours.
- Seen on
- Codrops 5-GSAP-plugins demo 1.
- Dependencies
- GSAP + SplitText in the source (free since the 2025 Webflow sponsorship); vanilla here
- Difficulty
- trivial with SplitText; moderate vanilla
- Performance
- Cheap: transform and opacity.
- Accessibility and the floor
- Per-character spans fragment screen-reader output. Ours keeps the real sentence in one aria-label on the parent and marks the spans aria-hidden. Under reduced motion the heading renders whole and unsplit, which is the sourced guidance.
Notes
Composability. Stagger in, then run 4.5's weight axis on the settled text. The reveal is the entrance; the axis is the personality.