FuncAnimation from matplotlib.animation

[yoon.tw]

Dear friends,

I have a script that shows an animation using FuncAnimation from ‘matplotlib.animation’. The script works fine, but it does not seem to work when using streamlit. My code using streamlit looks like this:

animation = FuncAnimation(fig, ...)
pyplot(fig)

Is there a way to show the animation like this in streamlit?

Thanks!

[dataprofessor]

Hi @yoon.tw

It is possible and you may need to use the components API.

Here are the related posts:

Matplotlib Animation.FuncAnimation Support

Is there a way to display a matplotlib animation using the animation.FuncAnimation tool already developed in matplotlib. For example, if I generate the animation: ani = animation.FuncAnimation(fig, animate, interval=5000) how to I show the output? Because streamlit.pyplot() does not show the real-time animation. Please, any advice would be appreciated, I have tried every post related to animations and it does not work.

A working example here:

Matplotlib animation in Streamlit through HTML/JS

So this is my little discovery of the day, you can convert a Matplotlib animation to a static HTML/JS, and should work well for small animations. import numpy as np import matplotlib.pyplot as plt import matplotlib.animation as animation import streamlit as st import streamlit.components.v1 as components def update_line(num, data, line): line.set_data(data[..., :num]) return line, fig = plt.figure() # Fixing random state for reproducibility np.random.seed(19680801) data = np.random.…

Hope this helps!

[yoon.tw]

Dear @dataprofessor

Thanks a lot; it works. In fact, I did have my own primitive solution, which turned the animation into a gif file and showed it using st.image as follows:

ani = animation.FuncAnimation(...)
ani.save('file_name.gif', writer=PillowWriter())
st.image('file_name.gif')

The solution you mentioned is actually better. However, both methods take time to prepare the animation unlike the ordinary case (without using streamlit) where the animation is displayed right after the ani = animation.FuncAnimation(...) is executed without any delay. So, I still hope to see another solution that shows the animation immediately.

Thanks a lot again.

(PS) By the way, this is the code that shows the animation using FuncAnimation. https://twy-playground.streamlit.app/Control_System