Overview

Mobile Animation provides motion design principles for mobile apps, focusing on 60fps performance and platform conventions. It covers timing standards, easing curves, transitions, and gestures to deliver native-feel interactions across mobile platforms.

How This Skill Works

Define timing using Short, Medium, and Long scales with a 600ms limit. Apply easing curves such as fastOutSlowIn (Material) or easeInOut (iOS), and animate transform and opacity to avoid layout costs. Prefer FadeTransition or SlideTransition for simple cases, manage AnimationControllers responsibly, and dispose them to prevent leaks.

When to Use It

• When implementing quick tactile feedback, such as button presses (Short: 100–150 ms).
• When transitioning between screens or modals (Medium: 250–350 ms).
• When performing shared element or complex state changes (Long: 400–600 ms).
• When you need gesture-driven interactions, such as pan or interactive pop.
• When you want to avoid blocking UI and keep a responsive feel.

Quick Start

1. Step 1: Identify the user action and assign it a timing category (Short/Medium/Long).
2. Step 2: Choose an easing curve (Material fastOutSlowIn or iOS easeInOut) and decide the animated properties (transform/opacity).
3. Step 3: Implement with FadeTransition/SlideTransition when possible, wire up Gesture handlers, and verify performance on target devices.

Best Practices

• Aim for 60fps native-feel motion by animating transforms (scale/translate) and opacity rather than layout properties.
• Choose timing categories (Short/Medium/Long) that match the action, and never exceed 600 ms.
• Prefer FadeTransition or SlideTransition for simple cases instead of heavy animation builders.
• Use appropriate gestures: implement onPan and interactivePopGesture for fluid UX.
• Dispose every AnimationController to prevent memory leaks and avoid blocking UI.

Example Use Cases

• Button press feedback using 100–150 ms quick motion.
• Navigation between screens or modals with 250–350 ms transitions.
• Shared element animation that moves a common element between screens (400–600 ms).
• Gesture-driven interactions like pan to dismiss or drag-to-reorder.
• Non-blocking heavy calculations during animations to avoid frame drops.

Frequently Asked Questions