# Common Mobile Animation

> Motion design principles for mobile apps. Covers timing curves, transitions, gestures, and performance-conscious animations. (triggers: **/*_page.dart, **/*_screen.dart, **/*.swift, **/*Activity.kt, **/*Screen.tsx, Animation, AnimationController, Animated, MotionLayout, transition, gesture)

- Skill: `comeonoliver/common-mobile-animation` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/common-mobile-animation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/common-mobile-animation/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: ComeOnOliver (https://skillmd.com/u/comeonoliver)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/comeonoliver/common-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