More Fragments

Additional fragment animations for RevealJS

What is this?

This extension provides additional fragment animations for RevealJS presentations.

Animations are powered by Animate.css

All animations work forwards and backwards!

Basic Usage

Use any animation class with .fragment:

::: {.fragment .bounceIn}
This text bounces in!
:::

This text bounces in!

Inline Animations

Animations work on inline elements too:

The [quick]{.fragment .backInUp} [brown]{.fragment .tada}
[fox]{.fragment .bounceIn} jumps.

The quick brown fox jumps over the lazy dog.

Attention Seekers

These animations keep elements visible and animate when triggered:

bounce

pulse

tada

wobble

heartBeat

jello

Entrance Animations

Elements appear with directional movement:

backInUpDown

bounceInLeft

zoomIn

slideInRight

rotateIn

jackInTheBox

Exit Animations

Elements disappear with directional movement:

fadeOut

bounceOut

zoomOut

slideOutLeft

rotateOut

hinge

Speed Utilities

Control animation speed with utility classes:

slower (3s)

slow (2s)

default (1s)

fast (800ms)

faster (500ms)

Reversible Behavior

All animations reverse naturally when navigating backwards.

backInUpDown enters from top…

…and exits back to top with backOutUp

Try pressing the left arrow to see animations reverse!

Header Animations

Headers can now be animated as fragments too!

Use the same syntax: ## Title {.fragment .bounceIn}

Fast Header

Speed utilities work on headers:

## Fast Header {.fragment .zoomIn .faster}

Whole Slide Animation

This entire slide animates as a single fragment.

Both the header and content animate together.

Use .fragment .whole-slide instead of just .fragment.

Animated Plots

Wrap code chunks in fragment divs to animate plots:

Sequential Plot Animations

Whole Slide with Plot

The title and plot animate together as one fragment.

Learn More

See the full animation gallery for all available animations.

See letter-by-letter animations for character reveal effects.

Visit Animate.css for animation documentation.