Advanced Reveal

Title Slide

The main title slide is the first slide of the presentation, and its content is generated based on a variety document options (title, subtitle, date, author, institute, etc.).

Custom Background

If you want to provide a custom background for the title slide, then do the following:

  1. Use the title-slide-attributes key to provide background options.
  2. Within this key, specify any of the supported slide background options, but with data- prepended to them.

For example:

---
title: My Slide Show
title-slide-attributes:
  data-background-image: /path/to/title_image.png
  data-background-size: contain
  data-background-opacity: "0.5"
---

Custom Template

You can replace the default title slide entirely with your own template. To do this, specify a title-slide.html template partial. For example:

title: My Slide Show
format:
  revealjs:
    template-partials:
      - title-slide.html

Quarto natively supports a title slide which improves the handling of authors and affiliations. While it is backward compatible with author and institute, we now recommend that you use standard author metadata. To provide your own partial for title-slide.html, you can start from the source code for this fancier title slide template. Customize this template as required, then save the results to title-slide.html alongside your presentation.

If you prefer pandoc’s default title slide you can opt-in using title-slide-style: pandoc in your YAML — this uses this simpler title slide template partial. However, this simpler partial does not leverage our improved handling for Authors & Affiliations, so we recommend using the fancy one as a starter for custom title slides.

Centering

By default, the title slide is centered while all slides are top aligned (i.e. center: false). You can prevent the title slide centering by setting center-title-slide options:

title: My Slide Show
format:
  revealjs:
    center-title-slide: false

If center: true is set, center-title-slide will be ignored. There is currently no way to have content slide centered and title slides top aligned. For slide content centering, see Section 6.3.

Slide Transitions

Reveal supports a number of animated transition effects for both slide changes and slide background changes. By default no transitions are used, however you can enable them either globally or per-slide using the options described below.

Here are the available transition types:

Transition Description
none No transition (switch instantly)
fade Cross fade
slide Slide horizontally
convex Slide at a convex angle
concave Slide at a concave angle
zoom Scale the incoming slide so it grows in from the center of the screen.

Here’s how you would set the global transition style for both slides and backgrounds:

---
title: "Presentation"
format:
  revealjs:
    transition: slide
    background-transition: fade
---

You can also specify the transition-speed as default, fast, or slow:

---
title: "Presentation"
format:
  revealjs:
    transition: slide
    transition-speed: fast
---

You can also specify the transition and/or transition-speed for an individual slide:

## Slide Title {transition="fade" transition-speed="fast"}

You can also specify separate in and out transitions, for example:

## Slide Title {transition="fade-in slide-out"}

Slide Visibility

You can hide a slide by adding the visibility="hidden" attribute to the slide heading. For example:

## Slide Title {visibility="hidden"}

Uncounted Slides

When preparing a presentation it can sometimes be helpful to prepare optional slides that you may or may not have time to show. This is easily done by appending a few slides at the end of the presentation, however this means that the Reveal progress bar and slide numbering will hint that there are additional slides.

To “hide” those slides from the numbering system you can use visibility="uncounted". For example:

## Slide 1

## Slide 2

## Slide 3 {visibility="uncounted"}

Presentation Size

All presentations have a “normal” size, that is, the resolution at which they are authored. This default “normal” size is 1050 x 700, which is used to match as nearly as possible the aspect ratio of most laptops.

Reveal will automatically scale presentations uniformly based on the normal size to ensure that everything fits on any given display or viewport without changing the aspect ratio or layout of your content.

You can change the slide size, the margin around content, as well as set limits on content scaling using the following options:

Option Description
width Normal width (defaults to 1050)
height Normal height (defaults to 700)
margin Factor of the display size that should remain empty around the content (defaults to 0.1)
min-scale Smallest possible scale to apply to content (defaults to 0.2)
max-scale Largest possible scale to apply to content (defaults to 2.0)

Absolute Position

The absolute class lets you position elements at arbitrary positions on a slide. These elements have CSS position: absolute and can be placed relative to the top, left, bottom, and/or right edges of the slide.

For example, here we add the .absolute class to three images and give them each a distinct position on the slide (note that we use also width and height to control their dimensions):

![](image1.png){.absolute top=200 left=0 width="350" height="300"}

![](image2.png){.absolute top=50 right=50 width="450" height="250"}

![](image3.png){.absolute bottom=0 right=50 width="300" height="300"}

The following attributes can be used with absolute. All of these values can be specified in CSS units (e.g. px, em, etc.). If a number with no units is specified (as in the above example) then pixels are assumed.

Attribute Description
width Width of element
height Height of element
top Distance from top of slide
left Distance from left of slide
bottom Distance from bottom of slide
right Distance from right of slide

Note that default size of presentation slides is 1050 x 700. See Presentation Size for details on customizing this.

