Motion
Motion brings the principles of our creative expression to life. Its temporal dimension can delight a user or bring clarity to complex problems. Wherever motion appears, you’ll need to determine how it is best expressed depending on how users encounter and interact with it.
Tone
Each animation principle exists as a tonal continuum, from tactical to emotional. Where your work sits on this spectrum depends on what and how it’s trying to communicate.
Motion can bring delight to a user or guide them through a complex problem. In video, it can help tell a compelling story or bring clarity to a topic. In user interfaces, micro animation can help users complete their work or add delight to an experience.
Tactical aims to inform and guide. It is useful and direct. Eases are shorter and steeper. Timing is appropriately and efficiently timed.
Emotional aims to celebrate the brand and add delight. It is emotive and compelling.
Squash and Stretch
Accentuate motion with squashing and stretching but avoid cartoonish deformations. Aim for precision and accuracy. Avoid obscuring and distracting with exaggerated motion.
Do aim for accurate and precise motion.
Avoid exaggerated and cartoonish motion.
Anticipation
Show the intent of motion. Anticipate the acceleration and deceleration of an object.
Do direct the viewer attention with follow through and overlapping motion.
Avoid abrupt and jarring motion.
Layered Animation
Accentuate the dominant motion with additional motion. Prioritize motion across the same scene to relate back to primary motion.
Do reinforce the motion of the dominant object.
Don’t pull focus from the dominant object.
Easing
Aim for smooth acceleration and deceleration. Avoid linear or exaggerated easing. Objects should move with intention and confidence.
Aim to ease motion.
Avoid linear, non-eased motion.
Timing
Objects should move with intent and decisiveness. Exaggerate sparingly to enhance intent. Avoid exaggerated acceleration, abrupt stops, or long pauses.
Aim for intentional and deliberately timed motion.
Avoid awkward, illogically timed motion.
Materiality
Avoid movement or behavior that is unexpected of a depicted object. Aim for believable motion.
Aim for natural motion.
Avoid jarring, artificial motion.
Logic
Objects should move and interact with each other in predictable ways. Aim for the most efficient way to get from A to B. Objects should move with confidence.
Focus
Maintain focus in any given scene. Guide the viewer’s attention without distracting. Giving clear focus aids comprehension.
Typography
Avoid gimmicky or cartoonish typographic movement. Support comprehension with movement. Refrain from warping text.
Fluidity
Ensure movement is fluid and at ease to instill confidence and trust. Avoid jarring, abrupt motion, which distracts attention.
Constancy
Ensure pauses are meaningful and contribute to the overall rhythm. Otherwise, avoid static frames.
Moderation
Be purposeful in motion values. Avoid extreme values. Aim for reasonable, moderated motion that instills trust and approachability.
Harmony
Create formal and spatial relationships between an object and motion. The total of all animation should be a crafted composition. Aim for a symphony of coordinated motion that brings objects to life.
Delight
Look for moments to add delight. Subvert established patterns to surprise and engage.
