slow-in-out-mastery
Slow In / Slow Out Mastery
The Physics Principle
Objects in the real world don't move at constant speeds—they accelerate from rest and decelerate to stops. Slow in/slow out (also called ease in/ease out) captures this fundamental truth. Without it, animation looks mechanical. With it, motion feels alive.
Core Theory
Slow Out (Ease Out): More drawings clustered at the start of a movement. The object accelerates away from its starting position gradually.
Slow In (Ease In): More drawings clustered at the end of a movement. The object decelerates into its final position gradually.
Linear motion: Equal spacing between positions. Rare in nature, useful for mechanical elements or stylistic choice.
The Spacing Principle
Traditional animators controlled this through drawing spacing:
- Tight spacing = slow movement (drawings close together)
- Wide spacing = fast movement (drawings far apart)
More from dylantarre/animation-principles
mobile-touch
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
1.6Kvideo-motion-graphics
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
618motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
553micro-interactions
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
439saas-productivity
Use when designing animations for business tools, project management, collaboration software, or productivity apps
292game-designer
Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.
287