Animation Principles - Novice
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).
More from dylantarre/animation-principles
mobile-touch
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
1.7Kvideo-motion-graphics
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
628motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
560micro-interactions
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
442saas-productivity
Use when designing animations for business tools, project management, collaboration software, or productivity apps
293game-designer
Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.
287