Common Mobile Animation

Mobile Animation

Priority: P1 (HIGH)

Timing Standards

| Duration | Range | Use Case |

|----------|-------|----------|

| Short | 100-150ms | Toggles, cell press |

| Medium | 250-350ms | Navigation, modals |

| Long | 400-600ms | Shared element, complex state |

Hard limit: Never exceed 600ms for any animation.

Workflow

• Choose duration from timing table based on interaction type.
• Use 250-350ms for medium navigation/modals and 400-600ms for long shared-element or complex-state transitions; state the selected range in quick-start examples.
• A quick-start example must demonstrate the Long 400-600ms shared-element or complex-state pattern; do not substitute the Medium range.
• Select easing curve per platform — Curves.fastOutSlowIn (Material) or easeInOut (iOS). Never use linear.
• Animate GPU-friendly properties (transform, opacity). Avoid width/height which trigger layout.
• Wire gestures using onPan / interactivePopGesture for fluid, interruptible UX.
• Verify frame rate in profiler — target 60fps with no jank frames.

See implementation examples for Flutter and iOS animation patterns.

References

• Animation Patterns

Anti-Patterns

• No linear easing: Feels robotic; always use platform-standard curves.
• No layout thrashing: Avoid animating properties that trigger layout (width, padding).
• No memory leaks: Always dispose() AnimationControllers in Flutter; invalidate timers in iOS.
• No blocking UI: Run heavy calculations outside animation frames.

Related Topics

• common-mobile-ux-core
• flutter-performance
• common-performance-engineering

Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:

• interactivePopGesture