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 released version from CRAN.
install.packages("aniview")
To get a bug fix, or use a feature from the development version, you can install it from GitHub.
# install.packages("remotes") remotes::install_github("lgnbhl/aniview")
In order to use aniview, you must first call use_aniview()
in the UI.
Then simply apply aniview()
to any shiny element with an animation listed on the animate-css website.
Here a basic example:
library(shiny) library(tidyverse) library(ggrepel) library(aniview) shinyApp( ui = fluidPage( align = "center", aniview::use_aniview(), # add use_aniview() in the UI aniview(h1("Shiny with AniView"), animation = "fadeInUp"), HTML(rep("↓<br/><br/><br/><br/>scroll down<br/><br/>", 10)), aniview(plotOutput("plot"), animation = "slideInLeft"), br() ), server = function(input, output){ output$plot <- renderPlot({ ggplot(starwars, aes(mass, height)) + geom_point(aes(color = gender)) + geom_label_repel(aes(label = name), size = 3) + labs(title = "Star Wars Characters Height vs Mass") }) } )
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(shiny) 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
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4