Use aos
use_aos( disable = FALSE, startEvent = "DOMContentLoaded", initClassName = "aos-init", animatedClassName = "aos-animate", useClassNames = FALSE, disableMutationObserver = FALSE, debounceDelay = "50", throttleDelay = "99", offset = "120", duration = "400", easing = "ease", delay = "0" )
disable | string. Condition when AOS should be disabled, for example 'mobile' |
---|---|
startEvent | string. Name of the event dispatched on the document, that AOS should initialize on |
initClassName | string. Class applied after initialization |
animatedClassName | string. Class applied on animation |
useClassNames | boolean. If true, will add content of data-aos as classes on scroll |
disableMutationObserver | boolean. Disables automatic mutations detections (advanced) |
debounceDelay | string. The delay on debounce used while resizing window (advanced) |
throttleDelay | string. The delay on throttle used while scrolling the page (advanced) |
offset | string. Change offset to trigger animations sooner or later, in px |
duration | string. Duration of animation in ms. |
easing | string. Timing function to animate elements nicely |
delay | string. Delay animation (ms) |
Javascript code initializing aos with dependencies.
if (interactive()) { library(shiny) shinyApp( ui = fluidPage( use_aos(), # add use_aos() in the UI aos(h1("Shiny with AOS - Animate On Scroll"), animation = "fade-zoom-in"), aos(textOutput("text"), animation = "fade-up") ), server <- function(input, output, session){ output$text <- renderText({ print("An animated text.") }) } ) }