I know this question is solved, but here's the version without shinyjs if anyone is interested.
This can be done by creating a css class glow using the animation property and applying the class glow inline. (I also added support for other browsers -webkit-...). The js function evaluates all of the css classes applied to myButton and determines if grow is present. If it is, then it is removed from this element.
library(shiny)
shinyApp(
ui = fluidPage(
#Create glowing effect
tags$head(
tags$style(
"@-webkit-keyframes glowing {
0% { background-color: #fcfcfc; box-shadow: 0 0 5px #0795ab; }
50% { background-color: #e8f0fc; box-shadow: 0 0 20px #43b0d1; }
100% { background-color: #fcfcfc; box-shadow: 0 0 5px #0795ab; }
}
@keyframes glowing {
0% { background-color: #fcfcfc; box-shadow: 0 0 5px #0795ab; }
50% { background-color: #e8f0fc; box-shadow: 0 0 20px #43b0d1; }
100% { background-color: #fcfcfc; box-shadow: 0 0 5px #0795ab; }
}
.glow {
-webkit-animation: glowing 1.3s infinite;
animation: glowing 1.3s infinite;
}
"
)
),
#Apply effect to button
actionButton("myButton", "Click me...", class="glow"),
# remove class when btn clicked
tags$script(type="text/javascript",
"
const btn = document.getElementById('myButton');
btn.addEventListener('click', function(){
const classes = new Array(btn.classes);
if( classes.indexOf('glow') ){
btn.classList.remove('glow');
}
})
"
)
),
server = function(input, output, session) { }
)