Text Split Animations
Overview
Text Split lets you break a text element into individual characters, words, or lines and animate each piece separately with a stagger delay between them. The result is the kind of cascading text reveal you see on award-winning agency sites -- letters fading in one by one, words sliding up in sequence, or lines wiping in from the bottom.
Text splitting works with any interaction type that supports From/To keyframes: Appear, Hover, Click, Mouse Move (Scrub), Scroll Scrub, and more. You set it up once, and the engine handles all the DOM splitting and stagger timing at runtime.
Prerequisites
- A text element selected on the canvas (heading, paragraph, or any element the designer recognizes as text).
- An interaction already added to the element (Appear, Hover, Click, Scroll Scrub, or Mouse Move).
Step-by-step
1. Select your text element and open an interaction
- Click on the text element on the canvas.
- In the right sidebar, open the Interact section.
- Either add a new interaction or click an existing one to edit it.
2. Choose a split mode with the Per dropdown
When the selected element is a text element, a Per dropdown appears in the interaction card (in Simple mode). This is where you choose how the text is divided.
| Value | Label in UI | Behavior |
|---|---|---|
element | Element (default) | No splitting. The entire text block animates as one unit. |
chars | Character | Each character becomes a separate animation target. |
words | Word | Each word becomes a separate animation target. |
lines | Line | Each visual line (based on line breaks and wrapping) becomes a separate animation target. |
3. Adjust the Stagger delay
When you choose any split mode other than Element, a Stagger field appears directly below the Per dropdown.
- The value is in seconds (default 0.03s, which is 30 milliseconds).
- Use the + and - buttons to increment or decrement by 0.01s.
- You can also type a value directly and press Enter or click away to confirm.
This delay is the time gap between each piece's animation start. For example, with a stagger of 0.05s and 10 characters, the last character begins animating 0.45s after the first.
4. Configure your From and To states
Click From and To to define what each split piece animates between. Common setups:
- Character fade-in: From opacity 0, To opacity 1.
- Word slide-up: From opacity 0 + offset Y 30px, To default (opacity 1, offset 0).
- Line wipe: From opacity 0 + offset Y 50px, To default.
Each split piece receives the same From/To animation -- the stagger delay is what creates the cascading effect.
5. (Optional) Configure advanced Stagger settings
For more control, click the gear icon to open Advanced Settings and navigate to the Stagger tab. This tab appears whenever the element is a text element or when the interaction targets multiple elements (via Scope).
Split Text
The same split mode selector from the main card, labeled Split Text here. Pick from Element, Character, Word, or Line.
Stagger toggle
A master on/off switch labeled Stagger. When turned on, the following sub-settings appear:
Delay
The delay between each target's animation start, in milliseconds (e.g., 100ms). This is the advanced counterpart to the inline Stagger field (which uses seconds). Default is 100ms.
From
Controls where the stagger sequence originates:
| Value | Label | Behavior |
|---|---|---|
first | First (default) | Starts from the first piece and cascades forward. |
last | Last | Starts from the last piece and cascades backward. |
center | Center | Starts from the middle and radiates outward. |
edges | Edges | Starts from both ends and meets in the center. |
Ease
The easing curve applied to the stagger distribution itself (not to each piece's animation). Options include Linear (default), Ease Out, Ease In Out, Ease In, Out Cubic, and Out Back.
Grid
Enable the Grid toggle to stagger based on a 2D grid layout. When enabled:
- Two number inputs appear for columns x rows (default 3 x 3).
- An Axis dropdown lets you choose X (columns) or Y (rows) as the stagger direction.
This is useful for grid-based text layouts or when animating a container whose children are arranged in a grid.
Random
Enable the Random toggle to randomize the stagger order instead of following a sequential pattern.
Tips
- Start with Characters for headlines. Character-level splitting on a short headline with 0.02-0.04s stagger creates a classic typewriter or decode effect.
- Use Words for paragraphs. Word-level splitting keeps long text readable while still feeling animated.
- Lines for large blocks. Line splitting is the most subtle option and works well on body text or multi-line descriptions.
- Pair with Spring easing. Set each piece's transition to Spring mode (Bouncy or Snappy preset) for a playful, organic feel.
- Combine with Scroll Scrub. Apply text split to a Scroll Scrub interaction so each character or word reveals as the visitor scrolls through a section.
- From: Center for impact. Set the Stagger From to Center on a headline so letters radiate outward from the middle -- a strong visual anchor.
- Keep stagger values small. For text with many characters, even 0.01s stagger adds up fast. Preview your animation to make sure the total sequence does not feel too slow.
Common issues
| Symptom | Likely cause | Fix |
|---|---|---|
| No splitting happens; the text animates as a single block | Per is set to Element | Change it to Character, Word, or Line. |
| Stagger field does not appear | Per is still set to Element, or the element is not recognized as text | Switch Per to a split mode. Make sure the element is a text element (not an image or container). |
| Animation takes too long to finish | Stagger value is too high relative to the number of pieces | Lower the stagger delay. For 50+ characters, try 0.01-0.02s. |
| Letters appear out of order | Random is enabled in Advanced Settings | Turn off the Random toggle in the Stagger tab. |
| Grid stagger does not look right | Grid dimensions do not match the actual layout | Adjust the column and row counts in the Grid setting to match your element's layout. |
Related articles
- Follow Mouse Interaction -- make elements track the cursor in real time.
- Mouse Move Scrub Animation -- tie any animation to cursor position.