quarto-revealjs-magic-move

Animated Magic Move transitions for Quarto revealjs presentations

Code, math, and SVG output morph smoothly between states instead of hard-cutting, so viewers can visually track what changed. Built on Quarto’s native syntax highlighting, with no external JavaScript dependencies.

Installation

quarto add emilhvitfeldt/quarto-revealjs-magic-move

Then add the plugin to your document’s YAML header:

---
format: revealjs
revealjs-plugins:
  - magic-move
---

Usage

There are two ways to mark up a magic-move sequence: div-based (fragments within a single slide) and slide-based (consecutive slides).

Div-based (fragments)

Wrap consecutive code blocks in a magic-move div. Each block becomes a step, and pressing space/arrow keys steps through the animation as fragments on one slide.

::: magic-move

```javascript
if (condition) a else b
```

```javascript
if (condition) {
  a
} else {
  b
}
```

:::

Slide-based

Add the .magic-move class to consecutive slide headers instead. Each slide is a full step, and the animation plays as you navigate from one slide to the next.

## Step 1 {.magic-move}

```r
x <- 1
```

## Step 2 {.magic-move}

```r
x <- 1
y <- 2
```

A slide without .magic-move breaks the sequence, so you can freely mix animated and regular slides.

What can animate

Magic-move works on:

  • Code blocks (any language Quarto highlights) — tokens are matched and moved between states
  • Math ($$ ... $$) — equations morph between steps
  • SVG output (e.g. dev: svg R chunks with ggplot2 or grid graphics) — shapes and paths animate between states

Limitations

  • Token matching is content-based; significantly different code may fade in/out instead of animating smoothly
  • Coarse tokenization from Quarto’s syntax highlighter means very fine-grained punctuation animation isn’t always perfect

Examples

Code — div-based fragments

Code — slide-based

License

MIT