This tutorial guides you through creating animated text effects with ef-text. Each step builds on the previous one.

Step 1: Basic Word-by-Word Animation

Start with the simplest text animation — splitting text into words.

What you'll learn: How to split text by words and display each word as a separate segment.

Try it: Change split="word" to split="char" to see how the text splits differently.

Step 2: Add Stagger Timing

Add sequential timing so words appear one after another.

What you'll learn: How to use the stagger attribute to create sequential reveals.

Try it: Adjust stagger to "100ms" or "25ms" to make words appear faster or slower.

Step 3: Character-by-Character Typewriter

Switch to character splitting for a typewriter effect.

What you'll learn: How to split text by characters for letter-by-letter animations.

Try it: Experiment with different stagger values for character mode. Notice how characters within words stay together on the same line.

Step 4: Layered Effects with Templates

Use the template pattern to create multi-layer effects — one template, multiple segments per character.

What you'll learn: How to use templates to create multiple segments per text unit for layered effects.

Try it: Add a third ef-text-segment to the template for an additional glow layer.

Step 5: Line-by-Line Reveals

Split text by lines for paragraph-by-paragraph reveals.

What you'll learn: How to split text by newlines for multi-line animations.

Try it: Add more lines and adjust the stagger timing. Try easing="ease-out" for a different rhythm.

Next Steps

• See the Text Reference for complete property documentation
• See Text How-To Guides for specific tasks
• See Text Concepts for architectural explanations