How to Make Math Animations: A Worked Example
Take one mathematical relationship from a clear brief to a storyboard, a working animation, and a checked explanation. Start with the interactive slope example below.
Try the interactive example
A browser illustration built for this guide. Change the slope in y = mx: the marked point keeps x = 2, so its height is always 2m.
At x = 2, y = 0. The line passes through (0, 0).
The same storyboard as a finished video
1. Choose one change the viewer should understand
To make a useful math animation, choose a relationship, specify what changes, and keep the other quantities fixed. Build a short sequence around that change, check the mathematics, and then decide whether the lesson needs an interactive graph or a recorded video.
This guide's worked example is the line y = mx. The learning objective is: “Changing m changes the slope while the line continues to pass through the origin.” It needs one equation, one varying value, and a fixed point of reference. It does not need a complete introduction to algebra.
Try the working example above. At x = 2, the point's height is y = 2m. When m is 1, the point is (2, 2); when m is 2, it is (2, 4); when m is −1, it is (2, −2). Checking these three states gives you concrete reference values for the animation.
2. Write the input and a short storyboard
Use a brief precise enough for a person or an AI assistant to follow. Here is the complete brief for this example:
Explain the slope in y = mx to a beginning algebra student. Keep both axes and their scales fixed. Start with m = 0, then show 1, 2, and −1. Keep the origin visible. Mark x = 2 and show the corresponding point (2, 2m). Pause at each value so the student can compare the equation with the line. End by asking what changes when the sign of m changes.
| Beat | What appears or changes | What the learner should notice |
|---|---|---|
| Establish | Axes, y = mx, and m = 0 | The line is horizontal and passes through the origin |
| First change | m = 1; mark (2, 2) | Two units right corresponds to two units up |
| Compare | m = 2; move the point to (2, 4) | The same horizontal change now produces twice the vertical change |
| Reverse | m = −1; move the point to (2, −2) | Moving right now moves down; the intercept has stayed at zero |
The interactive example above uses this sequence. Pause it or move the slider yourself to inspect intermediate values. The finished Manim video follows the same four targets, with animated transitions and longer holds. Both are teaching examples made for this guide; the MP4 is a standalone Python render, not a result from a browser generator.
3. Recreate the relationship in a graphing tool
For a browser workflow, open the Desmos Graphing Calculator and enter y = mx. Add a slider for m, set its bounds to −2 and 2, and choose a step of 0.5. Add (2, 2m) to keep a point tied to the same variable. Use the slider's play control to animate, or move it manually to the storyboard values.
Desmos documents the slider bounds, step, and play controls in its slider guide. Those controls reproduce the mathematical relationship; you still choose the pacing, labels, and narration for your particular audience.
If you have chosen a coding workflow, follow our Manim tutorial with complete Python source to reproduce the video above. It includes a tested version, the render command, and the expected output path. For an agent-assisted workflow, provide the brief and reference values together. Ask for a storyboard before a finished video so you can check the explanation while revisions are still small.
Still choosing a tool? The math animation software comparison separates interactive graphing, hand-written scenes, and browser-based Manim workflows. You do not need to learn every approach to complete this example.
4. Make motion explain the relationship
Keep the axes fixed across all four states. If the graph automatically rescales at the same time as m changes, a steeper line can appear almost unchanged. Keep the equation visible, and change its value at the same time as the graph. Label the point with its coordinates instead of asking the viewer to estimate them from motion alone.
For this guide's illustration, the horizontal and vertical screen scales differ to fit the diagram. Read slope from the labeled coordinate changes, not from the line's apparent angle. At x = 2, m = 2 must still give y = 4. If the lesson is specifically about geometric angles, use equal axis scales instead.
Use one stable color for the line and its marked point. Show negative values with a minus sign as well as a position below the axis. Hold each important state long enough to read the label; the play control here pauses briefly between the storyboard values and stops at the final state.
5. Review a draft with specific corrections
These are checks you can apply to your own draft, not a claim that a particular generator made these mistakes:
| If the draft does this | Make this revision | Verify the result |
|---|---|---|
| Changes the axis range while changing m | Keep the same axes for the entire sequence | The tick positions stay fixed between states |
| Shows a point that is not on the line | Tie both the line and the point to the same m | At m = −1, the point reads (2, −2) |
| Flashes through every value | Pause at 0, 1, 2, and −1 | A viewer can read each coordinate before it changes |
| Says “the line moves up” | Explain that the slope changes while the intercept stays zero | The line still passes through (0, 0) |
Review once without sound, then listen without watching. The visual sequence should show the relationship; the narration should explain why it matters. Automatic layout or media checks do not establish that either explanation is mathematically correct.
6. Share the form your lesson needs
The downloadable video above is one completed output for this brief: a silent 12-second MP4 at 1280 × 720. Its visible readout supplies the slope and point coordinates. Use it as a checked starting point, or render the source yourself before making changes. Browse the animation examples when you need a different visual pattern.
For an interactive lesson, share the graph or use the illustration on this page. For a video, record a deliberate pass through the storyboard or use your chosen tool's video output. If you record a graph, include the axis labels and values, leave a short pause at each beat, and listen to the resulting clip before sharing it. Add narration in your recording or editing workflow if the animation alone is not enough.
A concise narration for the four beats is: “When m is zero, y is zero. At m equals one, two steps right gives two up. At m equals two, the same two steps right gives four up. With m equals minus one, it gives two down. The line always passes through the origin.”
Watch the final result at the size your learners will use. Check label readability, clipping, timing, sound, and whether the takeaway is still visible at the end. Keep the brief, source values, and editable project alongside the result so that a later correction does not require starting over.
Continue with your own material
Replace the slope example with one relationship from your lesson, but keep the same discipline: one objective, a concrete input, a short storyboard, a preview, and explicit checks. The chi-square explainer shows a more involved numerical story; the notes-to-video guide covers preparing written material for LemmaReel's existing rendering workflow.
Browser-based generation in LemmaReel is planned. This tutorial teaches a workflow you can try now with the interactive example and graphing tools; it does not require that planned feature. Check the current setup guide before using LemmaReel's existing rendering build.
Try a different teaching pattern
The slope lesson shows how a parameter changes a graph. For a geometric argument, try the Pythagorean theorem animation; for a linked representation, explore the unit circle animation. Both include interactive checks and a sequence you can adapt for a lesson.