animation-patterns_skill

Overview

This skill provides practical SwiftUI animation patterns and API guidance for iOS and macOS. It focuses on correct spring configurations, view transitions, PhaseAnimator/KeyframeAnimator usage, and SF Symbol effects to avoid common mistakes and accessibility regressions.

How this skill works

The skill inspects animation intents and code snippets to recommend the correct API shapes and parameter generations. It detects misuse such as mixed spring parameter styles, wrong closure signatures for PhaseAnimator/KeyframeAnimator, improper transition primitives, and suggestions for reduce-motion handling.

When to use it

• Adding, fixing, or reviewing SwiftUI animation code
• Implementing springy, bouncy, or snappy motion
• Creating view insertion/removal or hero/zoom navigation transitions
• Sequencing or keyframing multi-step animations
• Applying SF Symbol effects like bounce, pulse, or wiggle

Best practices

• Use either the iOS 13 spring API (response+dampingFraction) or the iOS 17 spring API (duration+bounce); never mix parameters
• Prefer .symbolEffect() for SF Symbol animations instead of withAnimation for better system integration
• Always include value: when using .animation(_:value:) to avoid deprecated no-value variants
• Respect reduce-motion settings and provide non-motion alternatives for critical UI changes
• Keep UI feedback animations short (~0.5s) unless intentionally decorative

Example use cases

• Fixing a spring animation that mixes response/dampingFraction with duration/bounce
• Converting a navigation hero animation from matchedGeometryEffect to matchedTransitionSource + .navigationTransition(.zoom) on iOS 18+
• Defining a PhaseAnimator with the correct closure signature: PhaseAnimator(phases) { content, phase in ... }
• Sequencing a multi-property motion with KeyframeAnimator timelines for scale, rotation, and offset
• Adding a pulse or wiggle to an SF Symbol using .symbolEffect(.pulse) while honoring reduce-motion