Motion Design
01 / Principles of Movement
Key question
What brings movement to life?
Motion attracts the eye like nothing else. Used well, it explains, connects and narrates. Used poorly, it distracts. The fundamentals stem from traditional animation and still apply today, from a logo to an interface button.
Learning objective: You will be able to identify key animation principles, choose easing curves purposefully, and give movement weight and character.
Movement tells a story before you read.
1.1 / The Principles of Animation
What cartoons teach us.
The Disney studio animators described twelve principles that make movement believable. You need three of them almost all the time.
01
Compressing and stretching
A ball flattens on impact and elongates in flight. This reflects the material and the pace.
02
Anticipation
Before jumping, you bend your knees. A small counter-movement anticipates the main movement.
03
Ringing
After stopping, parts continue to oscillate. Nothing in nature comes to an abrupt halt.
The principles are tools, not rules. A professional logo requires less squashing than a playful character.
Nothing comes to an abrupt halt.
1.2 / Easing
Nothing moves linearly.
Easing describes how the pace of a movement changes. Linear looks mechanical. Ease-out starts quickly and slows down gently, ideal for anything entering the frame. Ease-in accelerates slowly, perfect for anything leaving.
An easing curve is defined as a cubic-bezier using four numbers. Values greater than 1 or less than 0 cause the motion to overshoot the target or anticipate the movement.
Ease-out for everything to come.
1.3 / Weight and Character
Mass reveals itself in motion.
Heavy things start slowly and are hard to stop. Light things react quickly and oscillate. With duration, easing and bounce, you give every shape a weight and a brand a character: calm, precise, playful.
Many programmes offer springs. Instead of a duration, you set tension and damping. This feels particularly natural when people drag or throw something.
Weight comes from speed.
Exercise
A logo in motion
Brief: Animate the Museum Klang logo in three different characters.
STEP 1
Break the logo down into parts that can move.
STEP 2
Animate a calm version with a gentle ease-out.
STEP 3
Animate a playful version with anticipation and overshoot.
STEP 4
Animate a precise version with a short duration and a clear stop.
Evaluation: Which version suits the museum, and which words describe the difference?