The 10 Principles of Motion in Branding
Tips & Tricks
The 10 Principles of Motion Design
I’m Joshua, an 18-year-old aspiring Motion Designer from the UK with five years of experience in Motion Design. My passion lies in creating bold, engaging visuals that communicate ideas clearly and creatively. As a visual learner, I found that seeing the principles of motion design in action deepened my understanding, which motivated me to build a resource that could support others as well.
For this project, I focused on finding a creative way to explain and demonstrate the core principles of motion design by grouping them into five related pairs and animating each group into its own seamlessly transitioning scene. I initially released a series of educational social media posts breaking down each principle but knew I could take the concept further.
My approach to motion principles differs by being shaped by my personal understanding and visualisation of how motion works, crafting them specifically for motion designers.
While drawing inspiration from jrcanest's compilation, I simplified some visuals for practical application and added definitions and detail to clearly explain each principle within a motion design context. The goal is to provide a wider, more accessible, and actionable range of information for motion design and branding work.
01
Timing & Spacing
Controlling the speed and smoothness
of movement.
Timing determines how long an action takes, while spacing determines how the object moves between frames, controlling whether the motion feels smooth, fast, slow, heavy, or abrupt.
02
Easing
Motion gradually speeds up and slows down.
The spacing between frames increases as an object speeds up and decreases as it slows down, creating acceleration and deceleration that makes motion feel believable.
03
Mass & Weight
Mass is amount; weight is how heavy it feels in motion.
Mass is how much matter an object has, while weight is how that mass affects its motion and response to gravity.
04
Anticipation
A small movement prepares the main action.
Anticipation is a preparatory movement that occurs before the main action, signaling intent and making the motion clearer, more natural, and more believable.
05
Arcs
Motion follows curved paths.
Arcs describe the natural curved paths that objects follow when moving, creating smoother, more organic, and believable motion.
06
Squash & Stretch
Objects deform to show flexibility and weight.
Squash and stretch deforms an object during motion to show its flexibility, weight,
and impact while preserving its overall volume.
07
Follow Through & Overlap
Parts continue and settle
at different times.
Follow through and overlap occur when different parts of an object continue moving and settle at different times,
reflecting inertia and flexibility.
08
Exaggeration
Push motion beyond realism for impact.
Exaggeration amplifies motion, timing, or poses beyond realism to increase clarity, energy, and visual impact.
09
Secondary Animation
Supporting motion enhances the main action.
Secondary animation adds supporting motion that enhances the main action and makes the overall movement feel more natural and believable.
10
Appeal
Make it visually engaging and clear.
Appeal makes an object or motion visually clear, engaging, and pleasing, so it captures and holds the viewer’s attention.
