Skip to content
Development
Skill

/ios-animation-implementation

Write Swift animation code using Apple's latest frameworks — SwiftUI animations, Core Animation, and UIKit. Prefer first-party APIs over third-party libraries. Use when implementing iOS animations, writing animation code, building transitions, creating gesture-driven

From plugin
beagle
85139 skills2 commands

Claude Code

$ npx -y skills add existential-birds/beagle --skill ios-animation-implementation --agent claude-code

SKILL.md

ios-animation-implementation.SKILL.md
name: ios-animation-implementation
description: Write Swift animation code using Apple's latest frameworks — SwiftUI animations, Core Animation, and UIKit. Prefer first-party APIs over third-party libraries. Use when implementing iOS animations, writing animation code, building transitions, creating gesture-driven interactions, or converting animation specs/designs into working Swift code. Covers iOS 18 through iOS 26 APIs including KeyframeAnimator, PhaseAnimator, custom Transition protocol, zoom navigation transitions, matchedGeometryEffect, symbol effects, mesh gradients, and SwiftUI-UIKit animation bridging.

iOS Animation Implementation

Write animation code that uses Apple's frameworks directly. Third-party animation libraries add dependency risk and often lag behind new OS releases — Apple's APIs are well-optimized for the render pipeline and get free improvements with each iOS version.

Before Writing Custom Animation

Check whether the system already handles the motion you need. Apple's HIG: "Many system components automatically include motion, letting you offer familiar and consistent experiences throughout your app." System components also automatically adjust for accessibility settings and input methods — Liquid Glass (iOS 26) responds with greater emphasis to direct touch and produces subdued effects for trackpad. Custom animation can't match this adaptiveness for free, so prefer system-provided motion when it exists.

**Skip custom animation when:**

  • Standard navigation transitions cover your case (push, pop, sheet, fullScreenCover)
  • SF Symbol `.symbolEffect` provides the feedback you need
  • `.contentTransition(.numericText)` handles your data change
  • The system's default spring on `withAnimation` is sufficient

**Write custom animation when:**

  • The system doesn't provide the spatial relationship you need (hero transitions, custom gestures)
  • You need coordinated multi-property choreography
  • The animation is a signature moment that defines the app's identity
  • Gesture-driven interaction requires custom progress mapping

API Selection

Choose the right API for the job. Start with SwiftUI animations (simplest, most declarative), drop to UIKit when you need interactive control, and reach for Core Animation only when you need layer-level precision.

| Need | API | Why | |------|-----|-----| | State-driven property changes | `withAnimation` / `.animation(_:value:)` | Declarative, automatic interpolation | | Multi-step sequenced animation | `PhaseAnimator` | Discrete phases with per-phase timing | | Per-property timeline control | `KeyframeAnimator` | Independent keyframe tracks per property | | Hero transitions between views | `matchedGeometryEffect` + `Namespace` | Geometry matching across view identity | | Navigation push/pop with zoom | `.navigationTransition(.zoom)` | iOS 18+ built-in zoom transition | | Custom view insertion/removal | `Transition` protocol conformance | `TransitionPhase`-based modifier | | In-view content swap | `.contentTransition()` | Numeric text, interpolation, opacity | | Scroll-position-based effects | `.scrollTransition` | Phase-driven scroll-linked animation | | SF Symbol animation | `.symbolEffect()` | Bounce, pulse, wiggle, breathe, rotate | | Interactive/interruptible (UIKit) | `UIViewPropertyAnimator` | Pause, resume, reverse, scrub | | Per-layer property animation | `CABasicAnimation` / `CASpringAnimation` | Shadow, border, cornerRadius animation | | Complex choreography (layers) | `CAKeyframeAnimation` + `CAAnimationGroup` | Multi-property layer animation | | Physics simulation | `UIDynamicAnimator` | Gravity, collision, snap, attachment | | Haptic feedback paired with animation | `.sensoryFeedback` modifier | Tied to value changes | | Animated background gradients | `MeshGradient` | 2D grid of positioned, animated colors |

Implementation by Category

Detailed patterns and code examples live in the reference files. Load the one that matches your task:

| Task | Reference | |------|-----------| | SwiftUI declarative animations (withAnimation, springs, phase, keyframe) | [references/swiftui-animations.md](references/swiftui-animations.md) | | View transitions (navigation, modal, custom Transition protocol) | [references/transitions.md](references/transitions.md) | | Gesture-driven interactive animations | [references/gesture-animations.md](references/gesture-animations.md) | | Core Animation and UIKit animation patterns | [references/core-animation.md](references/core-animation.md) |

When to Load References

  • Writing `withAnimation`, spring parameters, `PhaseAnimator`, or `KeyframeAnimator` → swiftui-animations.md
  • Building navigation transitions, modal presentations, `matchedGeometryEffect`, or custom `Transition` → transitions.md
  • Implementing drag-to-dismiss, swipe actions, pinch/rotate, or scroll-linked effects → gesture-animations.md
  • Working with `CABasicAnimation`, `UIViewPropertyAnimator`, layer animations, or bridging SwiftUI↔UIKit → core-animation.md

Spring Parameters Quick Reference

Springs are the default animation type in modern SwiftUI. Use `duration` and `bounce` — not mass/stiffness/damping unless bridging to UIKit/CA.

| Preset | Duration | Bounce | Use Case | |--------|----------|--------|----------| | `.smooth` | 0.5 | 0.0 | Default transitions, most state changes | | `.snappy` | 0.3 | 0.15 | Micro-interactions, toggles, quick feedback | | `.bouncy` | 0.5 | 0.3 | Playful moments, attention-drawing | | `.interactiveSpring` | 0.15 | 0.0 | Gesture tracking, drag following | | Custom | varies | varies | `.spring(duration: 0.4, bounce: 0.2)` |

Accessibility & Multimodal Feedback

Apple's HIG: "Make motion optional" and "supplement visual feedback by also using alternatives like haptics and audio to communicate." Every animation must handle Reduce Motion, and important state changes should use multiple feedback channels — not animation alone.

@Environment(\.accessibilityReduceMotio
Read more
@existential-birds
Ships withbeagle

Image: NASA, Public Domain. Source Beagle is an Agent Skills marketplace: framework-aware code review, documentation, testing, architectural analysis, and git workflows for any compatible coding agent.

Stars on GitHub

Momentum

stars in total
85
Star history of existential-birds/beagle on GitHub, a chart by star-history.com

Other skills on beagle.

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills10d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc12d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react1d252k
@facebook@facebookInstall Skill

Questions about ios-animation-implementation.

Which coding agents can use ios-animation-implementation?
ios-animation-implementation installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.