Agent-skills-standard common-mobile-animation

Apply motion design principles for mobile apps covering timing curves, transitions, gestures, and performance-conscious animations. Use when implementing screen transitions, gesture-driven interactions, shared-element animations, or optimizing animation frame rates on iOS, Android, or Flutter. (triggers: **/*_page.dart, **/*_screen.dart, **/*.swift, **/*Activity.kt, **/*Screen.tsx, Animation, AnimationController, Animated, MotionLayout, transition, gesture)

install

source · Clone the upstream repo

git clone https://github.com/HoangNguyen0403/agent-skills-standard

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/HoangNguyen0403/agent-skills-standard "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/common/common-mobile-animation" ~/.claude/skills/hoangnguyen0403-agent-skills-standard-common-mobile-animation && rm -rf "$T"

manifest: skills/common/common-mobile-animation/SKILL.md

source content

Mobile Animation

Priority: P1 (OPERATIONAL)

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.
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.