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
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! 😎