animation-patterns

Name: animation-patterns
Availability: InStock
Author: gustavscirulis

Guide SwiftUI animation patterns for springs, transitions, and SF Symbol effects.

114|8|Updated Mar 4, 2025

Search Tags:#animation #swiftui #transitions #keyframeanimator #phaseanimator #sf symbols

Ready to run

npx skills add https://github.com/gustavscirulis/snapgrid --skill animation-patterns-gustavscirulis

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: animation-patterns
Source: https://github.com/gustavscirulis/snapgrid/tree/main/.claude/skills/skills/design/animation-patterns
Command: npx skills add https://github.com/gustavscirulis/snapgrid --skill animation-patterns-gustavscirulis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers implement, review, and fix SwiftUI animation code by providing correct API usage patterns and preventing common mistakes.

Core Features & Use Cases

Animation Guidance: Offers correct API shapes for springs, transitions, PhaseAnimator, KeyframeAnimator, and SF Symbol effects.
Error Prevention: Helps avoid issues like mixed spring parameters, incorrect closure signatures, and using the wrong transition APIs.
Use Case: When implementing a complex UI transition involving a hero animation between list items and a detail view, this Skill can guide you on using matchedTransitionSource and .navigationTransition for a smooth, native experience.

Quick Start

Use the animation-patterns skill to find the correct way to implement a spring animation for a button tap.

Frequently Asked Questions about animation-patterns

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

FAQPage Schema

How do I implement a hero animation between a list and detail view in SwiftUI?▼

To implement a SwiftUI hero animation, you use matchedTransitionSource and .navigationTransition to create a smooth, native transition between list items and a detail view. This ensures correct API usage for view transitions without common implementation errors.

What is the correct way to use PhaseAnimator and KeyframeAnimator in SwiftUI?▼

PhaseAnimator and KeyframeAnimator are SwiftUI APIs for creating complex animations. This Skill provides the correct API shapes and closure signatures to prevent common implementation mistakes when building these advanced animation patterns.

Why does my SwiftUI spring animation behave erratically?▼

Your SwiftUI spring animation likely behaves erratically due to mixed spring parameters. Using the correct API shapes for springs and avoiding mixed parameters ensures the animation behaves as expected.

Can I animate SF Symbols effects in SwiftUI?▼

Yes, you can animate SF Symbols in SwiftUI. This Skill provides guidance on implementing SF Symbol effects correctly, ensuring proper API usage and preventing common errors in your iOS and macOS animation code.

Does SwiftUI provide built-in accessibility considerations for animations?▼

Yes, SwiftUI provides accessibility considerations for animations. This Skill addresses accessibility considerations like reduce motion, ensuring your view transitions and animation patterns respect user settings.

What are common mistakes when using SwiftUI transition APIs?▼

Common mistakes when using SwiftUI transition APIs include using the wrong transition APIs and providing incorrect closure signatures. This Skill helps avoid these implementation issues by ensuring correct API usage for view transitions.