Animation

Apply motion to help users see changes in information.

Purpose

Animation communicates the relationships between two or more elements. Use motion to make state changes explicit and enhance or add information to a data vis. When elements change, their relationships are affected. Use animation to clarify how this change happens and its influence on the environment or other data sets.

Move data with precision

Start from the initial inspiration of machines in motion to inspire a mechanical feeling of standard movements and systematic behaviors. Whether your concept comes from a space craft or self-driving car, use the essence of the machine in order to convey a feeling, a common identity, and the object’s sense of belonging in its environment.

Motion principles

Animation of an Accumulation/sedimentation effect

Accumulation / sedimentation

Layers of visualizations (background grid, elements, secondary dimensions) are drawn on top of each other, creating a stratification of information.

Animation of Sequentiality effect

Sequentiality

Elements appear at different times and appear consequentially, relying on tiny delays (from left to right) to create an effect of transition.

Animation of iteration effect

Iteration

Machines typically do cyclical movements and the process is iterated for countless times, providing the feeling of endless exploration.

Animation of Rhythm effect

Rhythm

Like machines behaviors, transitions should look always the same. They must be precise, efficient, repetitive, and typical.

Behaviors

Entrance

Make elements appear from a common starting point (from the bottom, from the center, etc.). Add consequentiality through the use of slight delays. Be consistent in your system of ordering elements (from left to right, from bigger to smaller).

Aggregation

Use the same motion to make elements point the same direction. Horizontal movements draw the shapes into a stack, giving the user the perception of the elements’ coming together. When appropriate, use color shades to give visual feedback of the previous state.

Partition

Make elements come out and grow from a common shape. Clearly show the common shape where smaller shapes come from. Rely on color variations to emphasize different levels of data detail and depth.

Update

Motion can be applied to show the user what is updating and how. Animate shapes in order to make clear what is growing and what is lowering, avoiding sharp switches from a status to another. When users apply changes, do not reload the animation.

Grid entrance

Animate grids as individual layers of a visualization which follow the same rules of the other elements. The draw-in effect of the lines should be updated consistently, but only when necessary. Avoid redundant and excessive grid animation when, for instance, the axis scales does not change.

Back to top