Agent skill
Animation Principles - Intermediate
Use when someone has working knowledge of animation principles and needs guidance on combining them effectively in more complex animations
Install this agent skill to your Project
npx add-skill https://github.com/dylantarre/animation-principles/tree/main/skills/04-by-skill-level/intermediate
SKILL.md
Combining Principles for Stronger Animation
You can apply individual principles. Now learn to weave them together and understand their interdependencies.
Principle Synergies
Squash/Stretch + Timing
Volume preservation is key. Faster motion = more stretch. The timing dictates the degree. A 2-frame anticipation needs less squash than a 6-frame one.
Anticipation + Follow Through
These are mirrors. Anticipation magnitude should roughly match follow through. Big wind-up = big settle. They create rhythmic bookends to any action.
Staging + Secondary Action
Secondary actions must support staging, never compete. If staging says "look at the face," secondary action in hands should point attention there, not away.
Arcs + Slow In/Out
Arcs aren't uniform speeds. Apply easing along the arc path. Spacing should bunch at start/end of the arc, spread in the middle.
Pose to Pose + Straight Ahead
Hybrid approach: Key poses first (pose-to-pose), then animate overlapping elements straight ahead. Best of both: structure with spontaneity.
Common Combination Mistakes
Over-anticipation: When every action has massive wind-up, nothing feels spontaneous. Reserve big anticipation for big payoffs.
Competing secondary actions: Three things moving differently splits attention. Hierarchy matters - one leads, others support.
Uniform timing: Every action at 12 frames feels mechanical. Vary your timing: quick decisions, slow realizations.
Arc neglect in follow through: The main action arcs beautifully, then appendages move linearly. Everything arcs.
The 12 Principles by Function
Physics: Squash/Stretch, Timing, Arcs, Slow In/Out Clarity: Staging, Solid Drawing, Anticipation Interest: Secondary Action, Exaggeration, Appeal Technique: Straight Ahead/Pose to Pose, Follow Through/Overlap
Integration Exercise
Animate a character sitting down:
- Staging: Camera angle shows full body profile
- Anticipation: Slight upward before descent
- Arcs: Hips trace a curved path down
- Timing: Faster drop, slower settle
- Squash: Compress on contact
- Follow Through: Arms/head continue after hips land
- Overlapping: Hair settles last
- Secondary: Adjusting clothing
- Slow Out: Gradual stop to final pose
Layer principles one at a time. Blocking first, then refinement passes for each principle category.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
icons-badges
Use when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback
navigation-menus
Use when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions
lists-grids
Use when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states
loaders-spinners
Use when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status
accordions-dropdowns
Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions
universal-elements
Use when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types
Didn't find tool you were looking for?