Skip to main content
skill CX Codex

Animation Principles - Advanced — Claude Code skill: subtle animation

A skill for animators who already know the fundamentals and want the nuances: invisible squash/stretch, missing anticipation, deliberately broken arcs.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add dylantarre/animation-principles --skill animation-principles---advanced -a claude-code
npx skills add dylantarre/animation-principles --skill advanced -a claude-code
Open on GitHub

What Animation Principles - Advanced does

The skill walks through twelve animation principles at an advanced level. Squash and stretch in facial work — brows compressing, cheeks stretching, jaw volume shifting — happens below conscious notice. Anticipation can be dropped on purpose: a punch with no wind-up reads as a surprise. Staging covers negative space, and an empty frame builds tension.

Method choice depends on the scene. Straight ahead gives emotional spontaneity in performance, pose-to-pose gives precise timing in action, and some shots switch mid-way. Follow through carries emotional subtext: heavy reads as reluctance or fatigue, minimal as alertness. A separate section weighs principles by genre — timing, arcs and anticipation dominate action, while comedy leans on timing, exaggeration and staging.

This is material for working animators, not beginners. Without the fundamentals already in hand, most of it won't land. Examples reference specific styles: Pixar exaggeration differs from Genndy Tartakovsky's, and what works in Looney Tunes wrecks Ghibli realism. Worth checking against your project's visual language before pulling any of it into production.

What it helps with

  • understand how squash and stretch read in facial animation without being noticed
  • decide when dropping anticipation makes a hit or a gag land harder
  • pick between straight ahead and pose-to-pose for a given scene
  • weight principles by genre: action, comedy, drama or horror
  • break an arc on purpose for a robot or a physical impact

Example prompts for the agent

  • Break down this scene: where should I drop anticipation so the punch reads as a surprise?
  • Which method fits an emotional monologue — straight ahead or pose-to-pose?
  • Weight the principles for a horror scene and tell me what to break deliberately.

How to install Animation Principles - Advanced

1Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill animation-principles---advanced -a claude-code
npx skills add dylantarre/animation-principles --skill advanced -a claude-code

2Manually: put the files in place

~/.claude/skills/advanced/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/advanced/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about Animation Principles - Advanced

How do I install Animation Principles - Advanced in Claude?

Run npx skills add dylantarre/animation-principles --skill animation-principles---advanced -a claude-code. A shorter form also works: npx skills add dylantarre/animation-principles --skill advanced -a claude-code.

What does Animation Principles - Advanced do?

It covers advanced application of the animation principles: invisible squash/stretch, deliberate absence of anticipation, negative space in staging, non-linear easing and broken arcs.

Who is this skill for?

Animators who already command the basics and want edge cases and stylistic variations. Beginners will get little out of it.

Source text

SKILL.md · MIT
---
name: Animation Principles - Advanced
description: Use when someone has strong command of animation principles and seeks deeper understanding of subtle applications, edge cases, and stylistic variations
---

# Nuanced Application of Animation Principles

You've internalized the fundamentals. Now explore the subtleties that separate competent from exceptional animation.

## Beyond the Basics

### Squash and Stretch: The Invisible Application
Facial animation relies on subtle squash/stretch most viewers never consciously see. Brows compress, cheeks stretch, jaw volumes shift. The principle applies to rigid objects too - camera shake and motion blur are perceptual squash/stretch.

### Anticipation: When to Subvert It
Lack of anticipation creates surprise, shock, comedy. A punch without wind-up reads as unexpected. Master animators use anticipation's *absence* as deliberately as its presence.

### Staging: Negative Space as Tool
What you don't show matters. Empty frame space creates tension. Cramped staging creates claustrophobia. Staging includes compositional psychology, not just visibility.

### Method Selection: Scene-Dependent Choices
Straight ahead for emotional spontaneity in performance. Pose-to-pose for precision timing in action. The choice shapes the final energy. Some scenes demand switching methods mid-shot.

### Follow Through: Emotional Resonance
Heavy follow through suggests reluctance, weight, sadness. Minimal follow through suggests alertness, tension. The technical principle carries emotional subtext.

### Slow In/Out: Non-Linear Easing
Beyond basic ease curves: snap with overshoot, settle with micro-bounces, hold with drift. Custom spacing graphs for specific emotional beats.

### Arcs: Broken Arcs as Choice
Robotic characters, sudden decisions, physical impacts - these break arcs intentionally. The principle teaches natural motion so you can meaningfully deviate.

### Secondary Action: Counterpoint
Advanced secondary action can contrast the primary emotion. Happy walk with nervous hand-wringing hints at hidden anxiety. Layers create complexity.

### Timing: Frame-by-Frame Psychology
Single frame holds create different impact than two-frame holds. The difference between 8 and 10 frames changes weight perception. Frame-level sensitivity matters.

### Exaggeration: Style-Appropriate Scaling
Pixar exaggeration differs from Genndy Tartakovsky's. Exaggeration must match the project's visual language. What's appropriate in Looney Tunes destroys Ghibli realism.

### Solid Drawing: Breaking Dimension
2D animation sometimes flattens 3D logic for graphic impact. Knowing solid drawing lets you strategically violate it - Milt Kahl's angular poses break volume for graphic punch.

### Appeal: Uncomfortable Appeal
Villains need appeal too - compelling ugliness. Appeal isn't beauty; it's magnetic quality. Some characters appeal through grotesque fascination.

## Principle Weights by Genre
- **Action:** Timing, Arcs, Anticipation dominant
- **Comedy:** Timing, Exaggeration, Staging dominant
- **Drama:** Secondary Action, Follow Through, Staging dominant
- **Horror:** Timing, Staging, broken principles deliberately

© dylantarre · MIT · dylantarre/animation-principles

Similar skills

Everything for Design →

From the same set86

universal-patterns Sets baseline durations, easing curves and the 12 animation principles for any motion in an interface. Useful when your agent writes CSS transitions and guesses the timing wrong. CX Codex +1 493installs secondary-action-mastery A skill for adding secondary motion that supports the primary action instead of fighting it. Useful for UI animation and game feel. CX Codex +1 494installs feedback-indicators A skill for confirmation animations: success checkmarks, error shakes, form validation and toasts. Useful when the UI has to answer back clearly. CX Codex +1 493installs Animation Principles - Troubleshooting A skill that diagnoses why an animation feels wrong and points to the principle being misapplied. Useful when the motion reads badly but the cause is unclear. CX Codex +1 490installs emotional-disconnect Diagnoses why an animation feels wrong and matches motion to the emotion the moment should carry. Useful when users call your UI cold or annoying. CX Codex +1 488installs state-changes A skill for animating elements that transform in place: toggles, accordions, checkboxes, button states. Useful when an interface needs smooth transitions without enter or exit. CX Codex +1 489installs Animation Principles - Deep Dive A reference skill covering Disney's 12 animation principles with technical detail: deformation ratios, frame counts, arcs, follow through. Useful when the agent needs animation context. CX Codex +1 487installs Animation Principles - Novice A skill that walks through the 12 animation principles with a hands-on exercise for each. Useful once you know the theory and want to actually use it. CX Codex +1 488installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor