Animate Shiny and R Markdown Content when it Comes into View.

aniview

Animate Shiny and R Markdown content when it comes into view

The package aniview allows to animate Shiny and R Markdown content when it comes into view using animate-css thanks to AniView.

Installation

Install the package from Github.

# install.packages("remotes")
remotes::install_github("lgnbhl/aniview")

Shiny

In order to use aniview, you must first call use_aniview() in the apps’ UI.

Then simply apply aniview() to any shiny element with an animation listed on the animate-css website.

library(shiny)
library(ggplot2)
library(aniview)

ui <- function(){
  fluidPage(
    aniview::use_aniview(), # add use_aniview() in the UI
    aniview(h1("Shiny with AniView", align = "center"), animation = "fadeInUp"),
    br(),
    aniview(plotOutput("plot"), animation = "zoomIn")
  )
}

server <- function(input, output, session){
  output$plot <- renderPlot({
    ggplot(mpg, aes(displ, hwy, colour = class)) + 
      geom_point()
  })
}

shinyApp(ui, server)

Htmlwidgets

The function aniview() doesn’t work directly with htmlwidgets.

The solution is to put the htmlwidget inside a container and animate it.

Below an example animating the box() from shinydashboard in order to use plotly.

library(shinydashboard)
library(plotly)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    use_aniview(), # use_aniview() should be inside the body element
    fluidRow(
      aniview(box(plotlyOutput("plotly")), animation = "slideInLeft"),
    )
  )
)

server <- function(input, output) {
  output$plotly <- renderPlotly({
    gg <- ggplot(mpg, aes(displ, hwy, colour = class)) + 
      geom_point()
    ggplotly(gg)
  })
}

shinyApp(ui, server)

R Markdown

To animate a element of a R Markdown document, you must first call use_aniview() inside a R code chunk with {r, echo = FALSE} so the code will not be shown in the final document.

`
``{r, echo = FALSE}
aniview::use_aniview()
`
``

Then you can animate any content of your R Markdown document using the ::: markers of the rmarkdown package followed by {.aniview data-av-animation="ANIMATE-CSS EFFECT"}. The animate-css effects are listed here.

Below an example with the “slideInUp” effect.

::: {.aniview data-av-animation="slideInUp"}
This element will be animated.
:::

You can learn more about the CSS class markers in the Custom block chapter of the R Markdown Cookbook from Yihui Xie.

Xaringan presentation

xaringan is a package for creating slideshows with remark.js using R Markdown. You can take a look at its introductory presentation.

You can easily animate a slide using the “animated” class of animate-css with any animation effect.

Below is a minimal example.

-
--
title: "Presentation Ninja"
subtitle: "with xaringan"
output:
  xaringan::moon_reader:
    lib_dir: libs
-
--

`
``{r, echo = FALSE}
aniview::use_aniview()
`
``

# A normal slide

-
--
class: animated, bounceInDown

# An animated slide