spsComps (version 0.3.3.0)

animateAppend: Append animation to a Shiny element

Description

Append animation to a Shiny element

Usage

animateAppend(element, animation, speed = NULL, hover = FALSE)
animateAppendNested(
  element,
  animation,
  speed = NULL,
  hover = FALSE,
  display = "inline-block",
  ...
)

Value

returns a Shiny element

Arguments

element

the shiny element to append, must have "shiny.tag" class for animateAppend and can be either "shiny.tag" or "shiny.tag.list" for animateAppendNested.

animation

what kind of animation you want, one of "wrench", "ring", "horizontal", "horizontal-reverse", "vertical", "flash", "bounce", "bounce-reverse", "spin", "spin-reverse", "float", "pulse", "shake", "tada", "passing", "passing-reverse", "burst", "falling", "falling-reverse", "rising"s See our online demo for details.

speed

string, one of "fast", "slow"

hover

bool, trigger animation on hover?

display

string, CSS display method for the out-most wrapper, one of the v alid css display method, like "block", "inline", "flex", default is "inline-block".

...

other attributes add to the wrapper, for animateAppendNested only

Details

animateAppend

Append the animation directly to the element you provide, but can only apply one type of animation

animateAppendNested

Append multiple animations to the element you provide by creating a wrapper around the element. Animations are applied on the wrappers. This may cause some unknown issues, especially on the display property. Try change the display may fix the issues. It is safer to use animateAppend.

Read more about CSS display: https://www.w3schools.com/cssref/pr_class_display.asp

Examples

if (interactive()){
  library(shiny)

  ui <- fluidPage(
    icon("house") %>%
      animateAppend("ring"),
    h2("Append animation", class = "text-primary") %>%
      animateAppend("pulse"),
    br(),
    h2("Nested animations", class = "text-primary") %>%
      animateAppendNested("ring") %>%
      animateAppendNested("pulse") %>%
      animateAppendNested("passing"),
    tags$span("Other things"),
    h2("Nested animations display changed", class = "text-primary") %>%
      animateAppendNested("ring") %>%
      animateAppendNested("pulse", display = "block", style = "width: 30%"),
    tags$span("Other things")
  )

  server <- function(input, output, session) {

  }

  shinyApp(ui, server)
}