swiftui-animation

Implement SwiftUI animations, transitions, matchedGeometryEffect, and Metal shaders.

194|26|Updated Oct 20, 2025

Search Tags:#animation #metal #swiftui

Ready to run

npx skills add https://github.com/jamesrochabrun/skills --skill swiftui-animation

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: swiftui-animation
Source: https://github.com/jamesrochabrun/skills/tree/main/skills/swiftui-animation
Command: npx skills add https://github.com/jamesrochabrun/skills --skill swiftui-animation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designing smooth, advanced SwiftUI animations and GPU effects to elevate UIs.

Core Features & Use Cases

Animation APIs: Explicit/implicit, curves, springs.
Matched Geometry: Hero transitions.
Metal Shader Effects: GPU time-saver experiments.
PhaseAnimator/KeyframeAnimator: Multi-phase timelines.

Quick Start

Ask: "Animate a view with a springy expand/collapse."

Frequently Asked Questions about swiftui-animation

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

FAQPage Schema

How do I create smooth animations with spring physics in SwiftUI?▼

SwiftUI animations use explicit and implicit modifiers with spring parameters to create physics-based motion. Apply `.animation(.spring(...))` to views or use `.withAnimation` for state changes. Spring presets and custom damping/stiffness values control bounce and speed, letting you animate position, scale, opacity, and other properties with natural deceleration curves.

What's the best way to implement hero animations between views?▼

Hero animations in SwiftUI use `matchedGeometryEffect` to smoothly transition a view between screens. Tag source and destination views with the same ID and namespace, then coordinate transitions with `NavigationStack` or sheet presentation. The effect tracks geometry changes and animates scale, position, and shape simultaneously across view hierarchies.

Can I use GPU shaders to accelerate animations in SwiftUI?▼

Yes. Metal shader integration in SwiftUI enables GPU-based effects for advanced visual transformations. Combine Metal shaders with animation timelines to offload complex calculations from the CPU, reducing overhead on graphics-heavy animations and enabling real-time effects like distortions, color shifts, and particle systems.

How do I orchestrate multi-phase animations with PhaseAnimator or KeyframeAnimator?▼

PhaseAnimator and KeyframeAnimator coordinate sequences of animation stages with precise timing control. PhaseAnimator cycles through discrete phases, while KeyframeAnimator defines keyframes with specific timing curves. Both allow staggered animations, conditional triggers, and complex motion patterns across multiple properties or views.

When should I use transitions versus explicit animations?▼

Transitions handle view insertion and removal animations, while explicit animations control property changes over time. Use transitions for NavigationStack, sheets, and conditional rendering; use explicit animations for opacity, scale, and position changes within persistent views. Transitions automatically manage timing; explicit animations require manual state management.

What accessibility considerations matter for SwiftUI animations?▼

Respect `accessibilityReduceMotionEnabled` to disable or simplify animations for users sensitive to motion. Test animation speed and duration to ensure they don't cause disorientation. Provide semantic information independent of animation; never rely solely on motion to convey UI state or user feedback.