Fragments

Fragment support is RevealJS-only. In all other HTML formats, fragment classes are automatically stripped and all events display statically.

Basic fragment reveal

Add .fragment to individual .event divs to reveal them one at a time as you advance the presentation.

::: timeline
::: {.event data-label="2020"}
**Project Started**
:::
::: {.event .fragment data-label="2021"}
**First Release**
:::
::: {.event .fragment data-label="2022"}
**Major Update**
:::
:::

The first event is always visible; subsequent events appear on each advance.

Pan modes

For timelines with more events than fit on a slide, two pan modes keep the active event in view.

Class on .timeline	Behavior
.fragment-slide	Centers the active event in the viewport on each advance
.fragment-conveyor	Steps only when the next event would be clipped by the slide edge

Pan modes work with all layout variants.

fragment-slide

::: {.timeline .horizontal .fragment-slide}
::: {.event data-label="2019"}
**Idea Born**
:::
::: {.event .fragment data-label="2020"}
**Project Started**
:::
...
:::

fragment-conveyor

::: {.timeline .horizontal .fragment-conveyor}
...
:::

Vertical pan

::: {.timeline .vertical .fragment-conveyor}
...
:::

Snake pan

::: {.timeline .snake .fragment-conveyor}
...
:::