Skip to main contentIBM Design Language

Classic principles

Most animators are familiar with the 12 basic principles of animation. Although these principles originally applied to character animation, our unique interpretation of each one makes it decidedly relevant when applying motion to graphic forms.

Classic animation principles

Squash and stretch

Embrace acceleration and reaction but refrain from overt stretchiness and deformations. Aim for precision and accuracy, not cartoonish playfulness.

Anticipation

Use elements under acceleration and deceleration to instigate instant changes and indicate significance.

Staging

Lead the eye. Forego unnecessarily complex or busy compositions and backgrounds that may detract from meaningful details. Direct attention to what’s most important by leaning on elements animated in sequence and refraining from competing actions.

Pose to pose

Be efficient; create as few key poses as possible while striving to create compelling performances.

Overlapping action

Secondary elements that inherit the motion of a parent on a slight delay can create visual interest and emphasis.

Slow in and slow out

Objects should behave according to their material and design but will typically speed up quickly and slow down smoothly. Animation curves that suggest bounce, stretch or abrupt stops aren’t recommended.

Arc

In contrast to this original principle and its advice on creating organic movements, our projection of purpose and seamless organization can be emphasized in motion by translating elements on one axis at a time, with a slight overlap between each one.

Secondary action

If necessary, secondary action should be introduced to enhance, or be in response to, the main action, not distract from it.

Timing

Be decisive in getting from point A to point B. Avoid long exponential eases as elements settle into place.

Exaggeration

Exaggeration isn’t employing decoration to create visual interest. Instead, animate elements in a manner that clearly demonstrates function and purpose.

Solid drawing

Be sure to portray an appropriate sense of weight and momentum, especially when depicting recognizable forms or objects with volume and dimension.

Appeal

Look for opportunities to create moments of compelling—yet considered—surprise and delight when applying motion to designs.