Search code examples
xaringanremarkjs

How to include javascript library in xaringan/remark.js?

I'm working on a presentation using xaringan, and am using a few gifs created by gganimate to illustrate some points about a model. It works great, except that once the gifs start playing they just keep playing, and sometimes they seem to start playing before I get to their slide.

I would like to be able to explicitly start and stop each gif, and the solution seems to be the giffer javascript library, but here is where I fall far short of "ninja" status. How do I install and load the giffer library for use by xaringan. I suspect it's somewhere in the YAML, possibly include, but that's as far as I've gotten

Solution

  • You can include javascript in the YAML by

    output:
  xaringan::moon_reader:
    nature:
      beforeInit: ["gifffer.min.js", "load.js"]

    as mentioned here.

    Here load.js just contains 

    window.onload = function() {
  Gifffer();
}

    but you can change the settings, styling of button etc as described in gifffer.