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:

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

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
Here is the source code for the default title slide template partial. Customize this template as required, then save the resutls to title-slide.html alongside your presentation.



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 then 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
:::


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}
auto-stretch will only apply on non-nested image, which means an image in a feature blocks (e.g fragments, layout panel, columns, … ) or a custom Divs will be ignored. For custom Divs, you can opt-in auto-stretch behavior by adding the class .r-stretch to the outer divs. In that the image within the blocks will be unwrapped below.



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 the use of 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 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, this 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
:::



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 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 this is 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 its 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) 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. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides.
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 in to 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 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:

Multiplex
RevealMenu
RevealChalkboard
PdfExport


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

Create a folder with the name you want for the plugin, here we’ll call it fullscreen.
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.
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]
Now add the plugin reference into your document YAML header, using the path of the folder your created:
format: 
 revealjs:
   revealjs-plugins:
     - fullscreen
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.