A timing chart as the blueprint for SMIL animation in SVG

On August 20 at Smashing Magazine, Johan Grobler described a working habit rather than a new technology. Before a single animate element is written, the animation is drawn as a timing chart, one bar per movement. Once the chart holds, writing the markup becomes transcription rather than guesswork.

Why the chart comes before the code

A SMIL animation in SVG has no single place where you see the whole. Every animate element carries its own dur and begin, so the arrangement gets assembled in your head out of scattered numbers. A timing chart returns that arrangement to one picture: the horizontal axis is time, each bar is one movement, and its length and start are exactly what goes into dur and begin.

One element, one property

The constraint the piece keeps returning to is that a single animate element changes exactly one property of one element. That makes the count climb faster than you expect. A three-dot loader, where each dot fades in and then out, takes six of them. To return a property to its starting state you use the set element.

• attributeName names the property being changed.
• from and to set the range of values.
• dur carries the duration, and fill decides what remains after it ends.
• href ties an animation to an element that is not its parent.

Synchronizing without manual arithmetic

Instead of computing every animation's offset from zero by hand, you tie a start to another animation's start or end. Writing begin="colorChange.end - 300ms" means the movement begins three tenths of a second before the named animation finishes. A positive offset pushes it later, a negative one earlier. Move one bar on the chart and the rest follow on their own, so a revision comes down to a single number.

Masking and honoring the user's setting

The piece also shows how animating a rectangle inside clipPath produces the impression of movement the shape itself does not make, separating opacity from fill-opacity for a finer fade. For users who asked their system for less motion, it suggests the picture element, which delivers a still image instead of an animated SVG under prefers-reduced-motion.