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.
Arcs: Natural curves enhance - elements can travel on arcs rather than straight lines.
Secondary Action: One or two secondary actions - fade + scale, move + rotate.
Timing: 12-18 frames at 60fps. Smooth, deliberate motion.
Exaggeration: Moderate to pronounced - depends on brand personality.
Solid Drawing: Full transform combinations - translate, scale, rotate together.
Appeal: Conscious animation that builds brand character.
Doesn't Work
-
Feeling instant (too slow)
-
Complex character animation
-
Long travel distances
-
Multiple sequential stages
Easing Recommendations
/* Standard smooth transition */ transition: all 250ms ease-out;
/* Modal/card appearance - confident arrival */ transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
/* Bouncy personality */ transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* Professional, subtle */ transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
Best Use Cases
-
Modal dialogs appearing
-
Card expand/collapse
-
Navigation drawer slides
-
Tab content transitions
-
Filter panel toggles
-
Image thumbnails expanding
-
Alert/notification slides
Implementation Pattern
.modal { opacity: 0; transform: translateY(20px) scale(0.95); transition: opacity 200ms ease-out, transform 250ms cubic-bezier(0.16, 1, 0.3, 1); }
.modal.open { opacity: 1; transform: translateY(0) scale(1); }
.card-expand { transition: all 280ms cubic-bezier(0.34, 1.56, 0.64, 1); }
Key Insight
Small transitions are seen and understood. Users track the motion and their brain processes the spatial relationship. Use this to guide attention and communicate hierarchy.