lottie-bodymovin
Lottie Animation Principles
Implement all 12 Disney animation principles using Lottie (Bodymovin) for vector animations.
1. Squash and Stretch
In After Effects before export:
- Animate Scale X and Y inversely
- Use expression:
s = transform.scale[1]; [100 + (100-s), s]
// Control at runtime
lottie.setSpeed(1.5); // affect squash timing
2. Anticipation
Structure your AE composition:
- Frames 0-10: Wind-up pose
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.
631motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
561micro-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