Use aos
Usage
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",
use_cdn = TRUE
)Arguments
- 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)
- use_cdn
boolean. TRUE to use a Content Delivery Network (CDN), true by default, or false to use locally stored files.
Examples
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.") })
}
)
}
#>
#> Listening on http://127.0.0.1:5075
#> [1] "An animated text."