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.
# install.packages("remotes")
remotes::install_github("lgnbhl/aniview")
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.
```{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 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
Any scripts or data that you put into this service are public.
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.