home / skills / hoangnguyen0403 / agent-skills-standard / mobile-animation

mobile-animation skill

safe

This skill helps you implement native-feeling mobile animations by applying timing standards, easing choices, and performance patterns across platforms.

npx playbooks add skill hoangnguyen0403/agent-skills-standard --skill mobile-animation

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

1.6 KB

---
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](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

Overview

This skill provides practical motion design standards for mobile apps, focusing on native-feeling animations, timing, easing, gesture handling, and performance constraints. It codifies timing ranges, recommended easing, animation properties to prefer, and common anti-patterns to avoid. The guidance helps engineers deliver smooth 60fps animations consistent with platform conventions. It applies to native and cross-platform frameworks like Flutter, React Native, iOS, and Android.

How this skill works

The skill inspects animation choices and compares them against timing standards (short/medium/long) and easing recommendations for Material and iOS platforms. It flags costly property animations (width/height), missing gesture-driven interactions, and lifecycle mistakes like undisposed controllers. It also suggests optimized primitives (transform/opacity, FadeTransition/SlideTransition) and enforces a maximum duration limit to keep interactions responsive.

When to use it

Designing or reviewing navigation and modal transitions
Implementing interactive gestures (drag, swipe, pull-to-refresh)
Optimizing animations for 60fps performance
Choosing easing curves and timing for controls and shared element transitions
Auditing code for animation-related memory or layout issues

Best practices

Use timing bands: Short 100–150ms, Medium 250–350ms, Long 400–600ms and never exceed 600ms
Prefer platform easing: Material use fastOutSlowIn; iOS use easeInOut; avoid linear easing
Animate transform (translate/scale) and opacity instead of layout properties like width/height
Implement interactive gestures (onPan, interactivePopGesture) so animations respond to user input
Use high-level primitives (FadeTransition, SlideTransition) for simple cases; dispose animation controllers to avoid leaks
Run heavy calculations off the animation frame to prevent dropped frames

Example use cases

Toggle switch or button press using a 100–150ms scale and opacity animation with fastOutSlowIn
Modal entrance using a 250–350ms SlideTransition with easeInOut on iOS and fastOutSlowIn on Android
Shared element transition using a 400–600ms animated transform with cross-fade of opacity
Interactive swipe-to-dismiss implemented with onPan and a physics-based spring to settle position
Performance audit that replaces width/height animations with transforms and removes layout thrashing

FAQ

What is the maximum recommended animation duration?

Keep animations under 600ms; longer durations feel sluggish and break perceived responsiveness.

Which properties are cheapest to animate for 60fps?

Transform (translation, scale, rotation) and opacity are most performant because they avoid layout and compositing costs.