Layout Helpers

Reveal provides some helper classes for controlling the layout of content.

Stack Layout

The r-stack layout class lets you center and place multiple elements on top of each other. This is intended to be used together with fragments to incrementally reveal elements.

For example, here we create a div with the .r-stack class and then include 3 images (each of which uses .fragment so they display incrementally):

::: {.r-stack}
![](image1.png){.fragment width="450" height="300"}

![](image2.png){.fragment width="300" height="450"}

![](image3.png){.fragment width="400" height="400"}
:::

Fit Text

The r-fit-text class makes text as large as possible without overflowing the slide. This is great when you want BIG text without having to manually find the right font size. For example:

::: {.r-fit-text}
Big Text
:::

Center

The center class when applied to a slide, will vertically center the slide content by adding the appropriate spacing at the top of the slide. Vertical distances between elements will not be modified. For example:

## This will be centered {.center}

This text is moved as well

For controlling title slide centering, see Section 1.3.

Stretch

The r-stretch layout helper lets you resize an element, like an image or video, to cover the remaining vertical space in a slide. For example, here the image will automatically be resized to fit space remaining outside of the slide title and text before and after it:

## Slide Title

Here is an image:

![](image.png){.r-stretch}

Some text after the image.

For slides that contain only a single top-level image, the .r-stretch class is automatically applied to the image. You can disable this behavior by setting the auto-stretch: false option:

format:
  revealjs:
    auto-stretch: false

You can also disable auto-stretch for an individual slide by adding the .nostretch class:

## Slide Title {.nostretch}

Or apply .nostretch directly to an individual image:

![](image.png){.nostretch fig-align="center" width="800px"}

auto-stretch will only apply to non-nested images, which means an image in a feature block (e.g fragments, layout panel, columns, … ) or a custom Div will be ignored. For custom Divs, you can opt-in to auto-stretch behavior by adding the class .r-stretch to the outer div.

Limitation: Auto-stretch and Scrollable

When a slide is scrollable the image size calculations used by auto-stretch may not work well and images may not appear. Two solutions depending on your needs are:

  • Disable auto-stretch at the presentation level, auto-stretch: false, and use .r-stretch on individual images only where needed.

  • On slides that are scrollable, add the .nostretch class to disable auto-stretch on the slide.

Auto Animate

Revealjs can automatically animate elements across slides. All you need to do is add the auto-animate attribute to two adjacent slides and Auto-Animate will animate all matching elements between the two.

Here’s a simple example to give you a better idea of how it can be used. Note that the slides don’t have titles in this example (rather just the auto-animate attribute) however they could also include a title.

## {auto-animate=true}

::: {style="margin-top: 100px;"}
Animating content
:::

## {auto-animate=true}

::: {style="margin-top: 200px; font-size: 3em; color: red;"}
Animating content
:::

This example uses the margin-top property to move the element but internally Reveal will use a CSS transform to ensure smooth movement. This same approach to animation works with most animatable CSS properties meaning you can transition things like position, font-size, line-height, color, background-color, padding and margin.

Code Animations

You can also animate between code blocks to show changes in code. For example:

## {auto-animate="true"}

```r
# Fill in the spot we created for a plot
output$phonePlot <- renderPlot({
  # Render a barplot
})
```

## {auto-animate=true}

```r
# Fill in the spot we created for a plot
output$phonePlot <- renderPlot({
  # Render a barplot
  barplot(WorldPhones[,input$region]*1000, 
          main=input$region,
          ylab="Number of Telephones",
          xlab="Year")
})
```

Movement Animations

Animations are not limited to changes in style. Auto-Animate can also be used to automatically move elements into their new position as content is added, removed or rearranged on a slide. All without a single line of inline CSS. For example, here the delta between the content on two slides is implicitly animated:

## {auto-animate=true}

Animation

## {auto-animate=true}

Implicit

Animation

Element Matching

When you navigate between two auto-animated slides we’ll do our best to automatically find matching elements in the two slides. For text, we consider it a match if both the text contents and node type are identical. For images, videos and iframes we compare the src attribute. We also take into account the order in which the element appears in the DOM.

In situations where automatic matching is not feasible you can give the objects that you want to animate between a matching data-id attribute. We prioritize matching data-id values above our automatic matching.

Here’s an example where we’ve given several blocks a matching ID since automatic matching has no content to go on. This example also makes use of some additional animation attributes (auto-animate-easing and auto-animate-delay), which we’ll describe in the next section.

## {auto-animate=true auto-animate-easing="ease-in-out"}

::: {.r-hstack}
::: {data-id="box1" auto-animate-delay="0" style="background: #2780e3; width: 200px; height: 150px; margin: 10px;"}
:::

