
universal-fallback
Use when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.
- Installs
- 482
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/dylantarre/animation-principles --skill universal-fallback- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads universal-fallback automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Universal Animation Principles
Disney's 12 animation principles applied generically across any medium or context.
Quick Reference
| Principle | Universal Application |
|---|---|
| Squash & Stretch | Show impact and flexibility |
| Anticipation | Prepare before action |
| Staging | Direct attention clearly |
| Straight Ahead / Pose to Pose | Continuous vs keyframe approach |
| Follow Through / Overlapping | Elements complete at different rates |
| Slow In / Slow Out | Ease acceleration/deceleration |
| Arc | Natural curved motion paths |
| Secondary Action | Supporting elements reinforce primary |
| Timing | Duration affects perceived weight |
| Exaggeration | Push for clarity and impact |
| Solid Drawing | Maintain form and structure |
| Appeal | Design for engagement and delight |
The 12 Principles Explained
1. Squash & Stretch
Objects deform during action to show impact, weight, and flexibility. Volume remains constant—compression in one axis means expansion in another. The most important principle for showing life and physics.
Application: Anything with mass reacts to force. Soft objects deform more. Rigid objects show less but still respond. Use to show weight, speed, and material properties.
2. Anticipation
Preparation before the main action. Wind-up before pitch. Crouch before jump. Pullback before push. Prepares the audience for what's coming and makes action more readable.
Application: Major actions need setup. The bigger the action, the bigger the anticipation. Can be physical, visual, or timing-based. Skipping anticipation makes motion feel robotic.
3. Staging
Directing attention to what matters. Composition, contrast, motion, and timing work together to make intent clear. One clear idea per moment.
Application: Audiences can only focus on one thing at a time. Use all available tools (position, lighting, motion, timing) to make the important element unmistakable.
4. Straight Ahead & Pose to Pose
Two animation approaches. Straight ahead: draw frame-by-frame for fluid, spontaneous motion. Pose to pose: define key poses, then fill between for control and clarity. Most work combines both.
Application: Use straight ahead for dynamic, unpredictable motion. Use pose to pose for planned, precise sequences. Procedural/physics = straight ahead. Scripted = pose to pose.
5. Follow Through & Overlapping Action
Different parts of an object/character move at different rates and stop at different times. Nothing stops all at once. Overlapping creates natural, organic motion.
Application: Lead with the root/core, secondary elements follow. Heavier elements lag more. Lighter elements react faster. Creates complexity and believability.
6. Slow In & Slow Out
Objects accelerate and decelerate—they don't move at constant speed. More frames at start and end of motion, fewer in the middle. Creates natural, physics-based movement.
Application: Linear motion looks mechanical. Ease-in for exits, ease-out for entrances. Ease-in-out for contained motion. The curve defines the character of movement.
7. Arc
Natural motion follows curved paths, not straight lines. Joints rotate, creating inherent arcs. Thrown objects follow parabolas. Straight line motion is rare in nature.
Application: When something moves from A to B, the path between matters. Check motion paths—mechanical if straight, natural if curved. Exceptions: robots, specific mechanical effects.
8. Secondary Action
Supporting actions that reinforce the primary action without distracting from it. Facial expression supporting body language. Environmental response to character action.
Application: Primary action tells the story. Secondary actions enrich it. Secondary should never dominate. Remove secondary if it distracts from primary.
9. Timing
The number of frames/duration determines the feel of motion. Fewer frames = faster = lighter/snappier. More frames = slower = heavier/more deliberate. Timing is the foundation of personality.
Application: Experiment with timing to find the right feel. Context matters—same duration can feel fast or slow depending on expectations. Timing conveys weight, emotion, and energy.
10. Exaggeration
Push beyond reality for clarity and impact. Doesn't mean "unrealistic"—means amplifying the essence. More extreme poses, more dramatic timing, clearer staging.
Application: Reality can be subtle, unclear, boring. Animation clarifies reality by pushing what matters. Find the truth and amplify it. Different contexts allow different levels.
11. Solid Drawing
Understanding of form, weight, volume, and three-dimensional space. Objects maintain their structure during motion. Drawings have weight, balance, and depth.
Application: Things have mass and occupy space. Maintain consistency during animation. Understand the structure of what you're animating. Avoid unintentional distortion.
12. Appeal
The quality that makes audiences want to watch. Not just "cute"—can be appealing through design, personality, or movement. Characters and motion should be engaging.
Application: Design and animate for your audience. Create emotional connection. Motion should feel intentional and satisfying. Every choice should serve engagement.
Applying Principles
- Start with purpose: What must the audience understand/feel?
- Stage clearly: Direct attention to what matters
- Time appropriately: Duration affects everything
- Ease naturally: No linear motion in nature
- Anticipate actions: Prepare for major moments
- Follow through: Let motion complete naturally
- Add depth: Secondary action enriches primary
- Exaggerate clarity: Push to communicate
- Maintain structure: Respect form and physics
- Design appeal: Make it worth watching
These principles transcend medium. Master them, adapt them, apply them thoughtfully.
FAQ
What does the universal-fallback skill do?
Use when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.
How do I install universal-fallback?
Run npx skills add https://github.com/dylantarre/animation-principles --skill universal-fallback in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/universal-fallback/ (personal) or .claude/skills/universal-fallback/ (project).
Which AI agents can use universal-fallback?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is universal-fallback safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains universal-fallback?
It is published by dylantarre in dylantarre/animation-principles. It has 482 recorded installs.
More from dylantarre/animation-principles
video-motion-graphics
dylantarre/animation-principles
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
mobile-touch
dylantarre/animation-principles
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
framer-motion
dylantarre/animation-principles
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
motion-designer
dylantarre/animation-principles
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
micro-interactions
dylantarre/animation-principles
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
web-motion-design
dylantarre/animation-principles
Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.