Letter-by-Letter Animations

Character-by-character reveal effects

Basic Letter Animation

Text animates letter by letter with a single click:

Hello World

Welcome to RevealJS

Basic Usage

[Hello World]{.fragment .letters .bounceIn}

[Welcome to RevealJS]{.fragment .letters .fadeIn}

Use .fragment .letters with any animation class.

Letter Animation Speeds

Control the stagger delay between letters:

Faster (20ms)

Fast (35ms)

Default (50ms)

Slow (80ms)

Slower (120ms)

Speed Classes

[Faster]{.fragment .letters .fadeIn .letter-faster}
[Fast]{.fragment .letters .fadeIn .letter-fast}
[Default]{.fragment .letters .fadeIn}
[Slow]{.fragment .letters .fadeIn .letter-slow}
[Slower]{.fragment .letters .fadeIn .letter-slower}

Class	Delay
letter-faster	20ms
letter-fast	35ms
(default)	50ms
letter-slow	80ms
letter-slower	120ms

Different Animation Styles

Various animations work with letters:

Bounce effect

Zoom from small

Slide from left

Rotate in

Animation Examples

[Bounce]{.fragment .letters .bounceIn}
[Zoom]{.fragment .letters .zoomIn}
[Slide]{.fragment .letters .slideInLeft}
[Rotate]{.fragment .letters .rotateIn}
[Fade]{.fragment .letters .fadeInUp}
[Back]{.fragment .letters .backInDown}

Any Animate.css animation works!

Combining Speed Utilities

Letter stagger + animation duration:

Quick bounce

Slow dramatic zoom

Combined Speed Syntax

[Quick bounce]{.fragment .letters .bounceIn .faster .letter-fast}

[Slow zoom]{.fragment .letters .zoomIn .slow .letter-slower}

• letter-* = delay between letters starting
• faster/slow = animation duration per letter

Header Animation

Letter-by-letter works on headers too!

Header Syntax

# Title {.fragment .letters .bounceIn}

## Subtitle {.fragment .letters .zoomIn .letter-fast}

Same syntax as inline, just on the header line.

Another Header

Headers support all the same options.