Animation for 'shiny' Elements

An extension of 'animate.css' that allows user to easily add animations to any UI element in 'shiny' app using the elements id.

shinyanimate package is an R wrapper for animate.css. It allows user to easily add animations to any UI element in shiny app using the elements id.

Installation

To install the stable CRAN version:

install.packages("shinyanimate")

To install the latest development version from GitHub:

library(devtools)
install_github('Swechhya/shinyanimate')

Example code

Add animation after event is observed:

library(shiny)
library(shinyanimate)
ui <- fluidPage(
  withAnim(),
  div( id = 'shinyLogo', tags$img(src= "https://www.rstudio.com/wp-content/uploads/2014/04/shiny-600x695.png", width = "100px", height = "100px")),
  actionButton(inputId = "button", label = "Animate")
)
server <- function(input, output, session) {
  observeEvent(input$button,{
    startAnim(session, 'shinyLogo', 'shake')
  })
}
shinyApp(ui, server)

addAnim

Add animation on mouse hover:

library(shiny)
library(shinyanimate)
ui <- fluidPage(
  withAnim(),
  div( id = 'shinyLogo', tags$img(src= "https://www.rstudio.com/wp-content/uploads/2014/04/shiny-600x695.png", width = "100px", height = "100px"))
)
server <- function(input, output, session) {
  observe(addHoverAnim(session, 'shinyLogo', 'pulse'))
}
shinyApp(ui, server)

hoverAnim

Add animation when the element comes into view after scrolling:

library(shiny)
library(shinyanimate)
ui <- fluidPage(
    withAnim(),
    tags$h1('Scroll below to see an animation'),
    br(), br(), br(), br(), br(), br(), br(),
    br(), br(), br(), br(), br(), br(), br(),
    div( id = 'shinyLogo', tags$img(src= "https://www.rstudio.com/wp-content/uploads/2014/04/shiny-600x695.png", width = "100px", height = "100px"))
)
server <- function(input, output, session) {
    observe(addScrollAnim(session, 'shinyLogo', 'bounceInRight'))
}
shinyApp(ui, server)