Clicks and animation

Steps: <Click>, <After>, <Clicks>

A click (a fragment, in reveal.js’s words) is a step within a slide. Pressing next walks a slide’s clicks before it moves on, and going back undoes each one.

<Click>Appears on the first click.</Click>
<After>Appears with the previous click, not a new one.</After>

<Clicks>

- One point
- at a time,
- in order

</Clicks>

<Click> takes:

Prop	Meaning
at	when: at={3} (absolute), at="+2" (relative to the previous), at={[2, 5]} (shown from 2, hidden at 5)
hide	hide at that step instead of showing
effect	how it arrives (below)

<Clicks> wraps a list (or any children) and reveals one item per click; every={2} reveals two at a time, depth reaches into nested lists, and effect applies to each item.

Effects: fade-in (the default), fade-out, fade-up, fade-down, fade-left, fade-right, fade-in-then-out, fade-in-then-semi-out, semi-fade-out, current-visible, grow, shrink, strike, highlight-red, highlight-green, highlight-blue, and the highlight-current-* variants that highlight only while it is the current step.

The slide’s total number of steps is counted from what its components ask for, so it follows any change you make. When a component can’t announce its steps — your own, for instance — set clicks: N in the slide’s frontmatter.

Transitions between slides

transition: slide # none · fade · slide · convex · concave · zoom · view-transition
transitionSpeed: fast # default · fast · slow
backgroundTransition: fade

Set them in the headmatter for the whole deck or on one slide. -in/-out suffixes give a slide different entrance and exit transitions, as in reveal.js. Under prefers-reduced-motion the transitions are skipped.

Auto-animate

Put autoAnimate: true on consecutive slides and elements with the same data-id move between their two positions — position, size, colour and radius interpolate (reveal.js’s FLIP, in React).

---
autoAnimate: true
---

<div data-id="box" className="box small" />

---

## autoAnimate: true

<div data-id="box" className="box big" />

Deck-wide: autoAnimateEasing, autoAnimateDuration (seconds) and autoAnimateUnmatched.

Motion

<Motion> animates an element through states keyed to clicks:

<Motion
  initial={{ x: -80, opacity: 0 }}
  enter={{ x: 0, opacity: 1 }}
  clicks={{ "click-1": { x: 120 }, "click-2": { scale: 1.4 } }}
>
  <div className="box" />
</Motion>

Auto-slide

autoSlide in the headmatter (milliseconds between steps, 0 to disable) or on one slide; autoSlideStoppable lets a key press stop it. A deck that auto-slides still keeps the audience in step, because the deck’s own advances carry a source and never end anyone’s follow.