> For the complete documentation index, see [llms.txt](https://training.callysto.ca/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://training.callysto.ca/infovis/animate-graphs.md).
# Animations - HTML5
We can use html5 for animation, as suggested in this web page:
This seems to be the modern way to do animation in Python.
First step is to initialize some things in Python.
* we need %matplotlib inline to get things to plot right on the notebook
* we need numpy for the math
* se need matplotlib for plotting
* we need animation from matplotlib, and HTML from iPython.display to show the animations
We get all these with the following imports:
```python
%matplotlib inline
import numpy as np
import matplotlib.pyplot as plt
from matplotlib import animation, rc
from IPython.display import HTML
```
We now have four steps to get an animated plot
* set up the figure frame
* define the initializing function
* define the function that draws each frame of the animation
* call the animator function, which creates all the frames and saves them for you
Then we are ready to call "HTML" to display the animation.
```python
# First set up the figure, the axis, and the plot element we want to animate
fig, ax = plt.subplots()
ax.set_xlim(( 0, 2))
ax.set_ylim((-2, 2))
line, = ax.plot([], [], lw=2)
# NOTE: THIS WILL DISPLAY JUST AN EMPTY BOX.
```
```python
# initialization function: plot the background of each frame
def init():
line.set_data([], [])
return (line,)
```
```python
# animation function. This is called sequentially
def animate(i):
x = np.linspace(0, 2, 1000)
y = np.sin(2 * np.pi * (x - 0.01 * i))
line.set_data(x, y)
return (line,)
```
```python
# call the animator. blit=True means only re-draw the parts that have changed.
anim = animation.FuncAnimation(fig, animate, init_func=init,
frames=100, interval=20, blit=True)
```
```python
HTML(anim.to_html5_video())
```
Your browser does not support the video tag.
Anytime you need the animation, you can call it up at will, with the following code:
```python
# equivalent to rcParams['animation.html'] = 'html5'
rc('animation', html='html5')
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://training.callysto.ca/infovis/animate-graphs.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.