t1k:designer:ux:ui-animation

Field	Value
Module	`ux`
Version	`1.7.2`
Effort	`high`
Tools	—

Keywords: motion design, transitions, UI animation, UX

How to invoke

/t1k:designer:ux:ui-animation

Game UI Animation

When This Skill Triggers

Animating screens, menus, popups, or modals in a game UI
Choosing between slide, fade, scale, or iris transitions
Staggering list/grid items on appear
Button press feedback, icon bounce, color flash
Toast/notification slide-in and auto-dismiss
Loading skeletons, progress bars, spinners
Tab or page switch transitions

Boundaries

Gameplay VFX (hit flash, screen shake) → game-feel-juice
Timeline/Animator sequences → engine animation skills (engine layer)
Tween API syntax → tweening library skill (engine layer)
Canvas layout / anchors → UI framework skill (engine layer)

Timing Guidelines

Category	Duration	Use for
Micro-interaction	80–150 ms	Button press, icon bounce, highlight
Element transition	150–300 ms	Modal open, drawer slide, tooltip
Screen transition	300–500 ms	Full screen swap, page navigation
Cinematic moment	500–800 ms	Game over, level complete, boss intro

Rule: never exceed 500 ms for player-initiated transitions — feels sluggish.

Easing Recommendations

Direction	Curve	Tweening lib
Enter / appear	Ease-out (decelerate)	`Ease.OutQuart`
Exit / dismiss	Ease-in (accelerate)	`Ease.InQuart`
Movement / reposition	Ease-in-out	`Ease.InOutCubic`
Bounce / punch	Spring / back-ease	`Ease.OutBack`

Core Patterns

Open: scale 0.85→1.0 + alpha 0→1, ease-out, 200–280 ms
Close: scale 1.0→0.85 + alpha 1→0, ease-in, 150–200 ms (faster than open)
Stagger children: 30–50 ms offset per item, top-to-bottom

Button Press Feedback

Scale punch: 0.92 on press, spring back to 1.0 over 120 ms (Ease.OutBack)
Color flash: tint → original over 80 ms
Disable interaction during anim to prevent double-taps

List / Grid Item Appearance

Stagger fade-in: alpha 0→1 + translateY +20px→0, 40 ms offset per item
Cap visible stagger delay at 400 ms total (max ~10 items animated)
Items below fold: animate on scroll-enter, not on screen open

Toast / Notification

Enter: slide from edge, ease-out, 250 ms
Attention pulse: scale 1.0→1.05→1.0, 2× repeat, 300 ms each
Auto-dismiss: ease-in fade + slide-out, 200 ms, after 3 s hold (configurable)

Backdrop: alpha 0→0.6, ease-out, 200 ms
Content: scale 0.9→1.0 + alpha 0→1, ease-out, 250 ms, +30 ms backdrop delay
Dismiss: content first (200 ms), backdrop follows (150 ms)

→ See references/ui-animation-patterns.md for screen transitions, tab switch, loading patterns.

Tweening Library Integration

// Menu open — scale + fade in parallel
LMotion.Create(0.85f, 1f, 0.25f).WithEase(Ease.OutQuart)
    .BindToLocalScaleXY(menuRoot);
LMotion.Create(0f, 1f, 0.25f).WithEase(Ease.OutQuart)
    .BindTo(canvasGroup, (v, cg) => cg.alpha = v);

// Staggered list appearance
for (int i = 0; i < items.Length; i++)
    LMotion.Create(0f, 1f, 0.2f).WithDelay(i * 0.04f).WithEase(Ease.OutCubic)
        .BindTo(items[i].canvasGroup, (v, cg) => cg.alpha = v);

→ See the tweening library skill (engine layer) for full API, sequences, and cancellation patterns.

Performance Rules

Animate RectTransform position/scale and CanvasGroup.alpha — never layout properties (width/height/padding)
Use CanvasGroup for group alpha; avoid per-element alpha mid-animation
Disable Canvas on hidden screens (canvas.enabled = false) — alpha=0 still renders
Pool toast GameObjects; instantiate on first use, reuse thereafter
Do not animate more than 20 elements simultaneously on mobile

Cross-References

tweening library skill (auto-activated via registry) — tween API, sequences, cancellation
game-feel-juice — gameplay feedback (hit flash, shake) — NOT UI transitions
game-visual-design — color/style for animated elements (rarity glow, tier colors)
game-ui-wireframe — layout templates that animations apply to (screen flows)
engine animation skills (auto-activated via registry) — Animator/Timeline for complex sequences
UI framework skills (auto-activated via registry) — Canvas layout, anchors, event system

Reference Files

File	Coverage
`references/ui-animation-patterns.md`	Screen transitions (fade/slide/iris/dissolve), tab switch, loading patterns, when NOT to use

Gotchas

60fps on mid-tier Android is the test — animations that look great on iPhone Pro stutter on a Samsung A-series; budget accordingly.
Stagger animation > simultaneous animation — a 30ms stagger across 5 list items reads as polished; 0ms reads as a flash.
Modal open/close must NOT block input — use predictive dismissal — players who tap to dismiss in 200ms feel the lag at 400ms.