# ui-transition — UI Panel Transition Animation

Smooth enter/exit animations for UI panels, modals, HUD elements, and overlays.

## Transition Types

| Type | In Effect | Out Effect | Best For |
|------|-----------|------------|----------|
| `fade` | opacity 0→1 | opacity 1→0 | Overlays, modals |
| `slide-up` | y+offset→0 | 0→y-offset | Bottom sheets |
| `slide-down` | y-offset→0 | 0→y+offset | Top notifications |
| `slide-left` | x+offset→0 | 0→x-offset | Right panels |
| `slide-right` | x-offset→0 | 0→x+offset | Left panels |
| `scale` | scale 0→1 | scale 1→0 | Popups, tooltips |

## Parameters

| Parameter | Default | Description |
|-----------|---------|-------------|
| `type` | `fade` | Transition style |
| `direction` | `in` | Enter or exit |
| `duration` | 200ms | Animation speed |
| `distance` | 30px | Slide distance |
| `ease` | `easeOut` (in) / `easeIn` (out) | Easing function |
| `onComplete` | — | Callback when done |

## Decision Notes

| Decision | Reason |
|----------|--------|
| 200ms default | Apple HIG and Material Design standard for UI transitions |
| Ease asymmetry | Enter: easeOut (fast start = responsive feel); Exit: easeIn (slow start = content lingers) |
| Slide distance 30px | Subtle movement; large values feel sluggish on mobile |