Every motion means something.

What does this motion mean?

Here's a water filter diagram. Things are moving. Ask yourself what each movement tells you.

Nothing. The star spins, the boxes bob and the water doesn't move at all. It's motion as decoration. Press the button to change that.

After you press it, there are three motions, and each one means something. The water moves from left to right: that's flow. It changes color at the filter: that's transformation. The tank fills up: that's a state change. Nothing else moves.

Watch the clip

The clip runs the same diagram, then uses motion to show the steps for changing the filter, in order.

The name for it

Six things motion can mean

If a motion doesn't carry one of these, it probably shouldn't move.

Why not animate everything?

Research on animation is more cautious than its fans. Tversky, Morrison and Bétrancourt reviewed studies of animated graphics and found that many animations taught no better than good static pictures. Animation helped when the motion matched the change the viewer needed to understand, and when it was slow and simple enough to perceive.

So: use motion for change, keep it simple, and let people slow it down or stop it. This page turns its animations off if your device asks for reduced motion.

Ask your agent

Plan the animation for the diagram below before writing any code.
List every element that will move. For each one, say what change in the real system the motion shows:
flow, cause, sequence, transformation, grouping or state change.
Delete any motion that doesn't show a real change. Keep each remaining motion simple and slow enough to follow.
Add a way to pause it, and respect prefers-reduced-motion.

Diagram and what the viewer needs to understand:
[paste here]

What good output looks like: a short list where every moving part has a reason, a few motions deleted, and a pause control.