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.
Install the package from Github.
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)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)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.
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.
You can learn more about the CSS class markers in the Custom block chapter of the R Markdown Cookbook from Yihui Xie.
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.