Animating Many Frames Quickly

Mix.install([
  {:plotly_ex, "~> 0.3"},
  {:kino, "~> 0.18"}
])

Section

frame.duration: 0 and redraw: false enable maximum performance. redraw: false skips a full SVG redraw — safe when only trace data changes (not layout or axes). With transition.duration: 0, frames swap without interpolation.

alias Plotly.{Figure, Scatter}

n = 200
frames =
  for i <- 1..n do
    t = i / 10.0
    x = Enum.map(0..99, fn j -> :math.cos(t + j * 0.2) end)
    y = Enum.map(0..99, fn j -> :math.sin(t + j * 0.2 * 1.3) end)
    %{name: "f#{i}", data: [%{x: x, y: y}]}
  end

Figure.new(
  data: [Scatter.new(
    x: Enum.map(0..99, &:math.cos/1),
    y: Enum.map(0..99, &:math.sin/1),
    mode: "markers",
    marker: %{size: 4}
  )],
  layout: %{
    title: "#{n} frames at max speed (duration: 0, redraw: false)",
    xaxis: %{range: [-1.5, 1.5], autorange: false},
    yaxis: %{range: [-1.5, 1.5], autorange: false},
    updatemenus: [%{
      type: "buttons",
      showactive: false,
      buttons: [%{
        label: "▶ Play (fast)",
        method: "animate",
        args: [nil, %{frame: %{duration: 0, redraw: false}, transition: %{duration: 0}}]
      }]
    }]
  },
  frames: frames
)
|> Plotly.show()