Gifs of flipbooks

Examples of building gifs of flipbooks using flipbookr --> pagedown --> magick meant to supplement issue on EvaMaeRey/flipbookr#22.

Steps

1. Create your flipbook with flipbookr
2. Add the following css (can just add it as a code chunk directly into your RMD -- as I do in the examples). For context on why this is necessary, see EvaMaeRey/flipbookr#21

@media print {
  .has-continuation {
    display: block;
  }
}

3. Use the function flipbook_to_gif() in "render_flipbook-gif-examples.R" to specify the RMD file of your flipbook and run (will create html, pdf, and gif outputs of your file)

Examples of flipbookr gifs

First example:

Inspired by the Many Models chapter for "R for Data Science," Grolemund, Wickham.

Second example:

Pulled from a prior blog post where I solve a hypothetical city planning riddle.

Here is the original animation:

And here is a gif of the flipbook of it being built:

(Though drop final gganimate::transition_states() step here.)

Third example:

Comes from flipbookrs "minimal-flipbook" starting template:

Shows that most types of flipbooking options can render nicely into a gif.

Context

The flipbookr package contains functions for creating gifs of flipbooks via the flipbookr::code_create_gif_flipbook() or flipbookr::chunk_create_gif_flipbook(). However per conversation on thread there was interest in exploring using a pagedown rather than webshot based approach (that could be more reliable in certain instances).

Other notes

My second flipbook gif example uses some packages that are only available on github...

if (!requireNamespace("animatrixr")) devtools::install_github('brshallo/animatrixr')
if (!requireNamespace("emo")) devtools::install_github('hadley/emo')
if (!requireNamespace("flipbookr")) devtools::install_github('EvaMaeRey/flipbookr')

Superseded

Documentation on converting flipbooks into gifs has been added to {flipbookr} documentation.

{xaringanBuilder} has become the go-to package for converting xaringan slides (which flipbooks use) into different output formats (including gifs).