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

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.

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

Duration	Range	Use Case
Short	100-150ms	Toggles, cell press
Medium	250-350ms	Navigation, modals
Long	400-600ms	Shared element, complex state