New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

slide transitions for xaringan #184

Open
smh-ej opened this Issue Nov 13, 2018 · 12 comments

Comments

8 participants
@smh-ej
Copy link

smh-ej commented Nov 13, 2018

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

This comment has been minimized.

Copy link
Collaborator

tcgriffith commented Nov 13, 2018

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

@gadenbuie

This comment has been minimized.

Copy link
Contributor

gadenbuie commented Nov 13, 2018

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

xaringan-animated mov

@gadenbuie

This comment has been minimized.

Copy link
Contributor

gadenbuie commented Nov 13, 2018

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 yihui added this to the v0.8 milestone Nov 13, 2018

@yihui

This comment has been minimized.

Copy link
Owner

yihui commented Nov 13, 2018

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

@gadenbuie

This comment has been minimized.

Copy link
Contributor

gadenbuie commented Nov 13, 2018

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

@pzhaonet

This comment has been minimized.

Copy link

pzhaonet commented Nov 22, 2018

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

This comment has been minimized.

Copy link

pzhaonet commented Nov 22, 2018

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

This comment has been minimized.

Copy link
Contributor

jvcasillas commented Nov 22, 2018

A gif would be great to add to the wiki.

@pzhaonet

This comment has been minimized.

Copy link

pzhaonet commented Nov 22, 2018

wondering how to convert xaringan slides into gif...

@zhouyisu

This comment has been minimized.

Copy link

zhouyisu commented Nov 23, 2018

@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

This comment has been minimized.

Copy link

pzhaonet commented Nov 23, 2018

@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.

@yihui yihui modified the milestones: v0.8, v0.9 Dec 11, 2018

@jbkunst

This comment has been minimized.

Copy link

jbkunst commented Dec 13, 2018

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,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment