# Animation

Animate the relationship that matters: parts joining, a request reaching its destination, or a construction changing while one rule stays fixed. Tell Plotter what the movement should explain and where it will appear.

```text
/plotter Animate this drawing for a homepage illustration.
A core seats in its carrier, then the line advances for the next assembly.
Keep the composition quiet and make the handoff easy to follow.
```

In Codex, start with `$plotter` instead. Supply the editable drawing when you have one; for a new subject, Plotter starts with a readable [still](/docs/drawing).

## Decide what should move

Choose the main change and the fixed reference that makes it understandable. A carrier can stay still while a core seats. A pivot stays fixed while a pendulum swings. A request moves through a stable route.

Supporting marks do not all need animation. Keep labels, grids, and guides still unless the geometry they describe changes. Hatching stays attached to its region; dimensions follow their actual witnesses.

## Stage the story

Establish the starting state, the decisive event, and the readable result. Sequence cause and response: a core seats before the carrier advances; a request arrives before its destination reacts.

Give the result time to register when recognition needs a hold. Continuous mechanisms have different needs: Newton’s cradle transfers motion at contact without stopping there, and an orbit continues through its starting point at the same speed.

Choose a meaningful ending. A completed action can play once. A reversible adjustment can return. A repeating mechanism should produce its next cycle naturally rather than abruptly teleporting back or undoing the result without a reason.

## Shape the timing

Use different timing for different jobs. Controlled placement can slow into alignment. A steady signal should not stop at every bend. A swing slows near its turn, then accelerates toward contact.

Watch the whole sequence at its intended size. If the result is missed, lengthen its hold; if nothing happens for too long, shorten that gap. If several moving parts compete, simplify the staging. Slowing everything down rarely fixes those different problems.

The complete skill includes an annotated motion gallery with the assembly line, Newton’s cradle, and orbits. Open `assets/examples/motion-studies.html` from the installed skill, or [download the motion studies](/plotter/downloads/motion-studies.html). The notes explain what to borrow and where each example can mislead. They are teaching studies, not a new approved reference set.

## Match the destination

The output follows your brief. A site animation stays in the site’s component system. A standalone animation includes its editable source and the resources needed to open it. Ask for a standalone HTML file when that is what you need; a playback toolbar is not part of every illustration.

On this website, loops have no visible controls and pause when off-screen or when the page is hidden. Reduced motion shows a deliberately chosen still. A paused frame halfway through a move may be less readable than that fallback.

For a standalone review file, pause/resume, replay, and a still view help inspect the work. [Download the assembly animation](/plotter/downloads/assembly-line.html) for an editable example. The small `assets/examples/assembly-motion.html` in the skill demonstrates the player wiring separately from the motion-design guidance.

## Review the movement and the still

Watch a full cycle, then inspect approach, contact, separation, and the return boundary. Check for doubled edges, drifting hatches, crossed labels, and measurements that stop matching their geometry. Keep transparent forms transparent.

Review the fallback on its own, and check the host’s reduced-motion and visibility behavior. Source inspection and sampled frames help with geometry; they do not establish how the rhythm feels in playback. Report what was actually inspected.

When a separate static SVG is needed, export the selected still using the [drawing guide](/docs/drawing#export-a-static-svg). The static exporter does not export active animation.