Animate Xaringan Slide Transitions

xaringan is an excellent package for creating slideshows with remark.js using R Markdown. For an example presentation showing off all of xaringan’s ninja presentation skills, take a look at the introductory presentation.

You can easily add slide transitions and animations to your xaringan presentation using animate.css. It turns out that remark.js supports animations via animate.css, which means that xaringan does, too!

tl;dr: Add animate.css to your slide’s CSS and add animated and the animation class to a slide’s class to add a transition. Check out this gist for a quick example.

Add animate.css to your slide’s css

The first thing you need to do to add animations is to include animate.css in the css argument to moon_reader(). You can download the animate.css file into your slides directory

download.file(
  "https://raw.githubusercontent.com/daneden/animate.css/master/animate.css",
  "animate.css"
)

and then list animate.css in the css YAML section.

output:
  xaringan::moon_reader:
    lib_dir: libs
    css: [default, default-fonts, animate.css]

Or if you’ll have reliable internet during your presentation you can link directly to a CDN.

output:
  xaringan::moon_reader:
    lib_dir: libs
    css:
      - default
      - default-fonts
      - "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"

Add animation classes to your slide’s class

Animations are specified on a per-slide basis and are applied to partial slide reveals as well. You can also use layout: true to apply animations to multiple slides, but I’m not aware of a way to set a default transition for all slides. Here’s a short gist as an example to get you started.

To animate a slide’s transition, add animated and the animation type of your choice to the slide’s class.

---
class: center, middle, animated, slideInRight

# xaringan

### /ʃæ.'riŋ.ɡæn/

---
class: inverse, center, middle, animated, bounceInDown

# Get Started

The end result will look something like this. Have fun! 😎

More xaringan fun

This topic came up in a xaringan GitHub issue, where pzhaonet shared a link to a demonstration of all 77 available transitions.

If you like xaringan, you might also like my package for customizing its colors and themes: xaringanthemer.