Xaringan: slide transitions for xaringan

[smh-ej]

I'm new to using xaringan and revealjs in general. I couldn't find anywhere on SO or other resources if one can create slide transitions in xaringan? From what I know that it is built on revealjs but I assume it's not an available feature but if anyone has a hack for it? Thanks!

[tcgriffith]

xaringan is built upon remark.js, that what I know.

[gadenbuie]

remark.js (and xaringan by extension) supports animations via animate.css. In xaringan, you can add animations by including animate.css in the css argument to moon_reader(), either by downloading the style sheet or linking 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"

Animations need to be specified on a per-slide basis (or you can use layout: true to apply animations to multiple slides). See this gist for an example. To add a slide transition animation, add animated and the slide transition 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! 😎

[gadenbuie]

I should probably add an entry to the wiki. And @smh-ej if you ask this on StackOverflow and send me the link (as a comment here), I'll be happy to answer it there to make sure others find the solution.

[yihui]

This is amazing! I didn't know it. Thanks for sharing @gadenbuie!

[gadenbuie]

@yihui I just learned today, too!! :laughing: (It's not very well documented in the remark.js repo)

[pzhaonet]

This is awesome!

It seems that an individual slide can use only one animation effect, although animate.css provides both In and Out transition effects. If an Out effect is applied to a slide, it looks weird.

[pzhaonet]

I made some slides for Xaringan animation to display the 77 available effects.

If xaringan can loop in the autoplay mode like a gif, I would like to make a slide for each effect and embed them into one webpage...

[jvcasillas]

A gif would be great to add to the wiki.

[pzhaonet]

wondering how to convert xaringan slides into gif...

[zhouyisu]

@pzhaonet did this for you: https://www.dropbox.com/s/vvi7jl1n0i6xyr6/Xaringan-animation.gif?dl=0 Need to shrink window to keep the gif under 10MB. Nice work for creating the demo!

[pzhaonet]

@zhouyisu Thank you very much for the gif! I would like to insert it here:

In the meanwhile I created a webpage to display live demos for each transition effect.

The author of animate.css also provides a nice page for live show.

[jbkunst]

Hi everyone,

If I want all the slides with a particular effect I would like to do in the yaml something like:

output:
  xaringan::moon_reader:
    nature:
     slideClass: [animated, fadeIn]

Is that possible? Sorry, but I didn't find a similar option.

Regards,

[juancarloscastillo]

Hi ... I don't know whether this was solved already, but it worked for me when using the layout option after the second slide. At the beginning I did not get it correctly, but the layout option must be specified as an slide in itself, which must be inserted before another slide, without any other content. For instance:

class: inverse

# This is the title slide or any slide, not animated yet

---
layout: true
class: animated, fadeInRight
---
# New slide

this slide comes with the transition, and all the following until you set another slide with the text layout: false

This worked for me.
And by the way: this is great!

[hhmacedo]

@yihui Can I close this issue? Seems solved.

[yihui]

We can close it after someone add the solution to the Wiki: https://github.com/yihui/xaringan/wiki otherwise I'm afraid it will be lost.

[gadenbuie]

Sorry that I never got around to adding this to the wiki! OTOH, I do have a nice solution for this task: xaringanExtra::use_animate_all("slide_left").

Edit: One advantage is that use_animate_all() doesn't require using the layout property

[hhmacedo]

@gadenbuie No worries, you already put here the solution; maybe I'll do the wiki part later. Thanks again for the solution :)