Animating text (split text).

Without split text, an animation on a heading treats the whole heading as a single element. Fade in: the entire heading appears at once.

With split text on, Glopzi splits the heading into pieces and animates them one by one with a small delay (stagger) between each. The same fade-in becomes a cascade, word-by-word or letter-by-letter.

In the right panel of any Time or Scroll animation:

• Find the Split text toggle.
• Turn it on. Two new fields appear: Split by and Stagger.
• Choose a split mode and (optionally) tune the stagger.

The properties you set on the animation now apply to each split piece. An opacity 0 to 1 fade with split-by-words and 0.05s stagger fades each word with a 50-millisecond gap between them.

• Words: most common. The heading splits at spaces. Each word animates as one piece.
• Lines: the heading splits at line wraps as they appear in the visitor’s viewport. Each line animates together. Useful for long paragraphs where word-by-word is too granular.
• Words and characters: combination. Words still animate as units, but if you also want character-level effects (like a hover on each letter), this mode preserves both granularities.

Pick the one that matches the visual rhythm of the motion. Cascading word reveals: words. Letter-by-letter accent: characters (via the combined mode).

Stagger is the delay between each piece’s start, in seconds. Smaller numbers feel quick and energetic; larger numbers feel deliberate and theatrical.

• 0.02 to 0.04: quick character reveals on short headings.
• 0.05 to 0.08: comfortable word reveals on most headings.
• 0.1 to 0.15: dramatic, deliberate cascade. Works for short headlines you want to land with weight.

The total animation duration is duration + (stagger * pieces). On a 10-word heading with 0.05s stagger and 1s duration, the whole reveal takes 1.5 seconds.

• Hero word reveal. Time animation, trigger load, opacity 0 to 1, translate Y 30 to 0, split by words, stagger 0.06.
• Scroll-driven character roll.Scroll animation tied to the heading’s entry into view, split by characters, opacity 0 to 1, rotate -10 to 0.
• Color sweep. Time animation, color changing across the heading word by word with a small stagger. Pairs well with a brand color highlight.
• Blur clear. Time animation, blur 8 pixels to 0, opacity 0 to 1, split by lines for long paragraphs that should resolve in parallel chunks.

• Layout reflow. Splitting wraps each word or character in its own element. On extremely long paragraphs, this can affect performance. For anything over a few hundred words, prefer line splits or skip split-text and animate the paragraph as a whole.
• Accessibility.Split-text wraps preserve readable order and screen-reader text. The heading is still announced as a single string. We don’t do anything that would break it.
• Justified text. Word-spacing changes in justified text can cause subtle jumps when a word animates in. If your text is justified and reveals look glitchy, switch to line mode or set the alignment to left for the animated heading.
• Mixed scripts.Languages without spaces (Japanese, Chinese) need character mode for granular animation; word splits won’t do anything useful.

• Time-based animations covers the host animation type.
• Scroll-based animations also supports split-text as a modifier.
• Easing shapes how each split piece arrives.