Split Text Animation

Split Text Animation allows you to animate text by breaking it into characters, words, or lines, then applying motion to each piece individually.

This feature is ideal for creating cinematic titles, hero headlines, and high-impact text reveals that feel dynamic and intentional.

Once enabled, UiCore Animate automatically wraps the text into the selected split parts and controls the timing between them, giving you a smooth, professional result without custom scripting.

Enabling Split Text Animation

From Animate Controller

1. Open the Animate Controller.
2. Edit any Heading, Text Editor, or compatible Elementor widget.
3. Toggle Split Text Animation.
4. Adjust the animation type and timing controls to match your design.

From Style Tab

1. Edit any Heading, Text Editor, or compatible Elementor widget.
2. Open the Style tab → Split Text Animation panel.
3. Toggle Animate by Characters.
4. Adjust the animation type and timing controls to match your design.

Settings

Below is a detailed breakdown of every control included in the Split Text Animation panel.

Split By

Controls how the text is divided:

Char – Animates each character individually:

Word – Animates each word as a unit:

Line – Animates the text line by line (layout-dependent):

Tip: Character animation feels more cinematic and technical. Word animation feels cleaner and easier to read for longer headlines.

Animation

Select the animation style applied to each split element.

Below is the complete list of available animations:

Fade Animations

• Fade In Up
• Fade In Up Blur
• Fade In Up Cut
• Fade In Up Alt
• Fade In Up Alt Cut
• Fade In Down
• Fade In Down Cut
• Fade In Left
• Fade In Left Cut
• Fade In Right
• Fade In Right Cut
• Fade In
• Fade In Blur

Zoom & Scale Animations

• Zoom In
• Scale In

Roll Animation

• Roll In

Zoom Out Animations

• Zoom Out
• Zoom Out Down
• Zoom Out Left
• Zoom Out Right
• Zoom Out Up

Each animation is applied sequentially to the characters/words/lines based on your Stagger value.

Speed

Controls how long the animation lasts for each split unit. Defined in milliseconds.

Example:

• 1500ms = 1.5 seconds (slower, more dramatic).
• 600ms = fast and energetic.

Animation Delay

Sets a delay before the animation sequence begins. Useful when coordinating multiple on-page animations.

Example use cases:

• Delay the headline animation until after a background transition.
• Stack multiple elements to animate one after another.

Stagger

Defines the time gap between each animated part.

A low value = fast chain reaction. A high value = slow, cascading reveal.

Examples:

• 10–20ms → energetic, snappy movement.
• 30–80ms → soft, elegant cascades.
• 100ms+ → dramatic, theatrical reveals.

Stagger is the key to creating a professional “cinematic” effect.