Skip to main content
skill CX Codex

Animation Principles - Novice — Claude Code skill: the 12 principles

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.

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

What Animation Principles - Novice does

The skill covers all 12 principles and pairs each one with something to try. Squash and stretch: compress a bouncing ball 20-30% on impact, stretch it slightly at peak velocity. Anticipation: bend the knees before a jump, and the bigger the wind-up, the bigger the action the viewer expects. Staging gets checked with silhouettes — if the pose reads as nothing in shadow, restage it.

Then come the methods and timing. Pose-to-pose is suggested for planned actions like walks and dialogue, straight ahead for fire and water. Slow in and slow out means extra frames at the start and end of a movement, fewer in the middle. The same action at 4 frames reads snappy and light, at 12 it reads heavy. Arcs, follow through, secondary action, exaggeration, solid drawing and appeal round out the list.

A practice order is spelled out: timing, squash/stretch and anticipation first, then arcs, follow through and slow in/out, and finally secondary action, staging and appeal. The skill installs into Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode, each with its own command. It is a written guide with no scripts, so nothing beyond the skill itself is needed to use it.

What it helps with

  • apply squash and stretch to a bouncing ball
  • pick frame counts that give a movement the right weight
  • test a character pose by its silhouette
  • choose between pose-to-pose and straight ahead for a shot
  • add follow through to hair and clothes after a stop

Example prompts for the agent

  • Help me animate a bouncing ball — where do I squash and where do I stretch?
  • How many frames should the impact take to feel heavy?
  • Check my character pose as a silhouette and tell me what to restage

How to install Animation Principles - Novice

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/novice/SKILL.md

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

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

Questions about Animation Principles - Novice

How do I install Animation Principles - Novice in Claude?

Run npx skills add dylantarre/animation-principles --skill animation-principles---novice -a claude-code, then npx skills add dylantarre/animation-principles --skill novice -a claude-code. The skill file lands at ~/.claude/skills/novice/SKILL.md.

What does Animation Principles - Novice do?

It explains the 12 animation principles and gives an exercise for each: squash and stretch, anticipation, staging, timing, arcs, follow through and the rest. The focus is applying them to simple projects.

What order should I work through the principles?

Start with timing, squash/stretch and anticipation. Then add arcs, follow through and slow in/out. Finish with secondary action, staging and appeal.

Source text

SKILL.md · MIT
---
name: Animation Principles - Novice
description: Use when someone has basic awareness of animation principles and wants to start applying them in simple projects
---

# Building Your Animation Foundation

You know the basics. Now let's understand how to actually use these 12 principles in your work.

## 1. Squash and Stretch
**What it does:** Gives weight and flexibility to objects.
**Try this:** Animate a bouncing ball. Squash it 20-30% on impact, stretch it slightly at peak velocity.

## 2. Anticipation
**What it does:** Prepares the viewer for action.
**Try this:** Before a character jumps, have them bend their knees. The bigger the anticipation, the bigger the expected action.

## 3. Staging
**What it does:** Directs attention clearly.
**Try this:** Use silhouettes to test your poses. If you can't tell what's happening in shadow, restage it.

## 4. Straight Ahead vs Pose to Pose
**What it does:** Two animation methods with different results.
**Try this:** Use pose-to-pose for planned actions (walks, dialogue). Use straight ahead for wild, organic motion (fire, water).

## 5. Follow Through and Overlapping Action
**What it does:** Creates natural, fluid movement.
**Try this:** After your character stops, let hair, clothes, and appendages continue moving for a few frames.

## 6. Slow In and Slow Out
**What it does:** Adds weight and smoothness.
**Try this:** Add extra frames at the start and end of movements. Fewer frames in the middle means faster motion.

## 7. Arc
**What it does:** Makes movement feel natural.
**Try this:** Track your character's hand through a wave. It should draw a smooth curve, not zigzag.

## 8. Secondary Action
**What it does:** Adds richness without distraction.
**Try this:** A sad character might wipe their eye while talking. It supports the emotion without stealing focus.

## 9. Timing
**What it does:** Controls the mood and physics.
**Try this:** Same action, different frame counts. 4 frames = snappy/light. 12 frames = heavy/deliberate.

## 10. Exaggeration
**What it does:** Pushes reality for effect.
**Try this:** Find the real movement, then push it 20% further. Scared? Eyes wider. Angry? Lean more forward.

## 11. Solid Drawing
**What it does:** Creates believable 3D forms.
**Try this:** Draw your character from multiple angles. Maintain consistent volume throughout.

## 12. Appeal
**What it does:** Makes characters watchable.
**Try this:** Clear shapes, readable expressions, distinctive silhouettes. Avoid symmetry - asymmetry is more interesting.

## Practice Order
Start with: Timing, Squash/Stretch, Anticipation
Then add: Arcs, Follow Through, Slow In/Out
Finally: Secondary Action, Staging, Appeal

© dylantarre · MIT · dylantarre/animation-principles

Similar skills

Everything for Design →

From the same set86

Animation Principles - Advanced A skill for animators who already know the fundamentals and want the nuances: invisible squash/stretch, missing anticipation, deliberately broken arcs. CX Codex +1 489installs 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 - Absolute Beginner Walks through the 12 principles of animation in plain words. Useful when you are touching motion in a UI or a game for the first time. CX Codex +1 486installs technical-constraints A skill for when animation is capped by browser support, platform capabilities or technical requirements. It keeps the intent and drops what breaks. CX Codex +1 487installs comfort-safety A skill that sets animation rules for interfaces where users need to feel safe rather than impressed. CX Codex +1 486installs problem-diagnosis Turns a vague “this motion feels off” into a named broken principle and a fix list. CX Codex +1 487installs

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