LaTeX Solution Animations

Paste a worked solution written as a LaTeX align* block and Molkit turns it into a step-by-step animation. Each line of the block becomes one step. Molkit works out what each line does to the one before it (substitute, rearrange, evaluate, round, cancel) and checks the arithmetic before it animates the step. Matching terms move into place, struck-out terms are cancelled, every pause has a caption naming the operation, and the final answer is boxed. The result is a single animation you can preview, check and export as an animated SVG or a video.

These animations are separate from the molecule animations described in Animation States. You edit them in their own LaTeX workspace instead of on the state strip.

Example: grams of water from moles

Here is a three-line calculation of the mass of 2.50 mol of water:

\begin{align*}
  m(\mathrm{H_2O}) &= n(\mathrm{H_2O}) ~ M(\mathrm{H_2O}) \\
  &= 2.50~\mathrm{mol} \times \frac{18.02~\mathrm{g}}{1~\mathrm{mol}} \\
  &= 45.1~\mathrm{g}
\end{align*}

Imported with the default options, this produces a three-step animation. The formula is on the page from the start. In the second step the values take the place of the symbols, one at a time, under a caption that names both quantities. In the third, the product is evaluated, checked against the numbers shown, and the result is boxed as the final answer. To show the mol units cancelling, strike them out in the source with \cancel{\mathrm{mol}}; Molkit cancels what you strike and does not strike units on its own.

How each step plays

Molkit reads every step as one or more operations and checks each one at the precision of the numbers you wrote. A step it cannot check still plays, and its caption then only describes the change instead of claiming it. The inspector shows, step by step, which operations were checked.

Each line is built in reading order, and the side being solved for is drawn last.
The animation pauses after each step. The caption names the operation, for example Substitute, Evaluate, Round to 3 significant figures (decimal places after a sum or difference), Rearrange the equation, Multiply by the conversion factor or Cancel. When one step substitutes several values, the caption names each quantity (up to four), and the animation stops on each value in turn.
A rearrangement shows the equations in between. The combined gas law, for example, is multiplied by T2 and then the sides are swapped.
Distribute and factor play one term at a time, with arrows showing where each term goes.
A term you strike out with \cancel, \bcancel, \xcancel or \cancelto is cancelled where it stands instead of moving.
When a solution goes on to a second equation after a result, the new equation plays under a Next: caption that names it, and the earlier results it reuses are outlined.
At the last stop the finished derivation is shown at full strength with the answer boxed.

In the preview window, the Line and Op buttons choose whether stepping forward stops at each line or at each operation.

Import a solution

Choose Insert > Import LaTeX Solution… or press Ctrl+Shift+L. The LaTeX editor opens with Animate derivation (step-by-step) already checked. You can also open Insert > LaTeX Equation… and check that box yourself.
Paste your align* block into the input. A row of status pills under the input reports how the source parses as you type; amber pills are warnings and do not block the import.
Check the Options bar, which opens automatically in this mode (see below).
Click Import Animation.

If the document already has content, a prompt titled “This document already has content” explains that animations work best one per document and offers Open in new tab or Add here anyway. Cancelling the prompt returns you to the editor with your source intact. An empty document imports in place.

When the import finishes, the LaTeX workspace opens on the new animation.

Import options

The Options bar holds three settings, and your choices are remembered for the next import:

Option	Default	Effect
Substitution	Card flip	How a symbol becomes its value. Card flip turns the symbol over in place; Lift and drop lifts the symbol out and drops the value in. You can change it later under Solution options in the workspace.
Unit cancellation (strike-through)	On	Kept from the earlier engine. The current engine cancels the terms you strike out in the source, so this box does not change a new import.
Default transition mode	Term-level	Kept from the earlier engine and has no effect on a new import. To make one step fade as a whole line, use Choreography in the inspector.

When you open the dialog to write a new equation, the font is STIX 2 unless you picked another one before.

Work in the LaTeX workspace

The workspace opens automatically after an import. To return to it later, click Edit solution… in the animation toolbar (shown whenever the document has a LaTeX animation). Click Done or press Esc to go back to the canvas.

The workspace has four areas: the steps list on the left, a preview of the selected step in the center, the source pane underneath, and the inspector on the right. The ☰ button hides or shows the steps list, and the button beside Done hides or shows the inspector.

