micro-100-200ms
Micro Animations (100-200ms)
The 100-200ms range is the sweet spot for micro-interactions. Fast enough to feel responsive, slow enough to be perceived as intentional motion.
Disney Principles at Micro Speed
Works Well
Squash & Stretch: Light application - 5-10% works for bouncy buttons, appearing elements.
Anticipation: Micro-anticipation possible - 20-30ms wind-up before 150ms action.
Staging: Single focal point - one element moving, rest static.
Straight Ahead/Pose to Pose: Either works - simple enough for straight ahead, controlled enough for poses.
Follow Through: Minimal overshoot - 2-5% past target, settle quickly.
Slow In/Slow Out: ease-out dominates - elements should arrive confidently.
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