::: {data-id="box2" auto-animate-delay="0.1" style="background: #3fb618; width: 200px; height: 150px; margin: 10px;"}
:::

::: {data-id="box3" auto-animate-delay="0.2" style="background: #e83e8c; width: 200px; height: 150px; margin: 10px;"}
:::
:::

## {auto-animate=true auto-animate-easing="ease-in-out"}

::: {.r-stack}
::: {data-id="box1" style="background: #2780e3; width: 350px; height: 350px; border-radius: 200px;"}
:::

::: {data-id="box2" style="background: #3fb618; width: 250px; height: 250px; border-radius: 200px;"}
:::

::: {data-id="box3" style="background: #e83e8c; width: 150px; height: 150px; border-radius: 200px;"}
:::
:::

Animation Settings

You can override specific animation settings such as easing and duration either for the whole presentation, per-slide or individually for each animated element. The following configuration attributes can be used to change the settings for a specific slide or element:

Attribute Default Description
auto-animate-easing ease A CSS easing function.
auto-animate-unmatched true Determines whether elements with no matching auto-animate target should fade in. Set to false to make them appear instantly.
auto-animate-duration 1.0 Animation duration in seconds.
auto-animate-delay 0 Animation delay in seconds (can only be set for specific elements, not at the slide level).
auto-animate-id absent An id tying auto-animate slides together.
auto-animate-restart absent Breaks apart two adjacent auto-animate slides (even with the same id).

You can override the global defaults for easing, unmatched, and duration as follows:

---
title: "My Slide"
format:
  revealjs:
    auto-animate-easing: ease-in-out
    auto-animate-unmatched: false
    auto-animate-duration: 0.8
---

Fragments

Fragments are used to highlight or incrementally reveal individual elements on a slide. Every element with the class fragment will be stepped through before moving on to the next slide.

Note that fragments as discussed here are a relatively advanced form of incremental content display—see Incremental Lists for documentation on creating incremental bullet lists and inserting content pauses in slides.

The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment. For example:

::: {.fragment}
Fade in
:::

::: {.fragment .fade-out}
Fade out
:::

::: {.fragment .highlight-red}
Highlight red
:::

::: {.fragment .fade-in-then-out}
Fade in, then out
:::

::: {.fragment .fade-up}
Slide up while fading in
:::

Fragment Classes

Here are all of the available fragment classes:

Name Effect
fade-out Start visible, fade out
fade-up Slide up while fading in
fade-down Slide down while fading in
fade-left Slide left while fading in
fade-right Slide right while fading in
fade-in-then-out Fades in, then out on the next step
fade-in-then-semi-out Fades in, then out to 50% on the next step
grow Scale up
semi-fade-out Fade out to 50%
shrink Scale down
strike Strike through
highlight-red Turn text red
highlight-green Turn text green
highlight-blue Turn text blue
highlight-current-red Turn text red, then back to original on next step
highlight-current-green Turn text green, then back to original on next step
highlight-current-blue Turn text blue, then back to original on next step

Nested Fragments

Multiple fragments can be applied to the same element sequentially by wrapping it. The following example will fade in the text on the first step, turn it red on the second and partially fade out on the third:

::: {.fragment .fade-in}
::: {.fragment .highlight-red}
::: {.fragment .semi-fade-out}
Fade in > Turn red > Semi fade out
:::
:::
:::

Fragment Order

By default fragments will be stepped through in the order that they appear in the DOM. This display order can be changed using the fragment-index attribute. Note that multiple elements can appear at the same index:

::: {.fragment fragment-index=3}
Appears last
:::

::: {.fragment fragment-index=1}
Appears first
:::

::: {.fragment fragment-index=2}
Appears second
:::

Custom Fragments

Custom effects can be created by specifying CSS styles for .fragment.effectname and .fragment.effectname.visible. The visible class is applied to each fragment as they are navigated through during the presentation. A custom class can be added to each fragment to tell reveal.js to avoid applying its default fade-in fragment styles.

For example, the following defines a fragment style where elements are initially blurred but become focused when stepped through.

::: {.fragment .custom .blur}
First item to be unblurred
:::

::: {.fragment .custom .blur}
Second one to be revealed
:::

with this CSS for the style associated with blur class.

.reveal .slides section .fragment.blur {
  filter: blur(5px);
}

.reveal .slides section .fragment.blur.visible {
  filter: none
}

Parallax Background

If you want to use a parallax scrolling background, add the parallax-background-image and parallax-background-size options. For example:

---
title: "Presentation"
format:
  revealjs:
     parallax-background-image: background.png
     parallax-background-size: "2100px 900px"
     parallax-background-horizontal: 200
     parallax-background-vertical: 50
---

Note that the parallax-background-horizontal and parallax-background-vertical options are not required (the defaults shown above will be used if they are not specified).

