Skip to main content
skill CX Codex

Animation Principles - Absolute Beginner — Claude Code skill: the

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.

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

What Animation Principles - Absolute Beginner does

The skill covers the twelve tricks Disney animators came up with: squash and stretch, anticipation, staging, straight ahead versus pose to pose, follow through, slow in and slow out, arcs, secondary action, timing, exaggeration, solid drawing and appeal. Each one gets a sentence or two and a homely example — a dropped ball, a car at a traffic light, hair that keeps moving after you stop.

There is no API reference here and no ready-made code. What you get is shared vocabulary: describe what should happen on screen and the agent reaches for the same terms you do. The whole thing is a single SKILL.md file, no scripts, no dependencies.

The author suggests starting with one or two principles rather than all twelve at once. That holds up in practice — when an animation feels off, the cause is usually timing or a missing anticipation, and picking it apart one rule at a time is easier.

What it helps with

  • explain to a beginner why an animation looks jittery
  • settle on motion terms with your agent
  • pick which principle to learn first
  • break a jump or an impact into steps
  • put into words what feels wrong with motion in a mockup

Example prompts for the agent

  • Explain anticipation using a button that opens a menu
  • Why does my jump animation look unnatural? Walk me through the principles
  • Where do I start if I have never animated anything?

How to install Animation Principles - Absolute Beginner

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/absolute-beginner/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/absolute-beginner/

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

Questions about Animation Principles - Absolute Beginner

How do I install Animation Principles - Absolute Beginner in Claude?

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

What does this skill do?

It explains the 12 principles of animation in simple language with everyday examples. The agent leans on them when you discuss motion in a UI or a game.

Do I need any background first?

No, it is written for a complete newcomer. The author suggests starting with one or two principles instead of all twelve.

Source text

SKILL.md · MIT
---
name: Animation Principles - Absolute Beginner
description: Use when someone has never heard of animation principles, needs the simplest explanation possible, or is a complete newcomer to animation
---

# Your First Look at Animation Magic

Animation makes drawings move in ways that feel real and fun. Disney animators discovered 12 tricks that make animation look great. Here they are in simple words:

## 1. Squash and Stretch
Things squish when they hit something and stretch when they move fast. Drop a ball - it flattens on the ground, then bounces back round.

## 2. Anticipation
Before a big move, there's a small move the other way. Before jumping up, you crouch down first.

## 3. Staging
Put important things where people will see them. Like putting the main actor in a spotlight on stage.

## 4. Straight Ahead and Pose to Pose
Two ways to draw: either draw every picture in order, or draw the important pictures first and fill in between.

## 5. Follow Through and Overlapping Action
When you stop, your hair keeps moving. Different parts move at different times, not all at once.

## 6. Slow In and Slow Out
Things speed up when starting and slow down when stopping. Like a car at a traffic light.

## 7. Arc
Most things move in curves, not straight lines. Throw a ball - it makes a rainbow shape in the air.

## 8. Secondary Action
Little movements that happen along with the main movement. Walking while whistling and swinging your arms.

## 9. Timing
How fast or slow something happens changes how it feels. Fast = exciting. Slow = calm or heavy.

## 10. Exaggeration
Make things bigger and more dramatic than real life. Cartoon characters can stretch their eyes wide when surprised.

## 11. Solid Drawing
Make flat pictures look like they have weight and depth. Things should feel like you could pick them up.

## 12. Appeal
Make characters interesting to watch. They should have something special that makes you want to keep looking.

## Remember
You don't need to use all 12 at once. Start with one or two. The more you practice, the more natural they become.

© dylantarre · MIT · dylantarre/animation-principles

Similar skills

Everything for Design →

From the same set90

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 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 universal-industry A skill that turns Disney's 12 animation principles into UI defaults for timing, easing and motion rules when no industry guide applies. CX Codex +1 485installs

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