Skip to main content
skill CX Codex

Animation Principles - Teaching Others — Claude Code skill: explain

Walks you through teaching the 12 animation principles to students, mentees or teammates: what to show first and where they usually get stuck.

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

What Animation Principles - Teaching Others does

The skill covers each of the 12 principles the same way: what to demonstrate first, the mistake learners make most often, and a one-line phrase that lands the idea. Squash and stretch gets the bouncing ball plus a clay demo, anticipation gets footage of real athletes, staging gets the silhouette test.

There is a suggested teaching order too. Start with timing and squash/stretch on the ball, layer in arcs and slow in/out, and save staging and appeal for later because they need visual vocabulary first. It is a coaching reference, not a lesson generator — you still run the session.

Handy if you mentor several people and keep repeating yourself. The key phrases are written out, so you can lift them into a conversation as they are.

What it helps with

  • explain squash and stretch to a student who preserves shape instead of volume
  • show the difference between straight ahead and pose to pose on the same action
  • pick a follow through example so motion does not stop on a single frame
  • set an order for teaching the principles from simple to complex
  • explain why appeal matters even for a villain

Example prompts for the agent

  • Help me explain anticipation to a student — what to show first and what they usually get wrong
  • Build a lesson plan for the 12 animation principles aimed at beginners, starting with timing and squash and stretch
  • My mentee animates in straight lines. How do I explain arcs?

How to install Animation Principles - Teaching Others

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/teaching-others/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/teaching-others/

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

Questions about Animation Principles - Teaching Others

How do I install Animation Principles - Teaching Others in Claude?

Run npx skills add dylantarre/animation-principles --skill animation-principles---teaching-others -a claude-code. The skill lands in ~/.claude/skills/teaching-others/SKILL.md.

What does Animation Principles - Teaching Others do?

It breaks down the 12 animation principles from a teaching angle: what to show first, the common confusion, and a phrase that explains the principle.

Where does the skill suggest starting?

With timing and squash/stretch on the bouncing ball. Arcs and slow in/out come next, and staging and appeal later.

Source text

SKILL.md · MIT
---
name: Animation Principles - Teaching Others
description: Use when someone needs to explain animation principles to students, mentees, or team members at various skill levels
---

# Teaching the 12 Principles Effectively

Teaching animation principles requires meeting students where they are. Here's how to communicate each principle at different levels.

## Teaching Strategies by Principle

### 1. Squash and Stretch
**Show first:** Bouncing ball exercise - universal, immediate, undeniable.
**Common confusion:** Students preserve shape instead of volume. Use clay demonstration.
**Key phrase:** "Volume stays the same, shape changes."

### 2. Anticipation
**Show first:** Video of real athletes - every jump has a crouch.
**Common confusion:** Making anticipation too large or too long.
**Key phrase:** "The audience needs a heads-up."

### 3. Staging
**Show first:** Silhouette test. If they can't read it as a shadow, it fails.
**Common confusion:** Cluttering with detail before establishing clarity.
**Key phrase:** "What's the ONE thing this frame says?"

### 4. Straight Ahead / Pose to Pose
**Show first:** Same action animated both ways - compare results.
**Common confusion:** Thinking one method is "correct."
**Key phrase:** "Pose to pose for control, straight ahead for discovery."

### 5. Follow Through / Overlapping
**Show first:** Slow-motion hair, fabric, tails. Nature demonstrates constantly.
**Common confusion:** Everything stopping at the same frame.
**Key phrase:** "Nothing stops at once. What's attached keeps going."

### 6. Slow In / Slow Out
**Show first:** Push a heavy box versus a light one. Spacing changes.
**Common confusion:** Even spacing (tweening syndrome).
**Key phrase:** "More drawings where it slows, fewer where it's fast."

### 7. Arcs
**Show first:** Trace hand during natural gesture - it curves.
**Common confusion:** Mechanical point-to-point movement.
**Key phrase:** "Almost everything curves. Straight lines are exceptions."

### 8. Secondary Action
**Show first:** Walking while talking on phone - multiple layers.
**Common confusion:** Secondary action competing with primary.
**Key phrase:** "It adds flavor but shouldn't steal the show."

### 9. Timing
**Show first:** Same action at 4, 8, 12, 24 frames - feel the difference.
**Common confusion:** Defaulting to same timing for everything.
**Key phrase:** "Timing is the acting. Same pose, different timing = different meaning."

### 10. Exaggeration
**Show first:** Compare photo reference to Disney interpretation.
**Common confusion:** Fear of pushing too far (more common than pushing too much).
**Key phrase:** "Find reality, then push 20% past it."

### 11. Solid Drawing
**Show first:** Turn a simple character 360 degrees. Volume must hold.
**Common confusion:** Drawing symbols instead of forms.
**Key phrase:** "Can you imagine walking around it?"

### 12. Appeal
**Show first:** Character lineup - which ones do you want to watch?
**Common confusion:** Thinking appeal means "pretty."
**Key phrase:** "Appeal is magnetic. Even villains need it."

## Teaching Sequence
Start with Timing + Squash/Stretch (bouncing ball). Add Arcs + Slow In/Out. Build complexity gradually. Staging and Appeal come later - they require visual vocabulary.

© dylantarre · MIT · dylantarre/animation-principles

Similar skills

Everything for Design →

From the same set86

brand-strategist Turns the 12 animation principles into brand decisions: timing, easing, how much stretch fits your character. Useful when motion has to match the rest of the identity. CX Codex +1 503installs exit-animations A skill that tells the agent how to animate elements leaving the screen: closing modals, dismissing notifications, removing list items. CX Codex +1 500installs Animation Principles - Expert A skill for animators who already know the classic principles and want to break them deliberately: anti-squash, omitted anticipation, broken arcs. CX Codex +1 499installs timing-calibration A skill that diagnoses animations that feel too fast, too slow or inconsistent, then hands back concrete durations and easing. CX Codex +1 497installs user-feedback-clarity A skill that helps your coding agent work out why users miss interface feedback and what to change. CX Codex +1 496installs power-confidence A skill that spells out how to animate strength and authority: heavy movement, sudden stops, almost no bounce. Useful for hero sections and premium product showcases. CX Codex +1 495installs 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

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