├── LICENSE ├── .gitignore ├── _pkgdown.yml ├── docs ├── images │ ├── flip.gif │ ├── tada.gif │ ├── addAnim.gif │ ├── bounce.gif │ ├── fadeIn.gif │ ├── fadeOut.gif │ ├── flash.gif │ ├── flipInX.gif │ ├── flipInY.gif │ ├── hinge.gif │ ├── jello.gif │ ├── pulse.gif │ ├── rollIn.gif │ ├── rollOut.gif │ ├── shakeX.gif │ ├── shakeY.gif │ ├── swing.gif │ ├── wobble.gif │ ├── zoomIn.gif │ ├── zoomOut.gif │ ├── backInUp.gif │ ├── backOutUp.gif │ ├── bounceIn.gif │ ├── bounceOut.gif │ ├── fadeInUp.gif │ ├── fadeOutUp.gif │ ├── flipOutX.gif │ ├── flipOutY.gif │ ├── headShake.gif │ ├── heartBeat.gif │ ├── hoverAnim.gif │ ├── rotateIn.gif │ ├── rotateOut.gif │ ├── slideInUp.gif │ ├── zoomInUp.gif │ ├── zoomOutUp.gif │ ├── backInDown.gif │ ├── backInLeft.gif │ ├── backInRight.gif │ ├── backOutDown.gif │ ├── backOutLeft.gif │ ├── backOutRight.gif │ ├── bounceInDown.gif │ ├── bounceInLeft.gif │ ├── bounceInUp.gif │ ├── bounceOutUp.gif │ ├── fadeInDown.gif │ ├── fadeInLeft.gif │ ├── fadeInRight.gif │ ├── fadeInUpBig.gif │ ├── fadeOutDown.gif │ ├── fadeOutLeft.gif │ ├── fadeOutRight.gif │ ├── fadeOutUpBig.gif │ ├── jackInTheBox.gif │ ├── rubberBand.gif │ ├── scrollAnim.gif │ ├── slideInDown.gif │ ├── slideInLeft.gif │ ├── slideInRight.gif │ ├── slideOutDown.gif │ ├── slideOutLeft.gif │ ├── slideOutUp.gif │ ├── zoomInDown.gif │ ├── zoomInLeft.gif │ ├── zoomInRight.gif │ ├── zoomOutDown.gif │ ├── zoomOutLeft.gif │ ├── zoomOutRight.gif │ ├── bounceInRight.gif │ ├── bounceOutDown.gif │ ├── bounceOutLeft.gif │ ├── bounceOutRight.gif │ ├── fadeInDownBig.gif │ ├── fadeInLeftBig.gif │ ├── fadeInRightBig.gif │ ├── fadeInTopLeft.gif │ ├── fadeInTopRight.gif │ ├── fadeOutDownBig.gif │ ├── fadeOutLeftBig.gif │ ├── fadeOutTopLeft.gif │ ├── rotateInUpLeft.gif │ ├── slideOutRight.gif │ ├── fadeInBottomLeft.gif │ ├── fadeInBottomRight.gif │ ├── fadeOutBottomLeft.gif │ ├── fadeOutRightBig.gif │ ├── fadeOutTopRight.gif │ ├── lightSpeedInLeft.gif │ ├── lightSpeedInRight.gif │ ├── lightSpeedOutLeft.gif │ ├── rotateInDownLeft .gif │ ├── rotateInDownLeft.gif │ ├── rotateInDownRight.gif │ ├── rotateInUpRight.gif │ ├── rotateOutDownLeft.gif │ ├── rotateOutUpLeft.gif │ ├── rotateOutUpRight.gif │ ├── fadeOutBottomRight.gif │ ├── lightSpeedOutRight.gif │ └── rotateOutDownRight.gif ├── reference │ ├── Rplot001.png │ ├── index.html │ ├── withAnim.html │ ├── addHoverAnim.html │ ├── startAnim.html │ └── addScrollAnim.html ├── pkgdown.yml ├── sitemap.xml ├── link.svg ├── bootstrap-toc.css ├── docsearch.js ├── pkgdown.js ├── LICENSE-text.html ├── 404.html ├── bootstrap-toc.js ├── authors.html ├── pkgdown.css ├── docsearch.css └── index.html ├── inst ├── images │ ├── addAnim.gif │ ├── hoverAnim.gif │ └── scrollAnim.gif └── assets │ ├── util.js │ ├── scrollAnimation.js │ └── addClass.js ├── .Rbuildignore ├── NAMESPACE ├── man ├── withAnim.Rd ├── addHoverAnim.Rd ├── startAnim.Rd └── addScrollAnim.Rd ├── shinyanimate.Rproj ├── R ├── global.R └── anim.R ├── DESCRIPTION ├── README.md └── index.md /LICENSE: -------------------------------------------------------------------------------- 1 | YEAR: 2019 2 | COPYRIGHT HOLDER: Swechhya Bista 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .Rproj.user 2 | .Rhistory 3 | .RData 4 | .Ruserdata 5 | -------------------------------------------------------------------------------- /_pkgdown.yml: -------------------------------------------------------------------------------- 1 | template: 2 | params: 3 | bootswatch: flatly 4 | 5 | -------------------------------------------------------------------------------- /docs/images/flip.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/flip.gif -------------------------------------------------------------------------------- /docs/images/tada.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/tada.gif -------------------------------------------------------------------------------- /docs/images/addAnim.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/addAnim.gif -------------------------------------------------------------------------------- /docs/images/bounce.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/bounce.gif -------------------------------------------------------------------------------- /docs/images/fadeIn.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeIn.gif -------------------------------------------------------------------------------- /docs/images/fadeOut.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeOut.gif -------------------------------------------------------------------------------- /docs/images/flash.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/flash.gif -------------------------------------------------------------------------------- /docs/images/flipInX.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/flipInX.gif -------------------------------------------------------------------------------- /docs/images/flipInY.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/flipInY.gif -------------------------------------------------------------------------------- /docs/images/hinge.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/hinge.gif -------------------------------------------------------------------------------- /docs/images/jello.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/jello.gif -------------------------------------------------------------------------------- /docs/images/pulse.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/pulse.gif -------------------------------------------------------------------------------- /docs/images/rollIn.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rollIn.gif -------------------------------------------------------------------------------- /docs/images/rollOut.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rollOut.gif -------------------------------------------------------------------------------- /docs/images/shakeX.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/shakeX.gif -------------------------------------------------------------------------------- /docs/images/shakeY.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/shakeY.gif -------------------------------------------------------------------------------- /docs/images/swing.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/swing.gif -------------------------------------------------------------------------------- /docs/images/wobble.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/wobble.gif -------------------------------------------------------------------------------- /docs/images/zoomIn.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/zoomIn.gif -------------------------------------------------------------------------------- /docs/images/zoomOut.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/zoomOut.gif -------------------------------------------------------------------------------- /inst/images/addAnim.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/inst/images/addAnim.gif -------------------------------------------------------------------------------- /.Rbuildignore: -------------------------------------------------------------------------------- 1 | ^.*\.Rproj$ 2 | ^\.Rproj\.user$ 3 | ^_pkgdown\.yml$ 4 | ^docs$ 5 | ^pkgdown$ 6 | ^index.md 7 | -------------------------------------------------------------------------------- /docs/images/backInUp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/backInUp.gif -------------------------------------------------------------------------------- /docs/images/backOutUp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/backOutUp.gif -------------------------------------------------------------------------------- /docs/images/bounceIn.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/bounceIn.gif -------------------------------------------------------------------------------- /docs/images/bounceOut.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/bounceOut.gif -------------------------------------------------------------------------------- /docs/images/fadeInUp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeInUp.gif -------------------------------------------------------------------------------- /docs/images/fadeOutUp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeOutUp.gif -------------------------------------------------------------------------------- /docs/images/flipOutX.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/flipOutX.gif -------------------------------------------------------------------------------- /docs/images/flipOutY.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/flipOutY.gif -------------------------------------------------------------------------------- /docs/images/headShake.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/headShake.gif -------------------------------------------------------------------------------- /docs/images/heartBeat.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/heartBeat.gif -------------------------------------------------------------------------------- /docs/images/hoverAnim.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/hoverAnim.gif -------------------------------------------------------------------------------- /docs/images/rotateIn.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rotateIn.gif -------------------------------------------------------------------------------- /docs/images/rotateOut.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rotateOut.gif -------------------------------------------------------------------------------- /docs/images/slideInUp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/slideInUp.gif -------------------------------------------------------------------------------- /docs/images/zoomInUp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/zoomInUp.gif -------------------------------------------------------------------------------- /docs/images/zoomOutUp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/zoomOutUp.gif -------------------------------------------------------------------------------- /inst/images/hoverAnim.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/inst/images/hoverAnim.gif -------------------------------------------------------------------------------- /docs/images/backInDown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/backInDown.gif -------------------------------------------------------------------------------- /docs/images/backInLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/backInLeft.gif -------------------------------------------------------------------------------- /docs/images/backInRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/backInRight.gif -------------------------------------------------------------------------------- /docs/images/backOutDown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/backOutDown.gif -------------------------------------------------------------------------------- /docs/images/backOutLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/backOutLeft.gif -------------------------------------------------------------------------------- /docs/images/backOutRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/backOutRight.gif -------------------------------------------------------------------------------- /docs/images/bounceInDown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/bounceInDown.gif -------------------------------------------------------------------------------- /docs/images/bounceInLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/bounceInLeft.gif -------------------------------------------------------------------------------- /docs/images/bounceInUp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/bounceInUp.gif -------------------------------------------------------------------------------- /docs/images/bounceOutUp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/bounceOutUp.gif -------------------------------------------------------------------------------- /docs/images/fadeInDown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeInDown.gif -------------------------------------------------------------------------------- /docs/images/fadeInLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeInLeft.gif -------------------------------------------------------------------------------- /docs/images/fadeInRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeInRight.gif -------------------------------------------------------------------------------- /docs/images/fadeInUpBig.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeInUpBig.gif -------------------------------------------------------------------------------- /docs/images/fadeOutDown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeOutDown.gif -------------------------------------------------------------------------------- /docs/images/fadeOutLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeOutLeft.gif -------------------------------------------------------------------------------- /docs/images/fadeOutRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeOutRight.gif -------------------------------------------------------------------------------- /docs/images/fadeOutUpBig.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeOutUpBig.gif -------------------------------------------------------------------------------- /docs/images/jackInTheBox.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/jackInTheBox.gif -------------------------------------------------------------------------------- /docs/images/rubberBand.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rubberBand.gif -------------------------------------------------------------------------------- /docs/images/scrollAnim.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/scrollAnim.gif -------------------------------------------------------------------------------- /docs/images/slideInDown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/slideInDown.gif -------------------------------------------------------------------------------- /docs/images/slideInLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/slideInLeft.gif -------------------------------------------------------------------------------- /docs/images/slideInRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/slideInRight.gif -------------------------------------------------------------------------------- /docs/images/slideOutDown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/slideOutDown.gif -------------------------------------------------------------------------------- /docs/images/slideOutLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/slideOutLeft.gif -------------------------------------------------------------------------------- /docs/images/slideOutUp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/slideOutUp.gif -------------------------------------------------------------------------------- /docs/images/zoomInDown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/zoomInDown.gif -------------------------------------------------------------------------------- /docs/images/zoomInLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/zoomInLeft.gif -------------------------------------------------------------------------------- /docs/images/zoomInRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/zoomInRight.gif -------------------------------------------------------------------------------- /docs/images/zoomOutDown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/zoomOutDown.gif -------------------------------------------------------------------------------- /docs/images/zoomOutLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/zoomOutLeft.gif -------------------------------------------------------------------------------- /docs/images/zoomOutRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/zoomOutRight.gif -------------------------------------------------------------------------------- /docs/reference/Rplot001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/reference/Rplot001.png -------------------------------------------------------------------------------- /inst/images/scrollAnim.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/inst/images/scrollAnim.gif -------------------------------------------------------------------------------- /docs/images/bounceInRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/bounceInRight.gif -------------------------------------------------------------------------------- /docs/images/bounceOutDown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/bounceOutDown.gif -------------------------------------------------------------------------------- /docs/images/bounceOutLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/bounceOutLeft.gif -------------------------------------------------------------------------------- /docs/images/bounceOutRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/bounceOutRight.gif -------------------------------------------------------------------------------- /docs/images/fadeInDownBig.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeInDownBig.gif -------------------------------------------------------------------------------- /docs/images/fadeInLeftBig.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeInLeftBig.gif -------------------------------------------------------------------------------- /docs/images/fadeInRightBig.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeInRightBig.gif -------------------------------------------------------------------------------- /docs/images/fadeInTopLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeInTopLeft.gif -------------------------------------------------------------------------------- /docs/images/fadeInTopRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeInTopRight.gif -------------------------------------------------------------------------------- /docs/images/fadeOutDownBig.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeOutDownBig.gif -------------------------------------------------------------------------------- /docs/images/fadeOutLeftBig.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeOutLeftBig.gif -------------------------------------------------------------------------------- /docs/images/fadeOutTopLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeOutTopLeft.gif -------------------------------------------------------------------------------- /docs/images/rotateInUpLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rotateInUpLeft.gif -------------------------------------------------------------------------------- /docs/images/slideOutRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/slideOutRight.gif -------------------------------------------------------------------------------- /docs/images/fadeInBottomLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeInBottomLeft.gif -------------------------------------------------------------------------------- /docs/images/fadeInBottomRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeInBottomRight.gif -------------------------------------------------------------------------------- /docs/images/fadeOutBottomLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeOutBottomLeft.gif -------------------------------------------------------------------------------- /docs/images/fadeOutRightBig.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeOutRightBig.gif -------------------------------------------------------------------------------- /docs/images/fadeOutTopRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeOutTopRight.gif -------------------------------------------------------------------------------- /docs/images/lightSpeedInLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/lightSpeedInLeft.gif -------------------------------------------------------------------------------- /docs/images/lightSpeedInRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/lightSpeedInRight.gif -------------------------------------------------------------------------------- /docs/images/lightSpeedOutLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/lightSpeedOutLeft.gif -------------------------------------------------------------------------------- /docs/images/rotateInDownLeft .gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rotateInDownLeft .gif -------------------------------------------------------------------------------- /docs/images/rotateInDownLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rotateInDownLeft.gif -------------------------------------------------------------------------------- /docs/images/rotateInDownRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rotateInDownRight.gif -------------------------------------------------------------------------------- /docs/images/rotateInUpRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rotateInUpRight.gif -------------------------------------------------------------------------------- /docs/images/rotateOutDownLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rotateOutDownLeft.gif -------------------------------------------------------------------------------- /docs/images/rotateOutUpLeft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rotateOutUpLeft.gif -------------------------------------------------------------------------------- /docs/images/rotateOutUpRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rotateOutUpRight.gif -------------------------------------------------------------------------------- /docs/images/fadeOutBottomRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/fadeOutBottomRight.gif -------------------------------------------------------------------------------- /docs/images/lightSpeedOutRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/lightSpeedOutRight.gif -------------------------------------------------------------------------------- /docs/images/rotateOutDownRight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swechhya/shinyanimate/HEAD/docs/images/rotateOutDownRight.gif -------------------------------------------------------------------------------- /docs/pkgdown.yml: -------------------------------------------------------------------------------- 1 | pandoc: 3.1.1 2 | pkgdown: 2.0.7 3 | pkgdown_sha: ~ 4 | articles: {} 5 | last_built: 2023-10-30T09:04Z 6 | 7 | -------------------------------------------------------------------------------- /inst/assets/util.js: -------------------------------------------------------------------------------- 1 | $.fn.validDelay = function (delay) { 2 | return delay && Number.isInteger(delay) && delay > 0; 3 | }; 4 | -------------------------------------------------------------------------------- /NAMESPACE: -------------------------------------------------------------------------------- 1 | # Generated by roxygen2: do not edit by hand 2 | 3 | export(addHoverAnim) 4 | export(addScrollAnim) 5 | export(startAnim) 6 | export(withAnim) 7 | -------------------------------------------------------------------------------- /man/withAnim.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/anim.R 3 | \name{withAnim} 4 | \alias{withAnim} 5 | \title{Set up Shiny app to use animation} 6 | \usage{ 7 | withAnim() 8 | } 9 | \description{ 10 | This function needs to be added in the UI if to want to add animation to your UI elements using shinyanimate. 11 | } 12 | \examples{ 13 | if(interactive()){withAnim()} 14 | } 15 | \seealso{ 16 | \code{\link{startAnim}} 17 | } 18 | -------------------------------------------------------------------------------- /shinyanimate.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: Sweave 13 | LaTeX: pdfLaTeX 14 | 15 | AutoAppendNewline: Yes 16 | StripTrailingWhitespace: Yes 17 | 18 | BuildType: Package 19 | PackageUseDevtools: Yes 20 | PackageInstallArgs: --no-multiarch --with-keep.source 21 | PackageRoxygenize: rd,collate,namespace 22 | -------------------------------------------------------------------------------- /R/global.R: -------------------------------------------------------------------------------- 1 | .onLoad <- function(libname, pkgname) { 2 | shiny::addResourcePath(prefix = "assets",directoryPath = system.file("assets",package="shinyanimate")) 3 | 4 | shiny::tagList( 5 | shiny::singleton( 6 | shiny::tags$head(shiny::tags$link(rel="stylesheet",href="assets/animate.min.css")) 7 | ), 8 | shiny::singleton( 9 | shiny::tags$script(src="assets/addClass.js") 10 | ), 11 | shiny::singleton( 12 | shiny::tags$script(src="assets/scrollAnimation.js") 13 | ) 14 | ) 15 | 16 | 17 | } 18 | -------------------------------------------------------------------------------- /DESCRIPTION: -------------------------------------------------------------------------------- 1 | Package: shinyanimate 2 | Type: Package 3 | Title: Animation for 'shiny' Elements 4 | Version: 0.4.0 5 | Author: Swechhya Bista 6 | Maintainer: Swechhya Bista 7 | Description: An extension of 'animate.css' that allows user to easily add animations to any UI element in 'shiny' app using the elements id. 8 | Imports: shiny 9 | License: MIT + file LICENSE 10 | URL: https://swechhya.github.io/shinyanimate/, https://github.com/Swechhya/shinyanimate 11 | BugReports: https://github.com/Swechhya/shinyanimate/issues 12 | Encoding: UTF-8 13 | LazyData: true 14 | RoxygenNote: 7.2.3 15 | -------------------------------------------------------------------------------- /docs/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | /404.html 5 | 6 | 7 | /LICENSE-text.html 8 | 9 | 10 | /authors.html 11 | 12 | 13 | /index.html 14 | 15 | 16 | /reference/addHoverAnim.html 17 | 18 | 19 | /reference/addScrollAnim.html 20 | 21 | 22 | /reference/index.html 23 | 24 | 25 | /reference/startAnim.html 26 | 27 | 28 | /reference/withAnim.html 29 | 30 | 31 | -------------------------------------------------------------------------------- /docs/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 12 | 13 | -------------------------------------------------------------------------------- /inst/assets/scrollAnimation.js: -------------------------------------------------------------------------------- 1 | $.fn.inViewport = function () { 2 | const windowHeight = $(window).height(); 3 | const windowTopPosition = $(window).scrollTop(); 4 | const windowBottomPosition = windowTopPosition + windowHeight; 5 | 6 | const $element = $(this); 7 | const elementHeight = $element.outerHeight(); 8 | const elementTopPosition = $element.offset().top; 9 | const elementBottomPosition = elementTopPosition + elementHeight; 10 | 11 | if ( 12 | elementBottomPosition >= windowTopPosition && 13 | elementTopPosition <= windowBottomPosition 14 | ) { 15 | return true; 16 | } 17 | 18 | return false; 19 | }; 20 | 21 | $.fn.scrollAnimation = function (animationName) { 22 | if ($(this).inViewport()) { 23 | $(this).addClass('animate__animated animate__' + animationName); 24 | return; 25 | } 26 | 27 | $(this).removeClass('animate__animated animate__' + animationName); 28 | }; 29 | -------------------------------------------------------------------------------- /man/addHoverAnim.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/anim.R 3 | \name{addHoverAnim} 4 | \alias{addHoverAnim} 5 | \title{Add animation on mouse hover for UI element.} 6 | \usage{ 7 | addHoverAnim(session, id, type = NULL) 8 | } 9 | \arguments{ 10 | \item{session}{The session object passed to function given to shinyServer.} 11 | 12 | \item{id}{the id of the UI element for which you want animation on mouse hover.} 13 | 14 | \item{type}{The type of animation to use, valid values correspond to the types in \url{https://daneden.github.io/animate.css/}} 15 | } 16 | \description{ 17 | Add animation on mouse hover for UI element. 18 | } 19 | \examples{ 20 | if(interactive()){ 21 | library(shiny) 22 | library(shinyanimate) 23 | ui <- fluidPage( 24 | withAnim(), 25 | tags$div(id = 'title', h1('HOVER ON ME')) 26 | ) 27 | server <- function(input, output, session){ 28 | observe(addHoverAnim(session, 'title', 'bounce')) 29 | } 30 | shinyApp(ui, server) 31 | } 32 | } 33 | \seealso{ 34 | \code{\link{withAnim}} 35 | } 36 | -------------------------------------------------------------------------------- /man/startAnim.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/anim.R 3 | \name{startAnim} 4 | \alias{startAnim} 5 | \title{Start an animation} 6 | \usage{ 7 | startAnim(session, id, type = NULL, delay = NULL) 8 | } 9 | \arguments{ 10 | \item{session}{The session object passed to function given to shinyServer.} 11 | 12 | \item{id}{the id of the UI element for which you want to add animation.} 13 | 14 | \item{type}{The type of animation to use, valid values correspond to the types in \url{https://daneden.github.io/animate.css/}} 15 | 16 | \item{delay}{The time after which you want to add animationin milliseconds} 17 | } 18 | \description{ 19 | Start an animation of the UI element. 20 | } 21 | \examples{ 22 | if(interactive()){ 23 | library(shiny) 24 | library(shinyanimate) 25 | ui <- fluidPage( 26 | withAnim(), 27 | tags$div(id = 'title', h1('ANIMATION')), 28 | actionButton(inputId = "button", label = "Animate") 29 | ) 30 | server <- function(input, output, session){ 31 | observeEvent(input$button,{ 32 | startAnim(session, 'title', 'bounce') 33 | }) 34 | } 35 | shinyApp(ui, server) 36 | } 37 | } 38 | \seealso{ 39 | \code{\link{withAnim}} 40 | } 41 | -------------------------------------------------------------------------------- /man/addScrollAnim.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/anim.R 3 | \name{addScrollAnim} 4 | \alias{addScrollAnim} 5 | \title{Add animation on scroll for UI element.} 6 | \usage{ 7 | addScrollAnim(session, id, type = NULL) 8 | } 9 | \arguments{ 10 | \item{session}{The session object passed to function given to shinyServer.} 11 | 12 | \item{id}{the id of the UI element for which you want animation on scroll.} 13 | 14 | \item{type}{The type of animation to use, valid values correspond to the types in \url{https://daneden.github.io/animate.css/}} 15 | } 16 | \description{ 17 | Add animation on scroll for UI element. 18 | } 19 | \examples{ 20 | if(interactive()){ 21 | library(shiny) 22 | library(shinyanimate) 23 | ui <- fluidPage( 24 | withAnim(), 25 | tags$h1('Scroll below to see an animation'), 26 | br(), br(), br(), br(), br(), br(), br(), 27 | br(), br(), br(), br(), br(), br(), br(), 28 | br(), br(), br(), br(), br(), br(), br(), 29 | br(), br(), br(), br(), br(), br(), br(), 30 | br(), br(), br(), br(), br(), br(), br(), 31 | br(), br(), br(), br(), br(), br(), br(), 32 | tags$div(id = 'title', h1('I ANIMATE ON SCROLL')) 33 | ) 34 | server <- function(input, output, session){ 35 | observe(addScrollAnim(session, 'title', 'bounce')) 36 | } 37 | shinyApp(ui, server) 38 | } 39 | } 40 | \seealso{ 41 | \code{\link{withAnim}} 42 | } 43 | -------------------------------------------------------------------------------- /docs/bootstrap-toc.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Table of Contents v0.4.1 (http://afeld.github.io/bootstrap-toc/) 3 | * Copyright 2015 Aidan Feldman 4 | * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */ 5 | 6 | /* modified from https://github.com/twbs/bootstrap/blob/94b4076dd2efba9af71f0b18d4ee4b163aa9e0dd/docs/assets/css/src/docs.css#L548-L601 */ 7 | 8 | /* All levels of nav */ 9 | nav[data-toggle='toc'] .nav > li > a { 10 | display: block; 11 | padding: 4px 20px; 12 | font-size: 13px; 13 | font-weight: 500; 14 | color: #767676; 15 | } 16 | nav[data-toggle='toc'] .nav > li > a:hover, 17 | nav[data-toggle='toc'] .nav > li > a:focus { 18 | padding-left: 19px; 19 | color: #563d7c; 20 | text-decoration: none; 21 | background-color: transparent; 22 | border-left: 1px solid #563d7c; 23 | } 24 | nav[data-toggle='toc'] .nav > .active > a, 25 | nav[data-toggle='toc'] .nav > .active:hover > a, 26 | nav[data-toggle='toc'] .nav > .active:focus > a { 27 | padding-left: 18px; 28 | font-weight: bold; 29 | color: #563d7c; 30 | background-color: transparent; 31 | border-left: 2px solid #563d7c; 32 | } 33 | 34 | /* Nav: second level (shown on .active) */ 35 | nav[data-toggle='toc'] .nav .nav { 36 | display: none; /* Hide by default, but at >768px, show it */ 37 | padding-bottom: 10px; 38 | } 39 | nav[data-toggle='toc'] .nav .nav > li > a { 40 | padding-top: 1px; 41 | padding-bottom: 1px; 42 | padding-left: 30px; 43 | font-size: 12px; 44 | font-weight: normal; 45 | } 46 | nav[data-toggle='toc'] .nav .nav > li > a:hover, 47 | nav[data-toggle='toc'] .nav .nav > li > a:focus { 48 | padding-left: 29px; 49 | } 50 | nav[data-toggle='toc'] .nav .nav > .active > a, 51 | nav[data-toggle='toc'] .nav .nav > .active:hover > a, 52 | nav[data-toggle='toc'] .nav .nav > .active:focus > a { 53 | padding-left: 28px; 54 | font-weight: 500; 55 | } 56 | 57 | /* from https://github.com/twbs/bootstrap/blob/e38f066d8c203c3e032da0ff23cd2d6098ee2dd6/docs/assets/css/src/docs.css#L631-L634 */ 58 | nav[data-toggle='toc'] .nav > .active > ul { 59 | display: block; 60 | } 61 | -------------------------------------------------------------------------------- /inst/assets/addClass.js: -------------------------------------------------------------------------------- 1 | $.fn.animateCss = function (animationName, callback) { 2 | var animationEnd = (function (el) { 3 | var animations = { 4 | animation: 'animationend', 5 | OAnimation: 'oAnimationEnd', 6 | MozAnimation: 'mozAnimationEnd', 7 | WebkitAnimation: 'webkitAnimationEnd', 8 | }; 9 | 10 | for (var t in animations) { 11 | if (el.style[t] !== undefined) { 12 | return animations[t]; 13 | } 14 | } 15 | })(document.createElement('div')); 16 | 17 | this.addClass('animate__animated animate__' + animationName).one( 18 | animationEnd, 19 | function () { 20 | $(this).removeClass('animate__animated animate__' + animationName); 21 | 22 | if (typeof callback === 'function') callback(); 23 | } 24 | ); 25 | 26 | return this; 27 | }; 28 | 29 | $.fn.animateHover = function (animationName) { 30 | $(this).on('mouseover', function () { 31 | $(this).addClass('animate__animated animate__' + animationName); 32 | }); 33 | $(this).on('mouseout', function () { 34 | $(this).removeClass('animate__animated animate__' + animationName); 35 | }); 36 | }; 37 | 38 | $(document).ready(function () { 39 | Shiny.addCustomMessageHandler('addClass', function (message) { 40 | if ( $.fn.validDelay(message['delay'])) { 41 | setTimeout(function () { 42 | $('#' + message['ele']).animateCss(message['name']); 43 | }, message['delay']); 44 | return; 45 | } 46 | $('#' + message['ele']).animateCss(message['name']); 47 | }); 48 | 49 | Shiny.addCustomMessageHandler('addClassHover', function (message) { 50 | $('#' + message['ele']).animateHover(message['name']); 51 | }); 52 | 53 | Shiny.addCustomMessageHandler('addClassScroll', function (message) { 54 | $(document).on('scroll', function () { 55 | let scrollTimeout; 56 | if (!scrollTimeout) { 57 | scrollTimeout = setTimeout(function () { 58 | $('#' + message['ele']).scrollAnimation(message['name']); 59 | scrollTimeout = null; 60 | }, 1000 / 60); 61 | } 62 | }); 63 | }); 64 | }); 65 | -------------------------------------------------------------------------------- /docs/docsearch.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | // register a handler to move the focus to the search bar 4 | // upon pressing shift + "/" (i.e. "?") 5 | $(document).on('keydown', function(e) { 6 | if (e.shiftKey && e.keyCode == 191) { 7 | e.preventDefault(); 8 | $("#search-input").focus(); 9 | } 10 | }); 11 | 12 | $(document).ready(function() { 13 | // do keyword highlighting 14 | /* modified from https://jsfiddle.net/julmot/bL6bb5oo/ */ 15 | var mark = function() { 16 | 17 | var referrer = document.URL ; 18 | var paramKey = "q" ; 19 | 20 | if (referrer.indexOf("?") !== -1) { 21 | var qs = referrer.substr(referrer.indexOf('?') + 1); 22 | var qs_noanchor = qs.split('#')[0]; 23 | var qsa = qs_noanchor.split('&'); 24 | var keyword = ""; 25 | 26 | for (var i = 0; i < qsa.length; i++) { 27 | var currentParam = qsa[i].split('='); 28 | 29 | if (currentParam.length !== 2) { 30 | continue; 31 | } 32 | 33 | if (currentParam[0] == paramKey) { 34 | keyword = decodeURIComponent(currentParam[1].replace(/\+/g, "%20")); 35 | } 36 | } 37 | 38 | if (keyword !== "") { 39 | $(".contents").unmark({ 40 | done: function() { 41 | $(".contents").mark(keyword); 42 | } 43 | }); 44 | } 45 | } 46 | }; 47 | 48 | mark(); 49 | }); 50 | }); 51 | 52 | /* Search term highlighting ------------------------------*/ 53 | 54 | function matchedWords(hit) { 55 | var words = []; 56 | 57 | var hierarchy = hit._highlightResult.hierarchy; 58 | // loop to fetch from lvl0, lvl1, etc. 59 | for (var idx in hierarchy) { 60 | words = words.concat(hierarchy[idx].matchedWords); 61 | } 62 | 63 | var content = hit._highlightResult.content; 64 | if (content) { 65 | words = words.concat(content.matchedWords); 66 | } 67 | 68 | // return unique words 69 | var words_uniq = [...new Set(words)]; 70 | return words_uniq; 71 | } 72 | 73 | function updateHitURL(hit) { 74 | 75 | var words = matchedWords(hit); 76 | var url = ""; 77 | 78 | if (hit.anchor) { 79 | url = hit.url_without_anchor + '?q=' + escape(words.join(" ")) + '#' + hit.anchor; 80 | } else { 81 | url = hit.url + '?q=' + escape(words.join(" ")); 82 | } 83 | 84 | return url; 85 | } 86 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # shinyanimate 2 | 3 | [![version](http://www.r-pkg.org/badges/version/shinyanimate)](https://cran.r-project.org/package=shinyanimate) 4 | [![cranlogs](http://cranlogs.r-pkg.org/badges/shinyanimate)](https://cran.r-project.org/package=shinyanimate) 5 | 6 | shinyanimate package is an R wrapper for [animate.css](https://daneden.github.io/animate.css/). It allows user to easily add animations to any UI element in shiny app using the elements id. 7 | 8 | ## Installation 9 | To install the stable CRAN version: 10 | ```r 11 | install.packages("shinyanimate") 12 | ``` 13 | 14 | 15 | To install the latest development version from GitHub: 16 | ```r 17 | library(devtools) 18 | install_github('Swechhya/shinyanimate') 19 | ``` 20 | 21 | ## Example code 22 | 23 | ### Add animation after event is observed: 24 | ```r 25 | library(shiny) 26 | library(shinyanimate) 27 | ui <- fluidPage( 28 | withAnim(), 29 | div( id = 'shinyLogo', tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px")), 30 | actionButton(inputId = "button", label = "Animate") 31 | ) 32 | server <- function(input, output, session) { 33 | observeEvent(input$button,{ 34 | startAnim(session, 'shinyLogo', 'shakeX') 35 | }) 36 | } 37 | shinyApp(ui, server) 38 | ``` 39 | ![addAnim](inst/images/addAnim.gif) 40 | 41 | ### Add animation on mouse hover: 42 | 43 | ```r 44 | library(shiny) 45 | library(shinyanimate) 46 | ui <- fluidPage( 47 | withAnim(), 48 | div( id = 'shinyLogo', tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px")) 49 | ) 50 | server <- function(input, output, session) { 51 | observe(addHoverAnim(session, 'shinyLogo', 'pulse')) 52 | } 53 | shinyApp(ui, server) 54 | ``` 55 | ![hoverAnim](inst/images/hoverAnim.gif) 56 | 57 | ### Add animation when the element comes into view after scrolling: 58 | ```r 59 | library(shiny) 60 | library(shinyanimate) 61 | ui <- fluidPage( 62 | withAnim(), 63 | tags$h1('Scroll below to see an animation'), 64 | br(), br(), br(), br(), br(), br(), br(), 65 | br(), br(), br(), br(), br(), br(), br(), 66 | div( id = 'shinyLogo', tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px")) 67 | ) 68 | server <- function(input, output, session) { 69 | observe(addScrollAnim(session, 'shinyLogo', 'bounceInRight')) 70 | } 71 | shinyApp(ui, server) 72 | ``` 73 | 74 | ![scrollAnim](inst/images/scrollAnim.gif) -------------------------------------------------------------------------------- /docs/pkgdown.js: -------------------------------------------------------------------------------- 1 | /* http://gregfranko.com/blog/jquery-best-practices/ */ 2 | (function($) { 3 | $(function() { 4 | 5 | $('.navbar-fixed-top').headroom(); 6 | 7 | $('body').css('padding-top', $('.navbar').height() + 10); 8 | $(window).resize(function(){ 9 | $('body').css('padding-top', $('.navbar').height() + 10); 10 | }); 11 | 12 | $('[data-toggle="tooltip"]').tooltip(); 13 | 14 | var cur_path = paths(location.pathname); 15 | var links = $("#navbar ul li a"); 16 | var max_length = -1; 17 | var pos = -1; 18 | for (var i = 0; i < links.length; i++) { 19 | if (links[i].getAttribute("href") === "#") 20 | continue; 21 | // Ignore external links 22 | if (links[i].host !== location.host) 23 | continue; 24 | 25 | var nav_path = paths(links[i].pathname); 26 | 27 | var length = prefix_length(nav_path, cur_path); 28 | if (length > max_length) { 29 | max_length = length; 30 | pos = i; 31 | } 32 | } 33 | 34 | // Add class to parent
  • , and enclosing
  • if in dropdown 35 | if (pos >= 0) { 36 | var menu_anchor = $(links[pos]); 37 | menu_anchor.parent().addClass("active"); 38 | menu_anchor.closest("li.dropdown").addClass("active"); 39 | } 40 | }); 41 | 42 | function paths(pathname) { 43 | var pieces = pathname.split("/"); 44 | pieces.shift(); // always starts with / 45 | 46 | var end = pieces[pieces.length - 1]; 47 | if (end === "index.html" || end === "") 48 | pieces.pop(); 49 | return(pieces); 50 | } 51 | 52 | // Returns -1 if not found 53 | function prefix_length(needle, haystack) { 54 | if (needle.length > haystack.length) 55 | return(-1); 56 | 57 | // Special case for length-0 haystack, since for loop won't run 58 | if (haystack.length === 0) { 59 | return(needle.length === 0 ? 0 : -1); 60 | } 61 | 62 | for (var i = 0; i < haystack.length; i++) { 63 | if (needle[i] != haystack[i]) 64 | return(i); 65 | } 66 | 67 | return(haystack.length); 68 | } 69 | 70 | /* Clipboard --------------------------*/ 71 | 72 | function changeTooltipMessage(element, msg) { 73 | var tooltipOriginalTitle=element.getAttribute('data-original-title'); 74 | element.setAttribute('data-original-title', msg); 75 | $(element).tooltip('show'); 76 | element.setAttribute('data-original-title', tooltipOriginalTitle); 77 | } 78 | 79 | if(ClipboardJS.isSupported()) { 80 | $(document).ready(function() { 81 | var copyButton = ""; 82 | 83 | $("div.sourceCode").addClass("hasCopyButton"); 84 | 85 | // Insert copy buttons: 86 | $(copyButton).prependTo(".hasCopyButton"); 87 | 88 | // Initialize tooltips: 89 | $('.btn-copy-ex').tooltip({container: 'body'}); 90 | 91 | // Initialize clipboard: 92 | var clipboardBtnCopies = new ClipboardJS('[data-clipboard-copy]', { 93 | text: function(trigger) { 94 | return trigger.parentNode.textContent.replace(/\n#>[^\n]*/g, ""); 95 | } 96 | }); 97 | 98 | clipboardBtnCopies.on('success', function(e) { 99 | changeTooltipMessage(e.trigger, 'Copied!'); 100 | e.clearSelection(); 101 | }); 102 | 103 | clipboardBtnCopies.on('error', function() { 104 | changeTooltipMessage(e.trigger,'Press Ctrl+C or Command+C to copy'); 105 | }); 106 | }); 107 | } 108 | })(window.jQuery || window.$) 109 | -------------------------------------------------------------------------------- /R/anim.R: -------------------------------------------------------------------------------- 1 | #' Set up Shiny app to use animation 2 | #' 3 | #' This function needs to be added in the UI if to want to add animation to your UI elements using shinyanimate. 4 | #' @export 5 | #' @examples 6 | #' if(interactive()){withAnim()} 7 | #' @seealso \code{\link{startAnim}} 8 | withAnim <- function(){ 9 | shiny::tagList( 10 | shiny::singleton( 11 | shiny::tags$head(shiny::tags$link(rel="stylesheet",href="assets/animate.min.css")) 12 | ), 13 | shiny::singleton( 14 | shiny::tags$script(src="assets/addClass.js") 15 | ), 16 | shiny::singleton( 17 | shiny::tags$script(src="assets/scrollAnimation.js") 18 | ), 19 | shiny::singleton( 20 | shiny::tags$script(src="assets/util.js") 21 | ) 22 | ) 23 | } 24 | 25 | #'Start an animation 26 | #' 27 | #' Start an animation of the UI element. 28 | #' @export 29 | #' @param session The session object passed to function given to shinyServer. 30 | #' @param id the id of the UI element for which you want to add animation. 31 | #' @param type The type of animation to use, valid values correspond to the types in \url{https://daneden.github.io/animate.css/} 32 | #' @param delay The time after which you want to add animationin milliseconds 33 | #' @examples 34 | #'if(interactive()){ 35 | #'library(shiny) 36 | #'library(shinyanimate) 37 | #'ui <- fluidPage( 38 | #' withAnim(), 39 | #' tags$div(id = 'title', h1('ANIMATION')), 40 | #' actionButton(inputId = "button", label = "Animate") 41 | #') 42 | #'server <- function(input, output, session){ 43 | #' observeEvent(input$button,{ 44 | #' startAnim(session, 'title', 'bounce') 45 | #' }) 46 | #'} 47 | #'shinyApp(ui, server) 48 | #'} 49 | #'@seealso \code{\link{withAnim}} 50 | #' 51 | startAnim <- function(session, id, type = NULL, delay = NULL){ 52 | session$sendCustomMessage( 53 | type = "addClass", 54 | message = list(ele = session$ns(id), name = type, delay = delay)) 55 | } 56 | 57 | #' Add animation on mouse hover for UI element. 58 | #' @export 59 | #' @param session The session object passed to function given to shinyServer. 60 | #' @param id the id of the UI element for which you want animation on mouse hover. 61 | #' @param type The type of animation to use, valid values correspond to the types in \url{https://daneden.github.io/animate.css/} 62 | #' @examples 63 | #' if(interactive()){ 64 | #' library(shiny) 65 | #' library(shinyanimate) 66 | #' ui <- fluidPage( 67 | #' withAnim(), 68 | #' tags$div(id = 'title', h1('HOVER ON ME')) 69 | #' ) 70 | #' server <- function(input, output, session){ 71 | #' observe(addHoverAnim(session, 'title', 'bounce')) 72 | #' } 73 | #' shinyApp(ui, server) 74 | #'} 75 | #'@seealso \code{\link{withAnim}} 76 | #' 77 | addHoverAnim <- function(session, id, type = NULL) { 78 | session$sendCustomMessage( 79 | type = "addClassHover", 80 | message = list(ele = session$ns(id), name = type)) 81 | } 82 | 83 | #' Add animation on scroll for UI element. 84 | #' @export 85 | #' @param session The session object passed to function given to shinyServer. 86 | #' @param id the id of the UI element for which you want animation on scroll. 87 | #' @param type The type of animation to use, valid values correspond to the types in \url{https://daneden.github.io/animate.css/} 88 | #' @examples 89 | #' if(interactive()){ 90 | #' library(shiny) 91 | #' library(shinyanimate) 92 | #' ui <- fluidPage( 93 | #' withAnim(), 94 | #' tags$h1('Scroll below to see an animation'), 95 | #' br(), br(), br(), br(), br(), br(), br(), 96 | #' br(), br(), br(), br(), br(), br(), br(), 97 | #' br(), br(), br(), br(), br(), br(), br(), 98 | #' br(), br(), br(), br(), br(), br(), br(), 99 | #' br(), br(), br(), br(), br(), br(), br(), 100 | #' br(), br(), br(), br(), br(), br(), br(), 101 | #' tags$div(id = 'title', h1('I ANIMATE ON SCROLL')) 102 | #' ) 103 | #' server <- function(input, output, session){ 104 | #' observe(addScrollAnim(session, 'title', 'bounce')) 105 | #' } 106 | #' shinyApp(ui, server) 107 | #'} 108 | #'@seealso \code{\link{withAnim}} 109 | #' 110 | addScrollAnim <- function(session, id, type = NULL) { 111 | session$sendCustomMessage( 112 | type = "addClassScroll", 113 | message = list(ele = session$ns(id), name = type)) 114 | } 115 | 116 | -------------------------------------------------------------------------------- /docs/LICENSE-text.html: -------------------------------------------------------------------------------- 1 | 2 | License • shinyanimate 6 | 7 | 8 |
    9 |
    37 | 38 | 39 | 40 |
    41 |
    42 |
    43 |

    License

    44 |
    45 | 46 | 
    YEAR: 2019
47 | COPYRIGHT HOLDER: Swechhya Bista
48 |
    49 | 50 |
    51 | 52 | 55 | 56 |
    57 | 58 | 59 | 60 |
    61 |

    Developed by Swechhya Bista.

    62 |
    63 | 64 |
    65 |

    Site built with pkgdown 2.0.7.

    66 |
    67 | 68 |
    69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Page not found (404) • shinyanimate 9 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 22 | 23 |
    24 |
    58 | 59 | 60 | 61 | 62 |
    63 |
    64 |
    65 |

    Page not found (404)

    66 |
    67 | 68 | Content not found. Please use links in the navbar. 69 | 70 |
    71 | 72 | 76 | 77 |
    78 | 79 | 80 | 81 |
    82 |

    83 |

    Developed by Swechhya Bista.

    84 |
    85 | 86 |
    87 |

    88 |

    Site built with pkgdown 2.0.7.

    89 |
    90 | 91 |
    92 |
    93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /docs/bootstrap-toc.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Table of Contents v0.4.1 (http://afeld.github.io/bootstrap-toc/) 3 | * Copyright 2015 Aidan Feldman 4 | * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */ 5 | (function() { 6 | 'use strict'; 7 | 8 | window.Toc = { 9 | helpers: { 10 | // return all matching elements in the set, or their descendants 11 | findOrFilter: function($el, selector) { 12 | // http://danielnouri.org/notes/2011/03/14/a-jquery-find-that-also-finds-the-root-element/ 13 | // http://stackoverflow.com/a/12731439/358804 14 | var $descendants = $el.find(selector); 15 | return $el.filter(selector).add($descendants).filter(':not([data-toc-skip])'); 16 | }, 17 | 18 | generateUniqueIdBase: function(el) { 19 | var text = $(el).text(); 20 | var anchor = text.trim().toLowerCase().replace(/[^A-Za-z0-9]+/g, '-'); 21 | return anchor || el.tagName.toLowerCase(); 22 | }, 23 | 24 | generateUniqueId: function(el) { 25 | var anchorBase = this.generateUniqueIdBase(el); 26 | for (var i = 0; ; i++) { 27 | var anchor = anchorBase; 28 | if (i > 0) { 29 | // add suffix 30 | anchor += '-' + i; 31 | } 32 | // check if ID already exists 33 | if (!document.getElementById(anchor)) { 34 | return anchor; 35 | } 36 | } 37 | }, 38 | 39 | generateAnchor: function(el) { 40 | if (el.id) { 41 | return el.id; 42 | } else { 43 | var anchor = this.generateUniqueId(el); 44 | el.id = anchor; 45 | return anchor; 46 | } 47 | }, 48 | 49 | createNavList: function() { 50 | return $(''); 51 | }, 52 | 53 | createChildNavList: function($parent) { 54 | var $childList = this.createNavList(); 55 | $parent.append($childList); 56 | return $childList; 57 | }, 58 | 59 | generateNavEl: function(anchor, text) { 60 | var $a = $(''); 61 | $a.attr('href', '#' + anchor); 62 | $a.text(text); 63 | var $li = $('
  • '); 64 | $li.append($a); 65 | return $li; 66 | }, 67 | 68 | generateNavItem: function(headingEl) { 69 | var anchor = this.generateAnchor(headingEl); 70 | var $heading = $(headingEl); 71 | var text = $heading.data('toc-text') || $heading.text(); 72 | return this.generateNavEl(anchor, text); 73 | }, 74 | 75 | // Find the first heading level (`

    `, then `

    `, etc.) that has more than one element. Defaults to 1 (for `

    `). 76 | getTopLevel: function($scope) { 77 | for (var i = 1; i <= 6; i++) { 78 | var $headings = this.findOrFilter($scope, 'h' + i); 79 | if ($headings.length > 1) { 80 | return i; 81 | } 82 | } 83 | 84 | return 1; 85 | }, 86 | 87 | // returns the elements for the top level, and the next below it 88 | getHeadings: function($scope, topLevel) { 89 | var topSelector = 'h' + topLevel; 90 | 91 | var secondaryLevel = topLevel + 1; 92 | var secondarySelector = 'h' + secondaryLevel; 93 | 94 | return this.findOrFilter($scope, topSelector + ',' + secondarySelector); 95 | }, 96 | 97 | getNavLevel: function(el) { 98 | return parseInt(el.tagName.charAt(1), 10); 99 | }, 100 | 101 | populateNav: function($topContext, topLevel, $headings) { 102 | var $context = $topContext; 103 | var $prevNav; 104 | 105 | var helpers = this; 106 | $headings.each(function(i, el) { 107 | var $newNav = helpers.generateNavItem(el); 108 | var navLevel = helpers.getNavLevel(el); 109 | 110 | // determine the proper $context 111 | if (navLevel === topLevel) { 112 | // use top level 113 | $context = $topContext; 114 | } else if ($prevNav && $context === $topContext) { 115 | // create a new level of the tree and switch to it 116 | $context = helpers.createChildNavList($prevNav); 117 | } // else use the current $context 118 | 119 | $context.append($newNav); 120 | 121 | $prevNav = $newNav; 122 | }); 123 | }, 124 | 125 | parseOps: function(arg) { 126 | var opts; 127 | if (arg.jquery) { 128 | opts = { 129 | $nav: arg 130 | }; 131 | } else { 132 | opts = arg; 133 | } 134 | opts.$scope = opts.$scope || $(document.body); 135 | return opts; 136 | } 137 | }, 138 | 139 | // accepts a jQuery object, or an options object 140 | init: function(opts) { 141 | opts = this.helpers.parseOps(opts); 142 | 143 | // ensure that the data attribute is in place for styling 144 | opts.$nav.attr('data-toggle', 'toc'); 145 | 146 | var $topContext = this.helpers.createChildNavList(opts.$nav); 147 | var topLevel = this.helpers.getTopLevel(opts.$scope); 148 | var $headings = this.helpers.getHeadings(opts.$scope, topLevel); 149 | this.helpers.populateNav($topContext, topLevel, $headings); 150 | } 151 | }; 152 | 153 | $(function() { 154 | $('nav[data-toggle="toc"]').each(function(i, el) { 155 | var $nav = $(el); 156 | Toc.init($nav); 157 | }); 158 | }); 159 | })(); 160 | -------------------------------------------------------------------------------- /docs/authors.html: -------------------------------------------------------------------------------- 1 | 2 | Authors and Citation • shinyanimate 6 | 7 | 8 |
    9 |
    37 | 38 | 39 | 40 |
    41 |
    42 |
    43 |
    44 |

    Authors

    45 |
    46 | 47 | 48 |
    • 49 |

      Swechhya Bista. Maintainer. 50 |

      51 |
      • 52 |
    53 |
    54 |
    55 |

    Citation

    56 | Source: DESCRIPTION 57 |
    58 |
    59 | 60 | 61 |

    Bista S (2023). 62 | shinyanimate: Animation for 'shiny' Elements. 63 | R package version 0.4.0, https://github.com/Swechhya/shinyanimate. 64 |

    65 | 
    @Manual{,
66 |   title = {shinyanimate: Animation for 'shiny' Elements},
67 |   author = {Swechhya Bista},
68 |   year = {2023},
69 |   note = {R package version 0.4.0},
70 |   url = {https://github.com/Swechhya/shinyanimate},
71 | }
    72 | 73 |
    74 | 75 |
    76 | 77 | 78 | 79 |
    80 |

    Developed by Swechhya Bista.

    81 |
    82 | 83 |
    84 |

    Site built with pkgdown 2.0.7.

    85 |
    86 | 87 |
    88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /docs/reference/index.html: -------------------------------------------------------------------------------- 1 | 2 | Function reference • shinyanimate 6 | 7 | 8 |
    9 |
    37 | 38 | 39 | 40 |
    41 |
    42 |
    43 |

    Reference

    44 |
    45 | 46 | 50 | 53 | 54 | 57 | 58 | 61 | 62 | 65 | 66 |
    47 |

    All functions

    48 |

    49 |
    51 |

    addHoverAnim()

    52 |

    Add animation on mouse hover for UI element.

    55 |

    addScrollAnim()

    56 |

    Add animation on scroll for UI element.

    59 |

    startAnim()

    60 |

    Start an animation

    63 |

    withAnim()

    64 |

    Set up Shiny app to use animation

    67 | 68 | 71 |
    72 | 73 | 74 |
    75 |

    Developed by Swechhya Bista.

    76 |
    77 | 78 |
    79 |

    Site built with pkgdown 2.0.7.

    80 |
    81 | 82 |
    83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /docs/reference/withAnim.html: -------------------------------------------------------------------------------- 1 | 2 | Set up Shiny app to use animation — withAnim • shinyanimate 6 | 7 | 8 |
    9 |
    37 | 38 | 39 | 40 |
    41 |
    42 |
    43 |

    Set up Shiny app to use animation

    44 | Source: R/anim.R 45 | 46 |
    47 | 48 |
    49 |

    This function needs to be added in the UI if to want to add animation to your UI elements using shinyanimate.

    50 |
    51 | 52 |
    53 | 
    withAnim()
    54 |
    55 | 56 |
    57 |

    See also

    58 |

    startAnim

    59 |
    60 | 61 |
    62 |

    Examples

    63 | 
    if(interactive()){withAnim()}
64 |
    65 |
    66 |
    67 | 70 |
    71 | 72 | 73 |
    74 |

    Developed by Swechhya Bista.

    75 |
    76 | 77 |
    78 |

    Site built with pkgdown 2.0.7.

    79 |
    80 | 81 |
    82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /docs/pkgdown.css: -------------------------------------------------------------------------------- 1 | /* Sticky footer */ 2 | 3 | /** 4 | * Basic idea: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ 5 | * Details: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css 6 | * 7 | * .Site -> body > .container 8 | * .Site-content -> body > .container .row 9 | * .footer -> footer 10 | * 11 | * Key idea seems to be to ensure that .container and __all its parents__ 12 | * have height set to 100% 13 | * 14 | */ 15 | 16 | html, body { 17 | height: 100%; 18 | } 19 | 20 | body { 21 | position: relative; 22 | } 23 | 24 | body > .container { 25 | display: flex; 26 | height: 100%; 27 | flex-direction: column; 28 | } 29 | 30 | body > .container .row { 31 | flex: 1 0 auto; 32 | } 33 | 34 | footer { 35 | margin-top: 45px; 36 | padding: 35px 0 36px; 37 | border-top: 1px solid #e5e5e5; 38 | color: #666; 39 | display: flex; 40 | flex-shrink: 0; 41 | } 42 | footer p { 43 | margin-bottom: 0; 44 | } 45 | footer div { 46 | flex: 1; 47 | } 48 | footer .pkgdown { 49 | text-align: right; 50 | } 51 | footer p { 52 | margin-bottom: 0; 53 | } 54 | 55 | img.icon { 56 | float: right; 57 | } 58 | 59 | /* Ensure in-page images don't run outside their container */ 60 | .contents img { 61 | max-width: 100%; 62 | height: auto; 63 | } 64 | 65 | /* Fix bug in bootstrap (only seen in firefox) */ 66 | summary { 67 | display: list-item; 68 | } 69 | 70 | /* Typographic tweaking ---------------------------------*/ 71 | 72 | .contents .page-header { 73 | margin-top: calc(-60px + 1em); 74 | } 75 | 76 | dd { 77 | margin-left: 3em; 78 | } 79 | 80 | /* Section anchors ---------------------------------*/ 81 | 82 | a.anchor { 83 | display: none; 84 | margin-left: 5px; 85 | width: 20px; 86 | height: 20px; 87 | 88 | background-image: url(./link.svg); 89 | background-repeat: no-repeat; 90 | background-size: 20px 20px; 91 | background-position: center center; 92 | } 93 | 94 | h1:hover .anchor, 95 | h2:hover .anchor, 96 | h3:hover .anchor, 97 | h4:hover .anchor, 98 | h5:hover .anchor, 99 | h6:hover .anchor { 100 | display: inline-block; 101 | } 102 | 103 | /* Fixes for fixed navbar --------------------------*/ 104 | 105 | .contents h1, .contents h2, .contents h3, .contents h4 { 106 | padding-top: 60px; 107 | margin-top: -40px; 108 | } 109 | 110 | /* Navbar submenu --------------------------*/ 111 | 112 | .dropdown-submenu { 113 | position: relative; 114 | } 115 | 116 | .dropdown-submenu>.dropdown-menu { 117 | top: 0; 118 | left: 100%; 119 | margin-top: -6px; 120 | margin-left: -1px; 121 | border-radius: 0 6px 6px 6px; 122 | } 123 | 124 | .dropdown-submenu:hover>.dropdown-menu { 125 | display: block; 126 | } 127 | 128 | .dropdown-submenu>a:after { 129 | display: block; 130 | content: " "; 131 | float: right; 132 | width: 0; 133 | height: 0; 134 | border-color: transparent; 135 | border-style: solid; 136 | border-width: 5px 0 5px 5px; 137 | border-left-color: #cccccc; 138 | margin-top: 5px; 139 | margin-right: -10px; 140 | } 141 | 142 | .dropdown-submenu:hover>a:after { 143 | border-left-color: #ffffff; 144 | } 145 | 146 | .dropdown-submenu.pull-left { 147 | float: none; 148 | } 149 | 150 | .dropdown-submenu.pull-left>.dropdown-menu { 151 | left: -100%; 152 | margin-left: 10px; 153 | border-radius: 6px 0 6px 6px; 154 | } 155 | 156 | /* Sidebar --------------------------*/ 157 | 158 | #pkgdown-sidebar { 159 | margin-top: 30px; 160 | position: -webkit-sticky; 161 | position: sticky; 162 | top: 70px; 163 | } 164 | 165 | #pkgdown-sidebar h2 { 166 | font-size: 1.5em; 167 | margin-top: 1em; 168 | } 169 | 170 | #pkgdown-sidebar h2:first-child { 171 | margin-top: 0; 172 | } 173 | 174 | #pkgdown-sidebar .list-unstyled li { 175 | margin-bottom: 0.5em; 176 | } 177 | 178 | /* bootstrap-toc tweaks ------------------------------------------------------*/ 179 | 180 | /* All levels of nav */ 181 | 182 | nav[data-toggle='toc'] .nav > li > a { 183 | padding: 4px 20px 4px 6px; 184 | font-size: 1.5rem; 185 | font-weight: 400; 186 | color: inherit; 187 | } 188 | 189 | nav[data-toggle='toc'] .nav > li > a:hover, 190 | nav[data-toggle='toc'] .nav > li > a:focus { 191 | padding-left: 5px; 192 | color: inherit; 193 | border-left: 1px solid #878787; 194 | } 195 | 196 | nav[data-toggle='toc'] .nav > .active > a, 197 | nav[data-toggle='toc'] .nav > .active:hover > a, 198 | nav[data-toggle='toc'] .nav > .active:focus > a { 199 | padding-left: 5px; 200 | font-size: 1.5rem; 201 | font-weight: 400; 202 | color: inherit; 203 | border-left: 2px solid #878787; 204 | } 205 | 206 | /* Nav: second level (shown on .active) */ 207 | 208 | nav[data-toggle='toc'] .nav .nav { 209 | display: none; /* Hide by default, but at >768px, show it */ 210 | padding-bottom: 10px; 211 | } 212 | 213 | nav[data-toggle='toc'] .nav .nav > li > a { 214 | padding-left: 16px; 215 | font-size: 1.35rem; 216 | } 217 | 218 | nav[data-toggle='toc'] .nav .nav > li > a:hover, 219 | nav[data-toggle='toc'] .nav .nav > li > a:focus { 220 | padding-left: 15px; 221 | } 222 | 223 | nav[data-toggle='toc'] .nav .nav > .active > a, 224 | nav[data-toggle='toc'] .nav .nav > .active:hover > a, 225 | nav[data-toggle='toc'] .nav .nav > .active:focus > a { 226 | padding-left: 15px; 227 | font-weight: 500; 228 | font-size: 1.35rem; 229 | } 230 | 231 | /* orcid ------------------------------------------------------------------- */ 232 | 233 | .orcid { 234 | font-size: 16px; 235 | color: #A6CE39; 236 | /* margins are required by official ORCID trademark and display guidelines */ 237 | margin-left:4px; 238 | margin-right:4px; 239 | vertical-align: middle; 240 | } 241 | 242 | /* Reference index & topics ----------------------------------------------- */ 243 | 244 | .ref-index th {font-weight: normal;} 245 | 246 | .ref-index td {vertical-align: top; min-width: 100px} 247 | .ref-index .icon {width: 40px;} 248 | .ref-index .alias {width: 40%;} 249 | .ref-index-icons .alias {width: calc(40% - 40px);} 250 | .ref-index .title {width: 60%;} 251 | 252 | .ref-arguments th {text-align: right; padding-right: 10px;} 253 | .ref-arguments th, .ref-arguments td {vertical-align: top; min-width: 100px} 254 | .ref-arguments .name {width: 20%;} 255 | .ref-arguments .desc {width: 80%;} 256 | 257 | /* Nice scrolling for wide elements --------------------------------------- */ 258 | 259 | table { 260 | display: block; 261 | overflow: auto; 262 | } 263 | 264 | /* Syntax highlighting ---------------------------------------------------- */ 265 | 266 | pre, code, pre code { 267 | background-color: #f8f8f8; 268 | color: #333; 269 | } 270 | pre, pre code { 271 | white-space: pre-wrap; 272 | word-break: break-all; 273 | overflow-wrap: break-word; 274 | } 275 | 276 | pre { 277 | border: 1px solid #eee; 278 | } 279 | 280 | pre .img, pre .r-plt { 281 | margin: 5px 0; 282 | } 283 | 284 | pre .img img, pre .r-plt img { 285 | background-color: #fff; 286 | } 287 | 288 | code a, pre a { 289 | color: #375f84; 290 | } 291 | 292 | a.sourceLine:hover { 293 | text-decoration: none; 294 | } 295 | 296 | .fl {color: #1514b5;} 297 | .fu {color: #000000;} /* function */ 298 | .ch,.st {color: #036a07;} /* string */ 299 | .kw {color: #264D66;} /* keyword */ 300 | .co {color: #888888;} /* comment */ 301 | 302 | .error {font-weight: bolder;} 303 | .warning {font-weight: bolder;} 304 | 305 | /* Clipboard --------------------------*/ 306 | 307 | .hasCopyButton { 308 | position: relative; 309 | } 310 | 311 | .btn-copy-ex { 312 | position: absolute; 313 | right: 0; 314 | top: 0; 315 | visibility: hidden; 316 | } 317 | 318 | .hasCopyButton:hover button.btn-copy-ex { 319 | visibility: visible; 320 | } 321 | 322 | /* headroom.js ------------------------ */ 323 | 324 | .headroom { 325 | will-change: transform; 326 | transition: transform 200ms linear; 327 | } 328 | .headroom--pinned { 329 | transform: translateY(0%); 330 | } 331 | .headroom--unpinned { 332 | transform: translateY(-100%); 333 | } 334 | 335 | /* mark.js ----------------------------*/ 336 | 337 | mark { 338 | background-color: rgba(255, 255, 51, 0.5); 339 | border-bottom: 2px solid rgba(255, 153, 51, 0.3); 340 | padding: 1px; 341 | } 342 | 343 | /* vertical spacing after htmlwidgets */ 344 | .html-widget { 345 | margin-bottom: 10px; 346 | } 347 | 348 | /* fontawesome ------------------------ */ 349 | 350 | .fab { 351 | font-family: "Font Awesome 5 Brands" !important; 352 | } 353 | 354 | /* don't display links in code chunks when printing */ 355 | /* source: https://stackoverflow.com/a/10781533 */ 356 | @media print { 357 | code a:link:after, code a:visited:after { 358 | content: ""; 359 | } 360 | } 361 | 362 | /* Section anchors --------------------------------- 363 | Added in pandoc 2.11: https://github.com/jgm/pandoc-templates/commit/9904bf71 364 | */ 365 | 366 | div.csl-bib-body { } 367 | div.csl-entry { 368 | clear: both; 369 | } 370 | .hanging-indent div.csl-entry { 371 | margin-left:2em; 372 | text-indent:-2em; 373 | } 374 | div.csl-left-margin { 375 | min-width:2em; 376 | float:left; 377 | } 378 | div.csl-right-inline { 379 | margin-left:2em; 380 | padding-left:1em; 381 | } 382 | div.csl-indent { 383 | margin-left: 2em; 384 | } 385 | -------------------------------------------------------------------------------- /docs/reference/addHoverAnim.html: -------------------------------------------------------------------------------- 1 | 2 | Add animation on mouse hover for UI element. — addHoverAnim • shinyanimate 6 | 7 | 8 |
    9 |
    37 | 38 | 39 | 40 |
    41 |
    42 |
    43 |

    Add animation on mouse hover for UI element.

    44 | Source: R/anim.R 45 | 46 |
    47 | 48 |
    49 |

    Add animation on mouse hover for UI element.

    50 |
    51 | 52 |
    53 | 
    addHoverAnim(session, id, type = NULL)
    54 |
    55 | 56 |
    57 |

    Arguments

    58 |
    session
    59 |

    The session object passed to function given to shinyServer.

    60 | 61 | 62 |
    id
    63 |

    the id of the UI element for which you want animation on mouse hover.

    64 | 65 | 66 |
    type
    67 |

    The type of animation to use, valid values correspond to the types in https://daneden.github.io/animate.css/

    68 | 69 |
    70 |
    71 |

    See also

    72 |

    withAnim

    73 |
    74 | 75 |
    76 |

    Examples

    77 | 
    if(interactive()){
 78 | library(shiny)
 79 | library(shinyanimate)
 80 | ui <- fluidPage(
 81 |   withAnim(),
 82 |     tags$div(id = 'title', h1('HOVER ON ME'))
 83 |     )
 84 | server <- function(input, output, session){
 85 |   observe(addHoverAnim(session, 'title', 'bounce'))
 86 |  }
 87 | shinyApp(ui, server)
 88 | }
 89 |
    90 |
    91 |
    92 | 95 |
    96 | 97 | 98 |
    99 |

    Developed by Swechhya Bista.

    100 |
    101 | 102 |
    103 |

    Site built with pkgdown 2.0.7.

    104 |
    105 | 106 |
    107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /docs/reference/startAnim.html: -------------------------------------------------------------------------------- 1 | 2 | Start an animation — startAnim • shinyanimate 6 | 7 | 8 |
    9 |
    37 | 38 | 39 | 40 |
    41 |
    42 |
    43 |

    Start an animation

    44 | Source: R/anim.R 45 | 46 |
    47 | 48 |
    49 |

    Start an animation of the UI element.

    50 |
    51 | 52 |
    53 | 
    startAnim(session, id, type = NULL, delay = NULL)
    54 |
    55 | 56 |
    57 |

    Arguments

    58 |
    session
    59 |

    The session object passed to function given to shinyServer.

    60 | 61 | 62 |
    id
    63 |

    the id of the UI element for which you want to add animation.

    64 | 65 | 66 |
    type
    67 |

    The type of animation to use, valid values correspond to the types in https://daneden.github.io/animate.css/

    68 | 69 | 70 |
    delay
    71 |

    The time after which you want to add animationin milliseconds

    72 | 73 |
    74 |
    75 |

    See also

    76 |

    withAnim

    77 |
    78 | 79 |
    80 |

    Examples

    81 | 
    if(interactive()){
 82 | library(shiny)
 83 | library(shinyanimate)
 84 | ui <- fluidPage(
 85 |  withAnim(),
 86 |  tags$div(id = 'title', h1('ANIMATION')),
 87 |  actionButton(inputId = "button", label = "Animate")
 88 | )
 89 | server <- function(input, output, session){
 90 |  observeEvent(input$button,{
 91 |    startAnim(session, 'title', 'bounce')
 92 |  })
 93 | }
 94 | shinyApp(ui, server)
 95 | }
 96 |
    97 |
    98 |
    99 | 102 |
    103 | 104 | 105 |
    106 |

    Developed by Swechhya Bista.

    107 |
    108 | 109 |
    110 |

    Site built with pkgdown 2.0.7.

    111 |
    112 | 113 |
    114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | # shinyanimate 2 | 3 | [![version](http://www.r-pkg.org/badges/version/shinyanimate)](https://CRAN.R-project.org/package=shinyanimate) 4 | [![CRAN_Download_Badge](http://cranlogs.r-pkg.org/badges/grand-total/shinyanimate)](http://cran.r-project.org/package=shinyanimate) 5 | 6 | shinyanimate package is an R wrapper for [animate.css](https://daneden.github.io/animate.css/). It allows user to easily add animations to any UI element in shiny app using the elements id. 7 | 8 | ## Installation 9 | 10 | To install the stable CRAN version: 11 | 12 | ```r 13 | install.packages("shinyanimate") 14 | ``` 15 | 16 | To install the latest development version from GitHub: 17 | 18 | ```r 19 | library(devtools) 20 | install_github('Swechhya/shinyanimate') 21 | ``` 22 | 23 | ## Usage 24 | 25 | ### Add animation after event is observed 26 | 27 | ```r 28 | library(shiny) 29 | library(shinyanimate) 30 | ui <- fluidPage( 31 | withAnim(), 32 | div( id = 'shinyLogo', tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px")), 33 | actionButton(inputId = "button", label = "Animate") 34 | ) 35 | server <- function(input, output, session) { 36 | observeEvent(input$button,{ 37 | startAnim(session, 'shinyLogo', 'shakeX') 38 | }) 39 | } 40 | shinyApp(ui, server) 41 | ``` 42 | 43 | ![](images/addAnim.gif) 44 | 45 | ### Add animation on mouse hover 46 | 47 | ```r 48 | library(shiny) 49 | library(shinyanimate) 50 | ui <- fluidPage( 51 | withAnim(), 52 | div( id = 'shinyLogo', tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px")) 53 | ) 54 | server <- function(input, output, session) { 55 | observe(addHoverAnim(session, 'shinyLogo', 'pulse')) 56 | } 57 | shinyApp(ui, server) 58 | ``` 59 | 60 | ![](images/hoverAnim.gif) 61 | 62 | ### Add animation when the element comes into view after scrolling 63 | 64 | ```r 65 | library(shiny) 66 | library(shinyanimate) 67 | ui <- fluidPage( 68 | withAnim(), 69 | tags$h1('Scroll below to see an animation'), 70 | br(), br(), br(), br(), br(), br(), br(), 71 | br(), br(), br(), br(), br(), br(), br(), 72 | div( id = 'shinyLogo', tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px")) 73 | ) 74 | server <- function(input, output, session) { 75 | observe(addScrollAnim(session, 'shinyLogo', 'bounceInRight')) 76 | } 77 | shinyApp(ui, server) 78 | ``` 79 | 80 | ![](images/scrollAnim.gif) 81 | \ 82 | \ 83 | \ 84 | \ 85 | 86 | ### Working with modules 87 | ```r 88 | library(shiny) 89 | library(shinyanimate) 90 | 91 | animUI <- function(id, label = "Animate") { 92 | ns <- NS(id) 93 | tagList( 94 | div( id = ns("anim"), tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px")), 95 | actionButton(inputId = ns("button"), label = label) 96 | ) 97 | } 98 | 99 | animServer <- function(id) { 100 | moduleServer( 101 | id, 102 | function(input, output, session) { 103 | observeEvent(input$button,{ 104 | startAnim(session, id = "anim", type = 'shakeX' ) 105 | } 106 | ) 107 | } 108 | )} 109 | 110 | ui <- fluidPage( 111 | withAnim(), 112 | animUI("logo") 113 | ) 114 | server <- function(input, output, session) { 115 | animServer("logo") 116 | } 117 | 118 | shinyApp(ui, server) 119 | ``` 120 | 121 | ## Available Animations 122 | 123 | ### Attention seekers 124 | 125 | #### bounce 126 | 127 | ![](images/bounce.gif) 128 | 129 | #### flash 130 | 131 | ![](images/flash.gif) 132 | 133 | #### pulse 134 | 135 | ![](images/pulse.gif) 136 | 137 | #### rubberBand 138 | 139 | ![](images/rubberBand.gif) 140 | 141 | #### shakeX 142 | 143 | ![](images/shakeX.gif) 144 | 145 | #### shakeY 146 | 147 | ![](images/shakeY.gif) 148 | 149 | #### headShake 150 | 151 | ![](images/headShake.gif) 152 | 153 | #### swing 154 | 155 | ![](images/swing.gif) 156 | 157 | #### tada 158 | 159 | ![](images/tada.gif) 160 | 161 | #### wobble 162 | 163 | ![](images/wobble.gif) 164 | 165 | #### jello 166 | 167 | ![](images/jello.gif) 168 | 169 | #### heartBeat 170 | 171 | ![](images/heartBeat.gif) 172 | 173 | ### Back entrances 174 | 175 | #### backInDown 176 | 177 | ![](images/backInDown.gif) 178 | 179 | #### backInLeft 180 | 181 | ![](images/backInLeft.gif) 182 | 183 | #### backInRight 184 | 185 | ![](images/backInRight.gif) 186 | 187 | #### backInUp 188 | 189 | ![](images/backInUp.gif) 190 | 191 | ### Back exits 192 | 193 | #### backOutDown 194 | 195 | ![](images/backOutDown.gif) 196 | 197 | #### backOutLeft 198 | 199 | ![](images/backOutLeft.gif) 200 | 201 | #### backOutRight 202 | 203 | ![](images/backOutRight.gif) 204 | 205 | #### backOutUp 206 | 207 | ![](images/backOutUp.gif) 208 | 209 | ### Bouncing entrances 210 | 211 | #### bounceIn 212 | 213 | ![](images/bounceIn.gif) 214 | 215 | #### bounceInDown 216 | 217 | ![](images/bounceInDown.gif) 218 | 219 | #### bounceInLeft 220 | 221 | ![](images/bounceInLeft.gif) 222 | 223 | #### bounceInRight 224 | 225 | ![](images/bounceInRight.gif) 226 | 227 | #### bounceInUp 228 | 229 | ![](images/bounceInUp.gif) 230 | 231 | ### Bouncing exits 232 | 233 | #### bounceOut 234 | 235 | ![](images/bounceOut.gif) 236 | 237 | #### bounceOutDown 238 | 239 | ![](images/bounceOutDown.gif) 240 | 241 | #### bounceOutLeft 242 | 243 | ![](images/bounceOutLeft.gif) 244 | 245 | #### bounceOutRight 246 | 247 | ![](images/bounceOutRight.gif) 248 | 249 | #### bounceOutUp 250 | 251 | ![](images/bounceOutUp.gif) 252 | 253 | ### Fading entrances 254 | 255 | #### fadeIn 256 | 257 | ![](images/fadeIn.gif) 258 | 259 | #### fadeInDown 260 | 261 | ![](images/fadeInDown.gif) 262 | 263 | #### fadeInDownBig 264 | 265 | ![](images/fadeInDownBig.gif) 266 | 267 | #### fadeInLeft 268 | 269 | ![](images/fadeInLeft.gif) 270 | 271 | #### fadeInLeftBig 272 | 273 | ![](images/fadeInLeftBig.gif) 274 | 275 | #### fadeInRight 276 | 277 | ![](images/fadeInRight.gif) 278 | 279 | #### fadeInRightBig 280 | 281 | ![](images/fadeInRightBig.gif) 282 | 283 | #### fadeInUp 284 | 285 | ![](images/fadeInUp.gif) 286 | 287 | #### fadeInUpBig 288 | 289 | ![](images/fadeInUpBig.gif) 290 | 291 | #### fadeInTopLeft 292 | 293 | ![](images/fadeInTopLeft.gif) 294 | 295 | #### fadeInTopRight 296 | 297 | ![](images/fadeInTopRight.gif) 298 | 299 | #### fadeInBottomLeft 300 | 301 | ![](images/fadeInBottomLeft.gif) 302 | 303 | #### fadeInBottomRight 304 | 305 | ![](images/fadeInBottomRight.gif) 306 | 307 | ### Fading exits 308 | 309 | #### fadeOut 310 | 311 | ![](images/fadeOut.gif) 312 | 313 | #### fadeOutDown 314 | 315 | ![](images/fadeOutDown.gif) 316 | 317 | #### fadeOutDownBig 318 | 319 | ![](images/fadeOutDownBig.gif) 320 | 321 | #### fadeOutLeft 322 | 323 | ![](images/fadeOutLeft.gif) 324 | 325 | #### fadeOutLeftBig 326 | 327 | ![](images/fadeOutLeftBig.gif) 328 | 329 | #### fadeOutRight 330 | 331 | ![](images/fadeOutRight.gif) 332 | 333 | #### fadeOutRightBig 334 | 335 | ![](images/fadeOutRightBig.gif) 336 | 337 | #### fadeOutUp 338 | 339 | ![](images/fadeOutUp.gif) 340 | 341 | #### fadeOutUpBig 342 | 343 | ![](images/fadeOutUpBig.gif) 344 | 345 | #### fadeOutTopLeft 346 | 347 | ![](images/fadeOutTopLeft.gif) 348 | 349 | #### fadeOutTopRight 350 | 351 | ![](images/fadeOutTopRight.gif) 352 | 353 | #### fadeOutBottomRight 354 | 355 | ![](images/fadeOutBottomRight.gif) 356 | 357 | #### fadeOutBottomLeft 358 | 359 | ![](images/fadeOutBottomLeft.gif) 360 | 361 | ### Flippers 362 | 363 | #### flip 364 | 365 | ![](images/flip.gif) 366 | 367 | #### flipInX 368 | 369 | ![](images/flipInX.gif) 370 | 371 | #### flipInY 372 | 373 | ![](images/flipInY.gif) 374 | 375 | #### flipOutX 376 | 377 | ![](images/flipOutX.gif) 378 | 379 | #### flipOutY 380 | 381 | ![](images/flipOutY.gif) 382 | 383 | ### Lightspeed 384 | 385 | #### lightSpeedInRight 386 | 387 | ![](images/lightSpeedInRight.gif) 388 | 389 | #### lightSpeedInLeft 390 | 391 | ![](images/lightSpeedInLeft.gif) 392 | 393 | #### lightSpeedOutRight 394 | 395 | ![](images/lightSpeedOutRight.gif) 396 | 397 | #### lightSpeedOutLeft 398 | 399 | ![](images/lightSpeedOutLeft.gif) 400 | 401 | ### Rotating entrances 402 | 403 | #### rotateIn 404 | 405 | ![](images/rotateIn.gif) 406 | 407 | #### rotateInDownLeft 408 | 409 | ![](images/rotateInDownLeft.gif) 410 | 411 | #### rotateInDownRight 412 | 413 | ![](images/rotateInDownRight.gif) 414 | 415 | #### rotateInUpLeft 416 | 417 | ![](images/rotateInUpLeft.gif) 418 | 419 | #### rotateInUpRight 420 | 421 | ![](images/rotateInUpRight.gif) 422 | 423 | ### Rotating exits 424 | 425 | #### rotateOut 426 | 427 | ![](images/rotateOut.gif) 428 | 429 | #### rotateOutDownLeft 430 | 431 | ![](images/rotateOutDownLeft.gif) 432 | 433 | #### rotateOutDownRight 434 | 435 | ![](images/rotateOutDownLeft.gif) 436 | 437 | #### rotateOutUpLeft 438 | 439 | ![](images/rotateOutUpLeft.gif) 440 | 441 | #### rotateOutUpRight 442 | 443 | ![](images/rotateOutUpRight.gif) 444 | 445 | ### Specials 446 | 447 | #### hinge 448 | 449 | ![](images/hinge.gif) 450 | 451 | #### jackInTheBox 452 | 453 | ![](images/jackInTheBox.gif) 454 | 455 | #### rollIn 456 | 457 | ![](images/rollIn.gif) 458 | 459 | #### rollOut 460 | 461 | ![](images/rollOut.gif) 462 | 463 | ### Zooming entrances 464 | 465 | #### zoomIn 466 | 467 | ![](images/zoomIn.gif) 468 | 469 | #### zoomInDown 470 | 471 | ![](images/zoomInDown.gif) 472 | 473 | #### zoomInLeft 474 | 475 | ![](images/zoomInLeft.gif) 476 | 477 | #### zoomInRight 478 | 479 | ![](images/zoomInRight.gif) 480 | 481 | #### zoomInUp 482 | 483 | ![](images/zoomInUp.gif) 484 | 485 | ### Zooming exits 486 | 487 | #### zoomOut 488 | 489 | ![](images/zoomOut.gif) 490 | 491 | #### zoomOutDown 492 | 493 | ![](images/zoomOutDown.gif) 494 | 495 | #### zoomOutLeft 496 | 497 | ![](images/zoomOutLeft.gif) 498 | 499 | #### zoomOutRight 500 | 501 | ![](images/zoomOutRight.gif) 502 | 503 | #### zoomOutUp 504 | 505 | ![](images/zoomOutUp.gif) 506 | 507 | ### Sliding entrances 508 | 509 | #### slideInDown 510 | 511 | ![](images/slideInDown.gif) 512 | 513 | #### slideInLeft 514 | 515 | ![](images/slideInLeft.gif) 516 | 517 | #### slideInRight 518 | 519 | ![](images/slideInRight.gif) 520 | 521 | #### slideInUp 522 | 523 | ![](images/slideInUp.gif) 524 | 525 | ### Sliding exits 526 | 527 | #### slideOutDown 528 | 529 | ![](images/slideOutDown.gif) 530 | 531 | #### slideOutLeft 532 | 533 | ![](images/slideOutLeft.gif) 534 | 535 | #### slideOutRight 536 | 537 | ![](images/slideOutRight.gif) 538 | 539 | #### slideOutUp 540 | 541 | ![](images/slideOutUp.gif) 542 | -------------------------------------------------------------------------------- /docs/docsearch.css: -------------------------------------------------------------------------------- 1 | /* Docsearch -------------------------------------------------------------- */ 2 | /* 3 | Source: https://github.com/algolia/docsearch/ 4 | License: MIT 5 | */ 6 | 7 | .algolia-autocomplete { 8 | display: block; 9 | -webkit-box-flex: 1; 10 | -ms-flex: 1; 11 | flex: 1 12 | } 13 | 14 | .algolia-autocomplete .ds-dropdown-menu { 15 | width: 100%; 16 | min-width: none; 17 | max-width: none; 18 | padding: .75rem 0; 19 | background-color: #fff; 20 | background-clip: padding-box; 21 | border: 1px solid rgba(0, 0, 0, .1); 22 | box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175); 23 | } 24 | 25 | @media (min-width:768px) { 26 | .algolia-autocomplete .ds-dropdown-menu { 27 | width: 175% 28 | } 29 | } 30 | 31 | .algolia-autocomplete .ds-dropdown-menu::before { 32 | display: none 33 | } 34 | 35 | .algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-] { 36 | padding: 0; 37 | background-color: rgb(255,255,255); 38 | border: 0; 39 | max-height: 80vh; 40 | } 41 | 42 | .algolia-autocomplete .ds-dropdown-menu .ds-suggestions { 43 | margin-top: 0 44 | } 45 | 46 | .algolia-autocomplete .algolia-docsearch-suggestion { 47 | padding: 0; 48 | overflow: visible 49 | } 50 | 51 | .algolia-autocomplete .algolia-docsearch-suggestion--category-header { 52 | padding: .125rem 1rem; 53 | margin-top: 0; 54 | font-size: 1.3em; 55 | font-weight: 500; 56 | color: #00008B; 57 | border-bottom: 0 58 | } 59 | 60 | .algolia-autocomplete .algolia-docsearch-suggestion--wrapper { 61 | float: none; 62 | padding-top: 0 63 | } 64 | 65 | .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column { 66 | float: none; 67 | width: auto; 68 | padding: 0; 69 | text-align: left 70 | } 71 | 72 | .algolia-autocomplete .algolia-docsearch-suggestion--content { 73 | float: none; 74 | width: auto; 75 | padding: 0 76 | } 77 | 78 | .algolia-autocomplete .algolia-docsearch-suggestion--content::before { 79 | display: none 80 | } 81 | 82 | .algolia-autocomplete .ds-suggestion:not(:first-child) .algolia-docsearch-suggestion--category-header { 83 | padding-top: .75rem; 84 | margin-top: .75rem; 85 | border-top: 1px solid rgba(0, 0, 0, .1) 86 | } 87 | 88 | .algolia-autocomplete .ds-suggestion .algolia-docsearch-suggestion--subcategory-column { 89 | display: block; 90 | padding: .1rem 1rem; 91 | margin-bottom: 0.1; 92 | font-size: 1.0em; 93 | font-weight: 400 94 | /* display: none */ 95 | } 96 | 97 | .algolia-autocomplete .algolia-docsearch-suggestion--title { 98 | display: block; 99 | padding: .25rem 1rem; 100 | margin-bottom: 0; 101 | font-size: 0.9em; 102 | font-weight: 400 103 | } 104 | 105 | .algolia-autocomplete .algolia-docsearch-suggestion--text { 106 | padding: 0 1rem .5rem; 107 | margin-top: -.25rem; 108 | font-size: 0.8em; 109 | font-weight: 400; 110 | line-height: 1.25 111 | } 112 | 113 | .algolia-autocomplete .algolia-docsearch-footer { 114 | width: 110px; 115 | height: 20px; 116 | z-index: 3; 117 | margin-top: 10.66667px; 118 | float: right; 119 | font-size: 0; 120 | line-height: 0; 121 | } 122 | 123 | .algolia-autocomplete .algolia-docsearch-footer--logo { 124 | background-image: url("data:image/svg+xml;utf8,"); 125 | background-repeat: no-repeat; 126 | background-position: 50%; 127 | background-size: 100%; 128 | overflow: hidden; 129 | text-indent: -9000px; 130 | width: 100%; 131 | height: 100%; 132 | display: block; 133 | transform: translate(-8px); 134 | } 135 | 136 | .algolia-autocomplete .algolia-docsearch-suggestion--highlight { 137 | color: #FF8C00; 138 | background: rgba(232, 189, 54, 0.1) 139 | } 140 | 141 | 142 | .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight { 143 | box-shadow: inset 0 -2px 0 0 rgba(105, 105, 105, .5) 144 | } 145 | 146 | .algolia-autocomplete .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { 147 | background-color: rgba(192, 192, 192, .15) 148 | } 149 | -------------------------------------------------------------------------------- /docs/reference/addScrollAnim.html: -------------------------------------------------------------------------------- 1 | 2 | Add animation on scroll for UI element. — addScrollAnim • shinyanimate 6 | 7 | 8 |
    9 |
    37 | 38 | 39 | 40 |
    41 |
    42 |
    43 |

    Add animation on scroll for UI element.

    44 | Source: R/anim.R 45 | 46 |
    47 | 48 |
    49 |

    Add animation on scroll for UI element.

    50 |
    51 | 52 |
    53 | 
    addScrollAnim(session, id, type = NULL)
    54 |
    55 | 56 |
    57 |

    Arguments

    58 |
    session
    59 |

    The session object passed to function given to shinyServer.

    60 | 61 | 62 |
    id
    63 |

    the id of the UI element for which you want animation on scroll.

    64 | 65 | 66 |
    type
    67 |

    The type of animation to use, valid values correspond to the types in https://daneden.github.io/animate.css/

    68 | 69 |
    70 |
    71 |

    See also

    72 |

    withAnim

    73 |
    74 | 75 |
    76 |

    Examples

    77 | 
    if(interactive()){
 78 | library(shiny)
 79 | library(shinyanimate)
 80 | ui <- fluidPage(
 81 |   withAnim(),
 82 |     tags$h1('Scroll below to see an animation'),
 83 |     br(), br(), br(), br(), br(), br(), br(),
 84 |     br(), br(), br(), br(), br(), br(), br(),
 85 |     br(), br(), br(), br(), br(), br(), br(),
 86 |     br(), br(), br(), br(), br(), br(), br(),
 87 |     br(), br(), br(), br(), br(), br(), br(),
 88 |     br(), br(), br(), br(), br(), br(), br(),
 89 |     tags$div(id = 'title', h1('I ANIMATE ON SCROLL'))
 90 |     )
 91 | server <- function(input, output, session){
 92 |   observe(addScrollAnim(session, 'title', 'bounce'))
 93 |  }
 94 | shinyApp(ui, server)
 95 | }
 96 |
    97 |
    98 |
    99 | 102 |
    103 | 104 | 105 |
    106 |

    Developed by Swechhya Bista.

    107 |
    108 | 109 |
    110 |

    Site built with pkgdown 2.0.7.

    111 |
    112 | 113 |
    114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animation for shiny Elements • shinyanimate 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | 22 | 23 | 24 |
    25 |
    59 | 60 | 61 | 62 | 63 |
    64 |
    65 |
    66 |

    shinyanimate 67 |

    68 |

    version CRAN_Download_Badge

    69 |

    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.

    70 |
    71 |

    Installation 72 |

    73 |

    To install the stable CRAN version:

    74 | 
     75 | install.packages("shinyanimate")
    76 |

    To install the latest development version from GitHub:

    77 | 
     78 | library(devtools)
 79 | install_github('Swechhya/shinyanimate')
    80 |
    81 |
    82 |

    Usage 83 |

    84 |
    85 |

    Add animation after event is observed 86 |

    87 | 
     88 | library(shiny)
 89 | library(shinyanimate)
 90 | ui <- fluidPage(
 91 |   withAnim(),
 92 |   div( id = 'shinyLogo', tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px")),
 93 |   actionButton(inputId = "button", label = "Animate")
 94 | )
 95 | server <- function(input, output, session) {
 96 |   observeEvent(input$button,{
 97 |     startAnim(session, 'shinyLogo', 'shakeX')
 98 |   })
 99 | }
100 | shinyApp(ui, server)
    101 |

    102 |
    103 |
    104 |

    Add animation on mouse hover 105 |

    106 | 
    107 | library(shiny)
108 | library(shinyanimate)
109 | ui <- fluidPage(
110 |   withAnim(),
111 |   div( id = 'shinyLogo', tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px"))
112 | )
113 | server <- function(input, output, session) {
114 |   observe(addHoverAnim(session, 'shinyLogo', 'pulse'))
115 | }
116 | shinyApp(ui, server)
    117 |

    118 |
    119 |
    120 |

    Add animation when the element comes into view after scrolling 121 |

    122 | 
    123 | library(shiny)
124 | library(shinyanimate)
125 | ui <- fluidPage(
126 |     withAnim(),
127 |     tags$h1('Scroll below to see an animation'),
128 |     br(), br(), br(), br(), br(), br(), br(),
129 |     br(), br(), br(), br(), br(), br(), br(),
130 |     div( id = 'shinyLogo', tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px"))
131 | )
132 | server <- function(input, output, session) {
133 |     observe(addScrollAnim(session, 'shinyLogo', 'bounceInRight'))
134 | }
135 | shinyApp(ui, server)
    136 |





    137 |
    138 |
    139 |

    Working with modules 140 |

    141 | 
    142 | library(shiny)
143 | library(shinyanimate)
144 | 
145 | animUI <- function(id, label = "Animate") {
146 |   ns <- NS(id)
147 |   tagList(
148 |     div( id = ns("anim"), tags$img(src= "http://hexb.in/hexagons/shiny.png", width = "100px", height = "100px")),
149 |     actionButton(inputId = ns("button"), label = label)
150 |   )
151 | }
152 | 
153 | animServer <- function(id) {
154 |   moduleServer(
155 |     id,
156 |     function(input, output, session) {
157 |       observeEvent(input$button,{
158 |         startAnim(session, id = "anim", type = 'shakeX' )
159 |     }
160 |   )
161 |     }
162 | )}
163 | 
164 | ui <- fluidPage(
165 |   withAnim(),
166 |   animUI("logo")
167 | )
168 | server <- function(input, output, session) {
169 |   animServer("logo")
170 | }
171 | 
172 | shinyApp(ui, server)
    173 |
    174 |
    175 |
    176 |

    Available Animations 177 |

    178 |
    179 |

    Attention seekers 180 |

    181 |
    182 |

    bounce 183 |

    184 |

    185 |
    186 |
    187 |

    flash 188 |

    189 |

    190 |
    191 |
    192 |

    pulse 193 |

    194 |

    195 |
    196 |
    197 |

    rubberBand 198 |

    199 |

    200 |
    201 |
    202 |

    shakeX 203 |

    204 |

    205 |
    206 |
    207 |

    shakeY 208 |

    209 |

    210 |
    211 |
    212 |

    headShake 213 |

    214 |

    215 |
    216 |
    217 |

    swing 218 |

    219 |

    220 |
    221 |
    222 |

    tada 223 |

    224 |

    225 |
    226 |
    227 |

    wobble 228 |

    229 |

    230 |
    231 |
    232 |

    jello 233 |

    234 |

    235 |
    236 |
    237 |

    heartBeat 238 |

    239 |

    240 |
    241 |
    242 |
    243 |

    Back entrances 244 |

    245 |
    246 |

    backInDown 247 |

    248 |

    249 |
    250 |
    251 |

    backInLeft 252 |

    253 |

    254 |
    255 |
    256 |

    backInRight 257 |

    258 |

    259 |
    260 |
    261 |

    backInUp 262 |

    263 |

    264 |
    265 |
    266 |
    267 |

    Back exits 268 |

    269 |
    270 |

    backOutDown 271 |

    272 |

    273 |
    274 |
    275 |

    backOutLeft 276 |

    277 |

    278 |
    279 |
    280 |

    backOutRight 281 |

    282 |

    283 |
    284 |
    285 |

    backOutUp 286 |

    287 |

    288 |
    289 |
    290 |
    291 |

    Bouncing entrances 292 |

    293 |
    294 |

    bounceIn 295 |

    296 |

    297 |
    298 |
    299 |

    bounceInDown 300 |

    301 |

    302 |
    303 |
    304 |

    bounceInLeft 305 |

    306 |

    307 |
    308 |
    309 |

    bounceInRight 310 |

    311 |

    312 |
    313 |
    314 |

    bounceInUp 315 |

    316 |

    317 |
    318 |
    319 |
    320 |

    Bouncing exits 321 |

    322 |
    323 |

    bounceOut 324 |

    325 |

    326 |
    327 |
    328 |

    bounceOutDown 329 |

    330 |

    331 |
    332 |
    333 |

    bounceOutLeft 334 |

    335 |

    336 |
    337 |
    338 |

    bounceOutRight 339 |

    340 |

    341 |
    342 |
    343 |

    bounceOutUp 344 |

    345 |

    346 |
    347 |
    348 |
    349 |

    Fading entrances 350 |

    351 |
    352 |

    fadeIn 353 |

    354 |

    355 |
    356 |
    357 |

    fadeInDown 358 |

    359 |

    360 |
    361 |
    362 |

    fadeInDownBig 363 |

    364 |

    365 |
    366 |
    367 |

    fadeInLeft 368 |

    369 |

    370 |
    371 |
    372 |

    fadeInLeftBig 373 |

    374 |

    375 |
    376 |
    377 |

    fadeInRight 378 |

    379 |

    380 |
    381 |
    382 |

    fadeInRightBig 383 |

    384 |

    385 |
    386 |
    387 |

    fadeInUp 388 |

    389 |

    390 |
    391 |
    392 |

    fadeInUpBig 393 |

    394 |

    395 |
    396 |
    397 |

    fadeInTopLeft 398 |

    399 |

    400 |
    401 |
    402 |

    fadeInTopRight 403 |

    404 |

    405 |
    406 |
    407 |

    fadeInBottomLeft 408 |

    409 |

    410 |
    411 |
    412 |

    fadeInBottomRight 413 |

    414 |

    415 |
    416 |
    417 |
    418 |

    Fading exits 419 |

    420 |
    421 |

    fadeOut 422 |

    423 |

    424 |
    425 |
    426 |

    fadeOutDown 427 |

    428 |

    429 |
    430 |
    431 |

    fadeOutDownBig 432 |

    433 |

    434 |
    435 |
    436 |

    fadeOutLeft 437 |

    438 |

    439 |
    440 |
    441 |

    fadeOutLeftBig 442 |

    443 |

    444 |
    445 |
    446 |

    fadeOutRight 447 |

    448 |

    449 |
    450 |
    451 |

    fadeOutRightBig 452 |

    453 |

    454 |
    455 |
    456 |

    fadeOutUp 457 |

    458 |

    459 |
    460 |
    461 |

    fadeOutUpBig 462 |

    463 |

    464 |
    465 |
    466 |

    fadeOutTopLeft 467 |

    468 |

    469 |
    470 |
    471 |

    fadeOutTopRight 472 |

    473 |

    474 |
    475 |
    476 |

    fadeOutBottomRight 477 |

    478 |

    479 |
    480 |
    481 |

    fadeOutBottomLeft 482 |

    483 |

    484 |
    485 |
    486 |
    487 |

    Flippers 488 |

    489 |
    490 |

    flip 491 |

    492 |

    493 |
    494 |
    495 |

    flipInX 496 |

    497 |

    498 |
    499 |
    500 |

    flipInY 501 |

    502 |

    503 |
    504 |
    505 |

    flipOutX 506 |

    507 |

    508 |
    509 |
    510 |

    flipOutY 511 |

    512 |

    513 |
    514 |
    515 |
    516 |

    Lightspeed 517 |

    518 |
    519 |

    lightSpeedInRight 520 |

    521 |

    522 |
    523 |
    524 |

    lightSpeedInLeft 525 |

    526 |

    527 |
    528 |
    529 |

    lightSpeedOutRight 530 |

    531 |

    532 |
    533 |
    534 |

    lightSpeedOutLeft 535 |

    536 |

    537 |
    538 |
    539 |
    540 |

    Rotating entrances 541 |

    542 |
    543 |

    rotateIn 544 |

    545 |

    546 |
    547 |
    548 |

    rotateInDownLeft 549 |

    550 |

    551 |
    552 |
    553 |

    rotateInDownRight 554 |

    555 |

    556 |
    557 |
    558 |

    rotateInUpLeft 559 |

    560 |

    561 |
    562 |
    563 |

    rotateInUpRight 564 |

    565 |

    566 |
    567 |
    568 |
    569 |

    Rotating exits 570 |

    571 |
    572 |

    rotateOut 573 |

    574 |

    575 |
    576 |
    577 |

    rotateOutDownLeft 578 |

    579 |

    580 |
    581 |
    582 |

    rotateOutDownRight 583 |

    584 |

    585 |
    586 |
    587 |

    rotateOutUpLeft 588 |

    589 |

    590 |
    591 |
    592 |

    rotateOutUpRight 593 |

    594 |

    595 |
    596 |
    597 |
    598 |

    Specials 599 |

    600 |
    601 |

    hinge 602 |

    603 |

    604 |
    605 |
    606 |

    jackInTheBox 607 |

    608 |

    609 |
    610 |
    611 |

    rollIn 612 |

    613 |

    614 |
    615 |
    616 |

    rollOut 617 |

    618 |

    619 |
    620 |
    621 |
    622 |

    Zooming entrances 623 |

    624 |
    625 |

    zoomIn 626 |

    627 |

    628 |
    629 |
    630 |

    zoomInDown 631 |

    632 |

    633 |
    634 |
    635 |

    zoomInLeft 636 |

    637 |

    638 |
    639 |
    640 |

    zoomInRight 641 |

    642 |

    643 |
    644 |
    645 |

    zoomInUp 646 |

    647 |

    648 |
    649 |
    650 |
    651 |

    Zooming exits 652 |

    653 |
    654 |

    zoomOut 655 |

    656 |

    657 |
    658 |
    659 |

    zoomOutDown 660 |

    661 |

    662 |
    663 |
    664 |

    zoomOutLeft 665 |

    666 |

    667 |
    668 |
    669 |

    zoomOutRight 670 |

    671 |

    672 |
    673 |
    674 |

    zoomOutUp 675 |

    676 |

    677 |
    678 |
    679 |
    680 |

    Sliding entrances 681 |

    682 |
    683 |

    slideInDown 684 |

    685 |

    686 |
    687 |
    688 |

    slideInLeft 689 |

    690 |

    691 |
    692 |
    693 |

    slideInRight 694 |

    695 |

    696 |
    697 |
    698 |

    slideInUp 699 |

    700 |

    701 |
    702 |
    703 |
    704 |

    Sliding exits 705 |

    706 |
    707 |

    slideOutDown 708 |

    709 |

    710 |
    711 |
    712 |

    slideOutLeft 713 |

    714 |

    715 |
    716 |
    717 |

    slideOutRight 718 |

    719 |

    720 |
    721 |
    722 |

    slideOutUp 723 |

    724 |

    725 |
    726 |
    727 |
    728 |
    729 |
    730 | 731 | 768 |
    769 | 770 | 771 | 782 |
    783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | --------------------------------------------------------------------------------