quarto-more-fragments

Additional fragment animations for RevealJS presentations

An extension that uses the Animate.css library to add additional fragment animations to RevealJS presentations.

Installation

quarto add EmilHvitfeldt/quarto-revealjs-more-fragments

Quick Start

Add the filter to your YAML header:

---
title: My Presentation
format: revealjs
filters:
  - more-fragments
---

Then use any animation class with .fragment:

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

Use arrow keys or spacebar to trigger animations as you navigate through slides.

Examples

Overview

A general introduction to the extension’s functionality.

View Example Source Code

Magic.css Animations

Additional unique effects from Magic.css.

View Example Source Code

Letter-by-Letter Animations

Character-by-character reveal effects for text and headers.

View Example Source Code

Available Animations

Attention Seekers

These animations keep the element visible and animate when triggered:

Animation Animation Animation Animation
bounce flash pulse rubberBand
shakeX shakeY headShake swing
tada wobble jello heartBeat

Back Animations

Entrances Exits
backInDown backOutDown
backInLeft backOutLeft
backInRight backOutRight
backInUp backOutUp

Bouncing Animations

Entrances Exits
bounceIn bounceOut
bounceInDown bounceOutDown
bounceInLeft bounceOutLeft
bounceInRight bounceOutRight
bounceInUp bounceOutUp

Fading Animations

Entrances Exits
fadeIn fadeOut
fadeInDown fadeOutDown
fadeInDownBig fadeOutDownBig
fadeInLeft fadeOutLeft
fadeInLeftBig fadeOutLeftBig
fadeInRight fadeOutRight
fadeInRightBig fadeOutRightBig
fadeInUp fadeOutUp
fadeInUpBig fadeOutUpBig
fadeInTopLeft fadeOutTopLeft
fadeInTopRight fadeOutTopRight
fadeInBottomLeft fadeOutBottomLeft
fadeInBottomRight fadeOutBottomRight

Flippers

Animation
flip
flipInX
flipInY
flipOutX
flipOutY

Lightspeed

Entrances Exits
lightSpeedInLeft lightSpeedOutLeft
lightSpeedInRight lightSpeedOutRight

Rotating Animations

Entrances Exits
rotateIn rotateOut
rotateInDownLeft rotateOutDownLeft
rotateInDownRight rotateOutDownRight
rotateInUpLeft rotateOutUpLeft
rotateInUpRight rotateOutUpRight

Sliding Animations

Entrances Exits
slideInDown slideOutDown
slideInLeft slideOutLeft
slideInRight slideOutRight
slideInUp slideOutUp

Zooming Animations

Entrances Exits
zoomIn zoomOut
zoomInDown zoomOutDown
zoomInLeft zoomOutLeft
zoomInRight zoomOutRight
zoomInUp zoomOutUp

Specials

Animation
hinge
jackInTheBox
rollIn
rollOut

Magic.css Animations

Additional animations from Magic.css:

Category Entrances Exits
Bling puffIn, vanishIn puffOut, vanishOut
Perspective perspectiveDownReturn, perspectiveUpReturn, perspectiveLeftReturn, perspectiveRightReturn perspectiveDown, perspectiveUp, perspectiveLeft, perspectiveRight
Space spaceInDown, spaceInUp, spaceInLeft, spaceInRight spaceOutDown, spaceOutUp, spaceOutLeft, spaceOutRight
Boing boingInUp boingOutDown
Swash swashIn swashOut
Tin tinDownIn, tinUpIn, tinLeftIn, tinRightIn tinDownOut, tinUpOut, tinLeftOut, tinRightOut

Magic.css attention seekers (animate in place):

Animation
magic
twisterInDown
twisterInUp

Inline Usage

Animations also work on inline elements within text:

This sentence has a [bouncing]{.fragment .bounce} word in it.

The [quick]{.fragment .pulse} [brown]{.fragment .tada} [fox]{.fragment .wobble} jumps over the lazy dog.

Letter-by-Letter Animations

Animate text character by character with .fragment-letters. Each letter animates in sequence with a staggered delay, all triggered by a single fragment step (one click/keypress).

Basic Usage

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

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

On Headers

Letter animations work on headers too:

# Animated Title {.fragment-letters .bounceIn}

## Section Header {.fragment-letters .zoomIn}

Letter Speed Control

Control the stagger delay between letters with letter speed classes:

[Fast typing]{.fragment-letters .fadeIn .letter-fast}

[Slow reveal]{.fragment-letters .zoomIn .letter-slower}
Class Delay Between Letters
letter-faster 20ms
letter-fast 35ms
(default) 50ms
letter-slow 80ms
letter-slower 120ms

Combining with Animation Speed

You can combine letter stagger speed with animation duration:

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

[Slow dramatic zoom]{.fragment-letters .zoomIn .slow .letter-slower}
  • letter-* classes control the delay between each letter starting
  • faster/slow etc. control how long each letter’s animation takes

Speed Utilities

Control animation speed by adding a speed class alongside the animation:

::: {.fragment .bounceIn .fast}
This bounces in quickly!
:::
Class Duration
slower 3s
slow 2s
(default) 1s
fast 800ms
faster 500ms

Reversible Fragment Behavior

All animations are fully reversible when navigating backwards through your presentation. The reverse animation is designed to exit the way it came in, creating a natural undo effect:

Forward Animation Reverse Animation Reasoning
backInDown backOutUp Came from top, exits to top
backInLeft backOutRight Came from right, exits to right
slideInDown slideOutUp Slid down from top, slides back up
zoomInLeft zoomOutLeft Zoomed in from left, zooms back to left
bounceInRight bounceOutLeft Bounced in from left, bounces back to left

This means if you use backInDown, the element will:

  • Forward: Animate in from the top (backInDown)
  • Backward: Animate out to the top (backOutUp)

This creates an intuitive “rewind” effect rather than a mirrored animation.