How to change plotly animation speed within a javascript code in R?

Question

I want to change the speed of a plotly animation in R. However, the animation is not triggered by the default play button provided by plotly animations. It is triggered by a click on a Shiny action button, according to a JS code. The animation_opts() parameters do not seem to be taken into account on this case.

I have tried changing the animation_opts() parameters such as "frame" and "transition", but the animation remains the same. I have also tried changing these parameters within the javascript code and the animation doesn't even start.

library(shiny)
  library(plotly)
  library(htmlwidgets)

  ui <- fluidPage(
    actionButton("anim", "Animate"),
    plotlyOutput("plot")
  )

  server <- function(input, output){
    output[["plot"]] <- renderPlotly({
      df <- data.frame(
        x = c(1,2,1), 
        y = c(1,2,1), 
        f = c(1,2,3)
      )
      df %>%
        plot_ly(
          x = ~x,
          y = ~y,
          frame = ~f,
          type = 'scatter',
          mode = 'markers',
          marker = list(size = 20),
          showlegend = FALSE
        ) %>% 
        animation_opts(frame = 5000, transition = 4500, redraw = FALSE) %>%
        animation_button(visible = FALSE) %>%
        onRender("
          function(el,x){
            $('#anim').on('click', function(){Plotly.animate(el);});
          }")

    })
  }

  shinyApp(ui, server)

I want to have a parameter for the frame and transition durations of the plotly animation and be able to change it within the code.

Answer 1

Here is how to set these options:

library(shiny)
library(plotly)
library(htmlwidgets)

ui <- fluidPage(
  actionButton("anim", "Animate"),
  plotlyOutput("plot")
)

server <- function(input, output){
  output[["plot"]] <- renderPlotly({
    df <- data.frame(
      x = c(1,2,1), 
      y = c(1,2,1), 
      f = c(1,2,3)
    )
    df %>%
      plot_ly(
        x = ~x,
        y = ~y,
        frame = ~f,
        type = 'scatter',
        mode = 'markers',
        marker = list(size = 20),
        showlegend = FALSE
      ) %>% 
#      animation_opts(frame = 5000, transition = 4500, redraw = FALSE) %>%
      animation_button(visible = FALSE) %>%
      onRender("
          function(el,x){
            $('#anim').on('click', function(){
              Plotly.animate(el, 
                null,
                {
                  transition: {
                    duration: 2000,
                    easing: 'cubic-in-out'
                  },
                  frame: {
                    duration: 2000
                  }
                }
              );
            });
          }")
  })
}

shinyApp(ui, server)