| name | Mobile Animation |
| description | Motion design principles for mobile apps. Covers timing curves, transitions, gestures, and performance-conscious animations. |
| metadata | {"labels":["mobile","animation","motion","transitions","ux"],"triggers":{"files":["**/*_page.dart","**/*_screen.dart","**/*.swift","**/*Activity.kt","**/*Screen.tsx"],"keywords":["Animation","AnimationController","Animated","MotionLayout","transition","gesture"]}} |
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
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
