ef-text

Animated text with character/word/line splitting.

Basic Usage

Word Split with Stagger

Use split="word" to animate each word independently with stagger delays.

Character-by-Character Animation

Use split="char" for character-level effects.

Line-by-Line Reveal

Use split="line" for line-based animations.

Custom Animations with registerAnimations()

Use registerAnimations() to define reusable animation styles globally.

Easing Options

Different easing functions create different animation feels.

StaggerMs Timing Variations

Control the delay between segments to create different rhythms.

Using --ef-seed for Random Variation

The --ef-seed CSS variable provides deterministic randomness per segment.

Lower Third

Multiple Segments Per Word

Create multiple segments for each text unit by using multiple ef-text-segment elements in the template.

Unregistering Animations

Remove previously registered animations when no longer needed.

const EFTextSegment = customElements.get('ef-text-segment');
EFTextSegment.unregisterAnimations('bounce');

ef-text-segment Reference

ef-text-segment elements are automatically created by ef-text when using split modes. Each segment represents a word, character, or line and can be styled and animated independently.

CSS Variables

Variable	Type	Description
--ef-index	number	Segment index (0, 1, 2, ...)
--ef-stagger-offset	time	Calculated stagger delay (e.g., "0ms", "100ms")
--ef-seed	number	Deterministic random (0-1) based on index

Technical Notes

• Segments are automatically created by ef-text when using split modes
• Segments inherit animation properties from parent ef-text element
• registerAnimations() uses adopted stylesheets for efficient global sharing
• Non-whitespace segments automatically become inline-block when animated to enable transforms
• Whitespace segments remain inline to preserve text flow