Animation Laws
I took an animation masterclass and left with a static PDF about motion. Useful notes, wrong medium. I built this guide because timing, weight, and rhythm make more sense when you can see them move.
Squash & Stretch
A small change in shape can suggest softness, weight, or impact.
Squash and stretch helps an object feel flexible without changing what it is.
A button can compress as you press it, then return when you let go. That tiny response gives the action a sense of contact. When I prototype it, I start small and only push it further if the material and tone support it.
Thomas and Johnston documented squash and stretch as one of animation's 12 basic principles. It helps drawings communicate flexibility and weight while the object remains recognizable.
The object feels weightless
The element changes position or scale, but nothing responds to the force of the action. The result can feel detached from the input that caused it.
Deform with restraint
Change the shape briefly at the point of contact or impact. Keep the object recognizable and match the amount of give to the material you want it to suggest.
A button press
A button compresses slightly under a pointer or finger, then returns on release. The response connects the visible control to the physical action.
A bouncing rubber ball
The ball flattens when it hits the ground and lengthens as it changes direction. Its shape tells us that it is soft and moving under force.
- Use deformation at contact, impact, or a clear change in direction.
- Keep the object recognizable throughout the movement.
- Match the amount of give to the material and brand tone.
- Avoid playful deformation on rigid or high-stakes controls.
Anticipation
A small cue before an action helps people understand what is about to happen.
Anticipation prepares the eye for the main movement.
A draggable card can lift before it begins to move. That brief cue says the card is ready and makes the next action easier to follow. Without it, the movement may feel abrupt or disconnected from the gesture.
In character animation, a movement often begins with preparation, such as a crouch before a jump. The principle helps the audience read the action before its main beat arrives.
The action arrives without warning
A large change begins immediately, so the eye has to catch up after it has already started.
Signal before you move
Add a brief cue that points toward the next action. A lift, shift, or change in emphasis can be enough.
A card ready to drag
The card lifts and its shadow becomes clearer before it follows the pointer. The cue confirms that the drag has started.
A crouch before a jump
The body lowers before pushing upward. That preparation makes the direction and force of the jump easier to read.
- Place the cue close to the action it introduces.
- Keep it brief enough that it does not delay the task.
- Use direction to hint at what will happen next.
- Skip anticipation when the result is already obvious and immediate.
Staging
Make the main action easy to notice and keep competing motion quiet.
One moment should have one clear visual priority.
If an error message appears while the background keeps moving, both compete for attention. Staging means quieting the background and making the important change clear enough to read at a glance.
Staging comes from theater and animation, where composition, contrast, and timing direct attention. Disney Animation still describes clear staging as part of an animator's craft.
Everything asks for attention
Several elements move or change at once, so the main message gets lost in the activity around it.
Direct the eye
Choose the most important change, strengthen its presentation, and reduce nearby motion until the intended order is clear.
A focused dialog
The dialog enters while the page behind it becomes quieter. Motion, contrast, and position all point to the same place.
A theater spotlight
The light isolates the performer while the rest of the stage recedes. The audience knows where to look without being told.
- Give each moment one clear visual priority.
- Reduce background motion when the foreground needs attention.
- Use position, contrast, and motion to support the same hierarchy.
- Never make motion the only way to communicate important information.
Straight Ahead & Pose to Pose
Plan key states for control, then use freer motion where variation adds life.
Some motion needs fixed poses. Some benefits from a responsive path between them.
A panel needs a clear closed state and open state. The movement between them can still respond to the user's gesture. Planning the endpoints gives you control while the in-between motion keeps the interaction alive.
Pose-to-pose animation begins with key positions and fills in the movement between them. Straight-ahead animation develops the action in sequence. The methods trade control for spontaneity and are often combined.
Motion feels rigid or unpredictable
Planning every detail can remove responsiveness. Improvising the whole movement can make key states inconsistent.
Plan structure, free the detail
Define the states that must remain clear, then let springs, gestures, or procedural motion shape the path between them where appropriate.
A gesture-driven panel
The panel has defined open and closed states, but its position follows the finger during the drag. On release, it settles into the nearest valid state.
Choreography and fabric
A dancer hits planned poses while loose fabric responds continuously between them. One part is controlled, the other is allowed to vary.
- Define the states people must be able to recognize.
- Use keyframes when sequence and alignment need control.
- Use responsive motion when input or variation matters.
- Combine both methods when the interface needs structure and life.
Follow Through & Overlapping Action
Related parts can start and stop at different times instead of moving as one block.
A little overlap makes a transition feel connected instead of abruptly cut.
When a panel stops, its contents can finish settling a moment later. That offset suggests the parts belong together but do not have identical weight. The effect works best when the main action remains easy to track.
In animation, follow through describes motion that continues after the main body stops. Overlapping action describes connected parts moving on slightly different schedules.
Everything stops at once
The container, content, and supporting details all begin and end together. The transition reads as one rigid block.
Let secondary parts settle
Move the main object first, then offset a small number of related parts. Keep the delay short enough that the interface still feels responsive.
A drawer and its contents
The drawer reaches its final position first. Its heading and controls finish a moment later, creating a clear lead and a quiet follow through.
A coat after a stop
A person stops walking, but the loose fabric keeps moving briefly. The parts are connected, yet they do not stop at exactly the same time.
- Let the main action establish the direction.
- Offset only the parts that feel meaningfully connected.
- Keep the overlap short enough to preserve responsiveness.
- Avoid turning every list into a decorative cascade.
Slow In & Slow Out (Easing)
Easing controls how motion accelerates and slows near its endpoints.
The path tells us where something moves. Easing tells us how it gets there.
A drawer moving at one constant speed can feel abrupt at both ends. I compare easing curves side by side because a small change in acceleration often matters more than adding another effect.
In hand-drawn animation, spacing drawings closer together makes movement appear slower. On the web, easing functions transform the rate of change over an animation's progress.
Motion snaps into speed
The element starts, travels, and stops at a constant rate even when the action suggests acceleration or a gentle arrival.
Choose the curve for the action
Use easing to shape acceleration and deceleration. Compare the result in context, then keep the curve that makes the state change easiest to follow.
An arriving panel
The panel moves quickly at first and slows as it reaches its final position. The destination feels deliberate without making the transition heavy.
A train leaving a station
The train gathers speed after it starts and slows before it stops. The change in rate is part of how we understand its movement.
- Treat easing as part of the action, not a default decoration.
- Compare curves in the real interaction, not only in a demo loop.
- Keep endpoints clear and the destination predictable.
- Use linear motion when a steady rate is the information.
Arcs
Curved paths can make rotation and gesture feel more natural.
If motion pivots around a point, a straight line may hide how it really moves.
A control that expands from a visible anchor can follow a gentle curve toward its destination. The path preserves the relationship between source and result. A straight line is still better when directness is the point.
Animators use arcs to describe movement around joints and pivots. The principle is especially useful when the path needs to reveal how one part is connected to another.
The path ignores its source
An element appears to come from an anchor, yet it travels along a path that does not reflect that relationship.
Follow the pivot
Base the curve on a visible joint, origin, or rotation point. Use only enough curvature to make the relationship clear.
Actions from a floating control
Related actions expand outward along short curves from their shared anchor. Their paths make the connection to the original control easy to follow.
A hand moving from the elbow
As the forearm rotates around the elbow, the hand follows a curved path. The joint defines the movement.
- Use an arc when motion has a visible origin or pivot.
- Keep the curve subtle unless the gesture needs emphasis.
- Preserve a predictable destination throughout the movement.
- Use a straight path when direct spatial change is clearer.
Secondary Action
A supporting movement can clarify the main action without stealing attention.
Secondary motion should strengthen the primary message, never compete with it.
A saved state can appear first, followed by a small checkmark response. The state change carries the meaning. The extra movement supports it. If the checkmark becomes the main event, the hierarchy has flipped.
In character animation, a secondary action supports the main action and adds information without obscuring it. The same hierarchy matters in an interface.
The supporting motion takes over
A flourish is brighter, larger, or longer than the change it is meant to explain.
Keep the hierarchy intact
Make the primary action understandable on its own. Add one quieter movement only when it reinforces meaning or character.
A save confirmation
The label changes to Saved, then a small checkmark settles beside it. The text communicates the result and the motion supports the confirmation.
Arms moving during a walk
The walk is the main action. The arm swing supports its rhythm and character without changing where the person is going.
- Make sure the primary action works without the supporting motion.
- Use less distance, contrast, or duration for the secondary action.
- Add one supporting cue before adding several.
- Remove the extra motion when it competes with the task.
Timing
Duration changes how urgent, light, deliberate, or disruptive a movement feels.
Timing is not a preset. It should match the distance, frequency, and importance of the action.
I test a transition in the real flow, not only in a loop. A slow animation can look polished once and become frustrating by the fifth use. Timing has to work at the pace of the task.
In animation, the number and spacing of drawings determine how quickly an action unfolds. In interfaces, duration and easing shape the pace of a state change.
Every action uses the same duration
A tiny toggle and a full-screen transition move at the same pace, even though their distance, complexity, and frequency are different.
Time the context
Start with the task. Frequent actions should stay out of the way. Larger changes may need more time to remain understandable, but people should not have to wait for decoration.
A frequently used menu
The menu opens quickly enough for repeated use, while the transition still shows where it came from and where it landed.
Lifting two boxes
An empty box can be moved quickly. A filled box often needs a slower, more deliberate lift. The pace helps reveal the effort involved.
- Test timing inside the full task, not only in isolation.
- Keep frequent actions brief and easy to interrupt.
- Allow more time when a larger change needs to be understood.
- Do not make people wait for motion that adds no information.
Exaggeration
A restrained exaggeration can make important feedback easier to notice.
Push the clearest part of the action just enough to remove doubt.
A success response can be so subtle that people miss it. Slightly enlarging the checkmark or holding the completed state for a beat can make the result clear. The goal is recognition, not spectacle.
Exaggeration is one of the classical animation principles. It strengthens the idea behind an action while keeping the action understandable.
The feedback is technically there
The interface changes, but the difference is too quiet to notice during normal use.
Amplify one useful quality
Increase the scale, distance, contrast, or pause that best communicates the result. Push one quality at a time, then test it in context.
A clear completion state
A checkmark grows slightly as the task completes, then settles. The extra emphasis helps the result register without delaying the next step.
A stage gesture
A performer makes a gesture broader so it remains legible from the back of the room. The meaning stays the same, but its expression is clearer.
- Start with the message that needs to be clearer.
- Exaggerate one quality rather than the whole sequence.
- Judge the effect in the real interface and at normal speed.
- Pull it back when the effect becomes more memorable than the result.
Solid Drawing
Consistent depth, perspective, and volume help moving elements feel coherent.
Even a flat interface needs clear spatial rules when elements move through depth.
A card can rotate convincingly until its perspective, shadow, and edges begin telling different stories. The problem is not the effect. It is the missing spatial rule behind it.
Solid drawing asks animators to understand form, balance, weight, and volume. Disney Animation also describes anatomy, weight, and movement as part of creating believable characters.
The depth rules keep changing
Perspective, scale, and shadow shift independently, so the object seems to warp instead of move through a consistent space.
Define the space first
Choose the light source, viewing angle, depth order, and pivot before animating. Let each moving part follow those shared rules.
A card flip
The card rotates around one stable edge while its perspective and shadow change together. Both faces keep the same dimensions.
Turning a model in your hands
Rotating a solid object reveals how its surfaces, edges, and shadows stay related from different angles.
- Set a consistent pivot and perspective before adding motion.
- Make scale, shadow, and depth describe the same space.
- Preserve the object's recognizable volume as it moves.
- Use fewer depth cues when a flat transition communicates more clearly.
Appeal
Appeal is the clarity and character that make motion pleasant to follow.
Useful motion can still have personality, but the task comes first.
I know motion is working when I stop watching the effect and start trusting the transition. If the animation pulls me away from the task, its personality has become noise.
Appeal is one of the 12 classical principles. It is not limited to cuteness or decoration. It describes a quality that makes a character or action clear and engaging to watch.
Delight becomes decoration
The animation has style, but it repeats too often, delays the task, or draws more attention than the information it carries.
Let character serve clarity
Use rhythm, easing, and emphasis that fit the product's voice. Keep the interaction readable and let personality support the result.
A branded completion moment
A short completion animation uses the product's visual language, confirms success, and leaves the next action available immediately.
A skilled presenter
Clear timing, gesture, and emphasis make the message easier to follow. The personality supports the idea instead of replacing it.
- Make motion feel consistent with the product's voice.
- Keep the task understandable without the flourish.
- Avoid repeating expressive motion until it becomes tiring.
- Respect reduced-motion preferences and offer a quieter result.