small-200-300ms

name	small-200-300ms
description	Use when building small transitions between 200-300ms - modal appearances, card expansions, navigation transitions that users consciously perceive

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.