animation-patterns

Guide proper use of PhaseAnimator and KeyframeAnimator for SwiftUI animations.

1|Updated Mar 26, 2026
One-click install
npx skills add https://github.com/venomez-viper/PathWise --skill animation-patterns-venomez-viper
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animation-patterns
Source: https://github.com/venomez-viper/PathWise/tree/main/.claude/skills/design/animation-patterns
Command: npx skills add https://github.com/venomez-viper/PathWise --skill animation-patterns-venomez-viper

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SwiftUI animation patterns are easy to misuse, leading to brittle UI and unpredictable motion. This Skill clarifies how to choose and apply PhaseAnimator and KeyframeAnimator correctly to coordinate multi-phase and timeline-based animations while avoiding common pitfalls.

Core Features & Use Cases

  • PhaseAnimator for discrete, cyclical phases with typed content closures.
  • KeyframeAnimator for timeline-based, multi-property animations with per-property tracks (PhaseAnimator vs KeyframeAnimator).
  • Built-in transitions, content transitions, and SF Symbol effects to cover typical UI motion scenarios.
  • Guidance on appropriate spring configurations and timing curves to match UX expectations.

Quick Start

Create a PulsingIcon using PhaseAnimator to observe phase changes in a SwiftUI view.

Frequently Asked Questions about animation-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use PhaseAnimator and KeyframeAnimator correctly in SwiftUI?

To use SwiftUI PhaseAnimator and KeyframeAnimator correctly, apply PhaseAnimator for discrete cyclical phases with typed content closures, and KeyframeAnimator for timeline-based multi-property tracks to avoid brittle UI motion.

What's the difference between PhaseAnimator and KeyframeAnimator for SwiftUI animations?

SwiftUI PhaseAnimator handles discrete, cyclical phases using typed content closures, while KeyframeAnimator manages timeline-based animations across multiple properties with per-property tracks for complex UI motion.

How do I configure spring timing curves for SwiftUI multi-phase animations?

Configure SwiftUI multi-phase animations by applying appropriate spring configurations and timing curves that match UX expectations, ensuring safe defaults and clear timing rules for PhaseAnimator and KeyframeAnimator.

Does this SwiftUI animation guidance apply to iOS 17 and later?

Yes, these SwiftUI animation patterns apply to building responsive and accessible interfaces across iOS 17+, covering PhaseAnimator, KeyframeAnimator, transitions, content transitions, and SF Symbol effects.

Why does my SwiftUI animation pattern produce unpredictable motion?

SwiftUI animation patterns produce unpredictable motion when API shapes and timing configurations are misused, which can be fixed by following proper guardrails, safe defaults, and usage rules for PhaseAnimator and KeyframeAnimator.

Can I use SF Symbol effects with SwiftUI content transitions?

Yes, you can use SF Symbol effects with SwiftUI content transitions to cover typical UI motion scenarios, coordinating them with PhaseAnimator and KeyframeAnimator for responsive and accessible interfaces.