animation principles - novice
Use when someone has basic awareness of animation principles and wants to start applying them in simple projects
- Installs
- 490
- 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 animation-principles---novice- 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 animation principles - novice 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.
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
FAQ
What does the animation principles - novice skill do?
Use when someone has basic awareness of animation principles and wants to start applying them in simple projects
How do I install animation principles - novice?
Run npx skills add https://github.com/dylantarre/animation-principles --skill animation-principles---novice 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/animation-principles---novice/ (personal) or .claude/skills/animation-principles---novice/ (project).
Which AI agents can use animation principles - novice?
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 animation principles - novice 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 animation principles - novice?
It is published by dylantarre in dylantarre/animation-principles. It has 490 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.