shinyLottie

Animations

The following example demonstrates how to produce a simple ‘shiny’ app that includes a ‘Lottie’ animation.

library(shiny)
library(shinyLottie)

ui <- fluidPage(
  include_lottie(),
  lottie_animation(
    path = "shinyLottie/example.json",
    name = "my_animation"
  )
)

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

shinyApp(ui, server)

This relies on the use of two functions within the UI:

1. include_lottie() loads the necessary ‘JavaScript’ to enable ‘Lottie’ functionality

2. lottie_animation() generates a ‘Lottie’ animation sourced from the supplied path argument

There are two types of path that can be used to reference a ‘Lottie’ animation:

1. A local file path to a JSON file - the path used in the above app references an example animation that is installed alongside ‘shinyLottie’

2. A URL for web-hosted JSON files (i.e. LottieFiles asset link or LottieLab JSON URL)

lottie_animation() also requires that we provide a name, which we can then reference when updating the animation during ‘shiny’ runtime. This process, along with further arguments that can be supplied to fine-tune playback behaviour, are explained in vignette("Controlling-Animations").

Buttons

lottie_button() makes it simple to convert ‘Lottie’ animations into functional buttons. The simplest way to do this is to pipe in the output of lottie_animation() (this can be done with either R’s native |> or magrittr’s %>%).

library(shiny)
library(shinyLottie)

ui <- fluidPage(
  include_lottie(),
  lottie_animation(
    path = "shinyLottie/example.json",
    name = "my_animation",
    height = "100px",
    width = "100px"
  ) |> lottie_button(inputId = "my_button")
)

server <- function(input, output, session) {
  observeEvent(input$my_button, {
    print("Button pressed")
  })
}

shinyApp(ui, server)

Along with the animation object, we must also provide lottie_button() with an inputId. This makes it functionally identical to actionButton() - we can then observe the ‘shiny’ input slot of the same name (in this case input$my_button) to trigger reactive behaviour. Here, a simple message is printed to the console.