Use when building standard animations between 300-500ms - page transitions, significant UI changes, animated illustrations that need clear communication

Medium Animations (300 500ms) The 300 500ms range is standard animation territory . Long enough to be watched, short enough to not impede flow. The workhorse duration for meaningful motion. Disney Principles at Medium Duration All 12 Principles Applicable Squash & Stretch : Full expression visible deformation for bouncing, elastic elements. 15 25% stretch feels natural. Anticipation : Clear preparation 80 120ms anticipation before main action. Pull back before push forward. Staging : Multi element choreography possible primary action leads, supporting elements follow. Straight Ahead/Pose to Pose : Pose to pose recommended define key positions, let easing handle in betweens. Follow Through : Essential overlapping action where parts settle at different rates. Slow In/Slow Out : Critical for naturalism both directions need proper easing. Arcs : Natural motion paths elements should travel on curves matching real physics. Secondary Action : Multiple secondary actions hair follows head, shadow follows object. Timing : 18 30 frames at 60fps. Enough frames for nuanced motion. Exaggeration : Full range available match to brand personality and context. Solid Drawing : Complex transforms work 3D rotations, perspective shifts. Appeal : Character defining animations this is where brand personality lives. Easing Recommendations Best Use Cases Page/view transitions Complex modal sequences Animated illustrations Data visualization changes Onboarding animations Feature reveals State machine transitions Loading completion celebrations Implementation Pattern Key Insight Medium duration is where animation becomes storytelling . Users watch, understand, and remember these animations. Invest in polish here it defines perceived quality.

medium-300-500ms