# Mobile Animation

> Motion design principles for mobile apps. Covers timing curves, transitions, gestures, and performance-conscious animations.

- Skill: `fierzone/mobile-animation` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add fierzone/mobile-animation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fierzone/mobile-animation/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools, AI & ML
- Author: fierzone (https://skillmd.com/u/fierzone)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/fierzone/mobile-animation

---


# Mobile Animation

## **Priority: P1 (OPERATIONAL)**

Native-feeling motion design. Optimize for 60fps and platform conventions.

## Timing Standards

- **Short**: 100-150ms (Toggles, cell press)
- **Medium**: 250-350ms (Nav, modals)
- **Long**: 400-600ms (Shared element, complex state)
- **Limit**: Never >600ms.

## Guidelines

- **Easing**: Use `Curves.fastOutSlowIn` (Material) or `easeInOut` (iOS). Avoid `linear`.
- **Performance**: Animate `transform` (Scale/Translation) and `opacity`. Avoid `width`/`height`.
- **Gestures**: Implement `onPan` / `interactivePopGesture` for fluid UX.
- **Optimization**: Use `FadeTransition` / `SlideTransition` over `AnimatedBuilder` for simple cases.

[Animation Patterns](references/animation-patterns.md)

## Anti-Patterns

- **No Linear Easing**: Feels robotic.
- **No Layout Trashing**: Avoid animating properties that trigger layout (width, padding).
- **No Memory Leaks**: Always `dispose()` AnimationControllers.
- **No Blocking UI**: Run heavy calculations outside animation frames.

## Related Topics

mobile-ux-core | mobile-performance | flutter/animations