Motion Graphics

Motion graphics are graphics that move. This does not mean drawn characters with a story, but rather text, shapes, lines, numbers and logos. These elements are animated over time: they fly in, grow, change color or morph into one another. The purpose is almost always to make a piece of information understandable. When a bar chart in a news broadcast grows step by step while the presenter reads out the figures, that is a typical example. The German term for this is Bewegtgrafik, though almost nobody uses it in everyday professional life.

Why moving graphics explain more than still images

A still graphic shows a state. A moving graphic can show a change. That is exactly where its advantage lies: processes, sequences and relationships are easier to grasp in motion than in a series of individual images. Anyone wanting to explain how money flows from one bank to another does not draw an arrow, but actually lets a dot travel.

On top of that comes the effect on attention. The human eye reacts strongly to movement, an old biological legacy. Advertising and social networks exploit this, because in an endless feed only a few seconds decide between scrolling on or pausing. That is why motion design has become its own professional field in many editorial teams and agencies.

The same idea is also embedded in software. When a menu unfolds smoothly instead of snapping open abruptly, it is easier to understand where it came from. Such brief animations are called micro-interactions and are meant to make the interaction traceable. Motion graphics are therefore not just decoration, but often part of the explanation itself.

Keyframes, layers and rendering

The basic technique is called keyframing. Two states are set for an object: at the start the logo is on the left and invisible, after one second it is in the center and fully visible. These defined points are the keyframes. The software calculates all the in-between frames itself, usually 25 or 30 per second. The technical term for this is interpolation, meaning the filling of the gap between two known values.

Work is done in layers, similar to transparent sheets stacked on top of one another. Each layer contains one element and has its own timeline. Crucial for the overall impression is so-called easing: a movement that starts slowly and ends slowly looks natural, while a uniform one looks mechanical. At the end comes rendering, in which the computer calculates a finished video file from all the layers.

Common programs are After Effects and Blender, and for animated graphics on websites the format Lottie. Artificial intelligence is increasingly getting involved. Generative video tools create moving images from a text description, while other tools automatically separate objects from the background. This does not replace design decisions, but it does save a lot of manual work.

From the news studio to the loading bar

Motion graphics are most visible on television and video platforms. This includes show intros, lower-third captions with the interviewee’s name, and the stock prices that scroll across the screen during business news. Explainer videos on YouTube rely on them almost entirely, because abstract topics like inflation are hard to film.

In products, the technique often goes unnoticed. The loading circle of an app, the animation when locking a smartphone, or a button lighting up are motion graphics on a small scale. Large companies create their own guidelines for this, which even specify how many milliseconds a transition may take.

One common confusion is worth clarifying: motion graphics are not the same as animated films. A cartoon tells a story with characters, while motion graphics convey a message using graphic elements. Nor are they visual effects, since those alter real filmed footage. The boundaries blur in everyday use, but job postings usually list these fields separately.