The header also has Fit all (fit every step in view), Preview (play the animation), Export (open the export dialog), Badges (show which terms are matched between lines) and Terms (mark notation terms; hover one for its definition). The ⋮ menu holds Delete animation….

Steps list

Click a step to select it. Double-click its title, or click its pencil, to rename it. Right-click a step for these commands:

Edit hold… sets how long the animation rests on that step.
Duplicate state copies the step.
Insert blank after adds an empty step after it.
Delete state removes it. The command is unavailable when only one step is left.

The engine builds the animation from the source pane and times each pause by its own rules, so these commands do not change what plays. To change the steps, edit the source and click Re-parse. If the steps list and the source no longer have the same number of lines, the inspector says so and the preview plays the lines of the source.

Source pane

The source pane shows the LaTeX you imported, with the same live parse status as the import dialog. When you change the text, the pane is marked ”• edited”; click Re-parse to rebuild the animation in place from the new source. The arrow at the right of the pane header collapses it.

Inspector

Select a step to see what the engine found in the transition that leads into it.

Choreography is Auto (engine) or Whole-line fade. Choose Whole-line fade to make that one step fade in as a whole line instead of moving its terms. Motion and timing otherwise follow the engine’s built-in rules.
A sentence under the menu says how the step will play. It is marked ⚠ when part of the step could not be explained.
The operations in the step are listed with a tag: verified (checked: the next line equals this one under the operation, at the precision shown), descriptive (plays, but is not a claim that can be checked, for example a symbol renamed to another symbol) or approximate (holds only with more precise constants than the ones shown, and plays as approximately equal). Hover a tag for its meaning.
Crossfades in place lists changes that nothing explained. They fade from the old text to the new where they stand.
Notes for the author lists problems the engine raised about the step.

Reader

The Reader section (what students see and hear) shows the exported animation as a website player steps through it, one operation at a time. Click its header to open it; it builds the export first, which takes a moment. It lists the Summary read first by a screen reader, then, for each operation, what is printed On screen and what is Read aloud when the reader steps to it (“Step 3 of 9. Substitute …”). Notation that the notation dictionary does not name is read as written, and the Reader marks each place this happens so you can fix it before you export. The line of the step you selected is highlighted.

Solution options

The Solution options apply to the whole animation:

Final answer boxes the last line. On by default.
Captions names each operation during preview playback. On by default.
Notes shows the animation’s annotations (notes, arrows) on the canvas and in the exported file. On by default.
Substitution chooses Card flip or Lift and drop, as in the import options.

Export the animation

Open the Export LaTeX Animation dialog in any of three ways: File > Export LaTeX Animation… (the item appears only when the document has a LaTeX animation), Export in the workspace header, or Export > Animated SVG in the animation toolbar while the LaTeX animation is active.

Option	Effect
Filename	Defaults to a name taken from the first step, ending in `-animation`, and is remembered for each animation. A line below it shows the file that will be written.
Theme-aware (light/dark)	On by default. The current engine ignores this box: the file always takes its colours from the page it sits on (see below).
Loop continuously	Off by default: the animation plays once and rests on the final step. The section also shows the total duration.
ChemAcademy shortcode	A ready-to-copy shortcode for sites that embed files with the `mkit` shortcode, with a Copy button. Copy the SVG into the site’s `mkit/` directory, then paste the shortcode into the page.

Click Export to save. The theme and loop settings are remembered for the next export.

The exported file:

Draws the math in the text colour of the page it is placed on, so it reads on a light or a dark page. Colours you wrote in the LaTeX with \color keep their colour.
Prints as the finished derivation, every line at full strength, whatever frame the animation was on.
Carries a spoken version of each caption for screen readers, and a summary of the whole solution. Units are read as words, a bar over a digit is read as the number of significant figures it marks, and a formula the notation dictionary names is read by name (C2H6O as ethanol). Check what will be said in the Reader section before you export.
Is about a fifth smaller than files from earlier versions.

The file is driven by CSS keyframes, not SMIL, so it is scripted differently from a molecule animation. See LaTeX solution exports in the developer guide.

Export as video

To get an MP4 or WebM file, choose Export > Video… in the animation toolbar while the LaTeX animation is active. The same Export Video dialog as for molecule animations opens, and the video plays the same steps as the animated SVG, from the first line to the boxed answer. The math is drawn in dark ink, since a video has no page colour to follow. The equation is centered on a 16:9 frame with a small margin, so Match SVG gives 1920 × 1080. See Video export for the dialog options.