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')Usage
Add animation after event is observed
library(shiny)
library(shinyanimate)
ui <- fluidPage(
withAnim(),
div( id = 'shinyLogo', tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px")),
actionButton(inputId = "button", label = "Animate")
)
server <- function(input, output, session) {
observeEvent(input$button,{
startAnim(session, 'shinyLogo', 'shakeX')
})
}
shinyApp(ui, server)
Add animation on mouse hover
library(shiny)
library(shinyanimate)
ui <- fluidPage(
withAnim(),
div( id = 'shinyLogo', tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px"))
)
server <- function(input, output, session) {
observe(addHoverAnim(session, 'shinyLogo', 'pulse'))
}
shinyApp(ui, server)
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= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px"))
)
server <- function(input, output, session) {
observe(addScrollAnim(session, 'shinyLogo', 'bounceInRight'))
}
shinyApp(ui, server)
Working with modules
library(shiny)
library(shinyanimate)
animUI <- function(id, label = "Animate") {
ns <- NS(id)
tagList(
div( id = ns("anim"), tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px")),
actionButton(inputId = ns("button"), label = label)
)
}
animServer <- function(id) {
moduleServer(
id,
function(input, output, session) {
observeEvent(input$button,{
startAnim(session, id = "anim", type = 'shakeX' )
}
)
}
)}
ui <- fluidPage(
withAnim(),
animUI("logo")
)
server <- function(input, output, session) {
animServer("logo")
}
shinyApp(ui, server)
