Lab Experiment
The principles distilled by Ollie Johnston and Frank Thomas in The Illusion of Life - the foundation Disney built around the feeling of weight, intent, and personality. They were written for hand-drawn cinema, but they show up in every micro-interaction, every easing curve, every transition we design today.
These are things I first studied at university, and they have stayed with me ever since. Whenever I sit down to design an animation for the web - a hover, a page transition, a loading state, a reveal - I find myself going back to these twelve ideas to decide how the motion should feel, where it should breathe, and what it should communicate.
Each principle below uses the classic bouncing ball as the lens. Pure CSS, no JavaScript - just keyframes, easing curves, and transforms.
Principle 01
The most fundamental principle. An object deforms as it moves to communicate weight and flexibility, but always preserves its volume. A ball squashing on impact and stretching at peak speed feels alive instead of mechanical.
Principle 02
Every action is preceded by a preparation. A character winds up before throwing a punch; a ball compresses before it launches. Without anticipation, motion feels sudden and weightless. With it, the audience can read the intent.
Principle 03
Presenting the action so its meaning is unmistakable. Composition, lighting, silhouette and timing all work together to focus the viewer on what matters. A clear silhouette reads even at thumbnail size.
Principle 04
Two ways of building animation. Straight ahead is drawing frame after frame from start to end - spontaneous, organic. Pose to pose is defining key poses first and filling the in-betweens - controlled, planned. Most modern animation blends both.
Principle 05
When the body stops, loose parts keep going. Hair, cloth, antennae, even a soft belly continue past the main motion before settling. Different parts move at slightly different times, never as a rigid block.
Principle 06
Real movements rarely start or stop instantly. They accelerate from rest, hold their peak speed, and decelerate before stopping. Easing the start and end of an animation is the difference between mechanical and natural - the soul of every interface micro-interaction.
Principle 07
Most natural motion follows curved paths, not straight lines. A thrown ball, a swinging arm, a turning head - they all trace arcs. Straight-line motion looks robotic; arcs look alive.
Principle 08
Smaller motions that support the main action and add depth. A character running with their hair bouncing, eyes darting, or a coat flapping. Secondary action enriches the scene without distracting from the primary motion.
Principle 09
The number of frames an action takes - the heart of how it reads. Heavy things take longer to start and stop; light things snap into motion. Same path, different timings, completely different stories.
Principle 10
Pushing reality just past believable. Not random distortion - disciplined exaggeration that amplifies what is already there. The audience feels what the character feels because the animation is more expressive than reality.
Principle 11
Animating with awareness of three-dimensional space, weight, and volume. Even flat 2D characters need to feel like they exist in space, with perspective, mass, and structural integrity from every angle.
Principle 12
What makes you want to keep watching. Charisma, design, personality. Not just 'cute' - appeal is anything that draws the eye and creates connection. The principle that ties everything together.