Vertical Slides

Reveal uses classic linear slide navigation by default. If you wish you can also configure slide navigation to nest multiple slides within a single top-level slide to create a vertical stack.

Use the navigation-mode option to fine tune Reveal navigation behavior:

Navigation Mode Behavior
linear Left/right arrows keys step through all slides (both horizontal and vertical).
vertical Left/right arrow keys step between horizontal slides. Up/down arrow keys step between vertical slides. Space key steps through all slides (both horizontal and vertical).
grid When enabled, stepping left/right from a vertical stack to an adjacent vertical stack will land you at the same vertical index.

If you use vertical or grid navigation, you should structure your slides using level 1 headings for the horizontal axis and level 2 headings for the vertical axis. For example:

---
title: "Presentation"
format:
  revealjs:
    navigation-mode: vertical
---

# Slide 1

## Slide 1.1

## Slide 1.2

# Slide 2

## Slide 2.1

## Slide 2.2

Slide Controls

When you enable vertical or grid navigation, controls will appear to provide a visual cue to where you are in the presentation (e.g. if there are vertical slides below you’ll see a down control).

By default these controls appear at the edges of the presentation, you can position them in the bottom right corner using the controls-layout option. You can also provide an extra visual cue to viewers that the controls are available using the controls-tutorial option. For example:

---
title: "Presentation"
format: 
  revealjs:
    navigation-mode: vertical
    controls-layout: bottom-right
    controls-tutorial: true
---

Note that using controls-layout: bottom-right isn’t compatible with including a logo (as the logo appears in the bottom right corner as well).

You can also disable the controls entirely with controls: false.

Warning

While vertical slides do provide some additional flexibility over the traditional linear model, they are in practice very confusing for end users (mostly because they are so unexpected). Users will often skip the vertical content because they simply don’t know it’s there.

If your content benefits from vertical orientation (e.g. you have optional drill-down content that you don’t want in the main flow of the presentation), you can by all means use the vertical mode. Just know that if you distribute your slides to users they will very likely not end up viewing any of the vertical content.

Touch Navigation

You can swipe to navigate through a presentation on any touch-enabled device.

If you wish to disable this you can set the touch option to false:

---
title: "Presentation"
format:
  revealjs:
    touch: false
    controls: true
---

Note that we also enable controls at the same time (as users on phones or tablets don’t have access to a keyboard).

Reveal Plugins

To use Revealjs plugins, you need to package them into a directory with a config file (plugin.yml). The config file lets Quarto know how to inject the plugin into the presentation (e.g. what scripts and/or css files to include, what the default configuration should be, etc.).

See the source code of the plugins that are built into Quarto Reveal for examples:

https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/formats/revealjs/plugins

To use a plugin, just include a reference to its directory in the list of revealjs-plugins. For example:

---
title: "Presentation"
format:
  revealjs:
    revealjs-plugins:
      - myplugin
---

Note that many of the most popular Reveal plugins are already included with the Quarto version of Reveal, so there is no need to include them separately. Built-in plugins include:

Example

Let’s show an example with the fullscreen plugin. Here are the steps to bundle this plugin to use within your Quarto HTML presentation:

  1. Create a folder with the name you want for the plugin, here we’ll call it fullscreen.

  2. Download the plugin files into the created folder. Here the plugin only have a JS file called plugin.js that you can find on the repo rajgoel/reveal.js-plugins. You can keep the name or rename it, e.g fullscreen.js.

  3. In that folder add a plugin.yml file, as in Quarto Reveal examples.

    • name is a mandatory field which should be the name of the JS function the JS plugin is defining. Open the JS script you downloaded to look for it.
    • Other fields are for the resources to be used. In our example, only a JS script so we’ll use script

    Our plugin.yml would be:

    name: RevealFullscreen
script: [fullscreen.js]

  4. Now add the plugin reference into your document YAML header, using the path of the folder your created:

    format: 
 revealjs:
   revealjs-plugins:
     - fullscreen

  5. The custom plugin will be loaded in your presentation and you can use it. The plugin fullscreen documentation shows an example of adding a Map fullscreen in a slide by adding an attribute on the section, and using stretch on the content. This would translate to having this slide in the .qmd file:

    ## {fullscreen=true}

<iframe class="stretch" data-src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d61206.89156051744!2d-151.77366863890407!3d-16.50433878928727!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sde!4v1467468929561"></iframe>

Learning More

See these articles lo learn more about using Reveal:

  • Reveal Basics covers the basic mechanics of creating presentations.
  • Presenting Slides describes slide navigation, printing to PDF, drawing on slides using a chalkboard, and creating multiplex presentations.
  • Reveal Themes talks about using and customizing existing themes as well as creating brand new themes.