small-200-300ms
Small Transitions (200-300ms)
At 200-300ms, users consciously perceive motion. This duration bridges micro-interactions and full animations - ideal for UI state changes.
Disney Principles at Small Duration
Works Well
Squash & Stretch: Visible but restrained - 10-15% for playful interfaces, 5% for professional.
Anticipation: Brief wind-up works - 40-60ms preparation enhances 200ms main action.
Staging: Clear hierarchy - primary element leads, secondary follows by 50-100ms.
Straight Ahead/Pose to Pose: Pose to pose preferred - keyframes create polished motion.
Follow Through: Noticeable overshoot - 5-10% past target adds life.
Slow In/Slow Out: Full easing curves - both ease-in-out and custom beziers shine.
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.
634motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
564micro-interactions
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
443saas-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