Animation patterns

Skill rshankras/claude-code-apple-skills/skills/design/animation-patterns

SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, SF Symbol effects, scroll-driven effects, mesh gradients, text renderers, and shader effects. Use when implementing, reviewing, or fixing animation or visual-effect code on iOS/macOS.From its SKILL.md

Install

npx -y skills add rshankras/claude-code-apple-skills --skill animation-patterns

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

8.5 KB, ~2.0k tokens by cl100k_base, as published. Nobody here has run it

Animation Patterns

Correct API shapes and patterns for SwiftUI animations. Prevents the most common mistakes: mixed spring parameter generations, wrong PhaseAnimator/KeyframeAnimator closure signatures, and using matchedGeometryEffect where matchedTransitionSource is needed.

When This Skill Activates

Use this skill when the user:

Asks to add, fix, or review animation code
Mentions spring, bounce, or snappy animations
Wants view transitions (insertion/removal, hero, zoom)
Asks about PhaseAnimator or KeyframeAnimator
Wants SF Symbol effects (bounce, pulse, wiggle, breathe)
Mentions matchedGeometryEffect or matchedTransitionSource
Asks about reduce motion / animation accessibility
Wants to sequence or chain animations
Mentions withAnimation, animation completions, or Transaction
Wants scroll-driven effects (parallax, carousels, scrollTransition, visualEffect)
Mentions MeshGradient, TextRenderer, or Metal shader effects (colorEffect, distortionEffect, layerEffect)

Decision Tree

Choose the right reference file based on what the user needs:

What are you animating?
│
├─ A state change (opacity, position, color)
│  └─ → core-animations.md
│     ├─ withAnimation { } — explicit animation
│     ├─ .animation(_:value:) — implicit animation
│     └─ Spring configuration — .spring, .bouncy, .snappy, .smooth
│
├─ A multi-step / sequenced animation
│  └─ → phase-keyframe-animators.md (PhaseAnimator)
│     └─ Cycles through discrete phases automatically or on trigger
│
├─ A complex multi-property animation (scale + rotation + offset)
│  └─ → phase-keyframe-animators.md (KeyframeAnimator)
│     └─ Timeline-based keyframes with per-property tracks
│
├─ A view appearing / disappearing
│  └─ → transitions.md
│     ├─ .transition() — insertion/removal
│     ├─ .contentTransition() — text/symbol changes
│     └─ .asymmetric() — different in/out
│
├─ A hero / zoom navigation transition
│  └─ → transitions.md (matchedTransitionSource section)
│     ├─ iOS 18+: matchedTransitionSource + .navigationTransition(.zoom)
│     ├─ UIKit: preferredTransition = .zoom (capture stable IDs, never views)
│     └─ iOS 14+: matchedGeometryEffect (NOT for NavigationStack)
│
├─ A UIKit view driven by SwiftUI state or gestures
│  └─ → transitions.md (Bridging UIKit and SwiftUI Animations)
│     └─ UIView.animate(.spring(...)) / context.animate in updateUIView
│
├─ An SF Symbol animation
│  └─ → symbol-effects.md
│     └─ .symbolEffect(.bounce), .pulse, .wiggle, .breathe, .rotate
│
├─ A scroll-driven, geometry-driven, or shader effect
│  └─ → visual-effects.md
│     ├─ .scrollTransition — carousel scale/parallax/caption fades
│     ├─ .visualEffect — position-based effects without GeometryReader
│     ├─ MeshGradient — animatable multi-point gradients
│     ├─ TextRenderer — per-line / per-glyph text animation
│     └─ ShaderLibrary + .colorEffect / .distortionEffect / .layerEffect
│
└─ Spring physics / timing configuration
   └─ → core-animations.md (Spring Configurations section)

API Availability

API	Minimum Version	Reference
`withAnimation`	iOS 13	core-animations.md
`.animation(_:value:)`	iOS 13	core-animations.md
`.spring(response:dampingFraction:)`	iOS 13	core-animations.md
`.matchedGeometryEffect`	iOS 14	transitions.md
`.transition(.push(from:))`	iOS 16	transitions.md
`.contentTransition(.numericText())`	iOS 16	transitions.md
`PhaseAnimator`	iOS 17	phase-keyframe-animators.md
`KeyframeAnimator`	iOS 17	phase-keyframe-animators.md
`.spring(duration:bounce:)`	iOS 17	core-animations.md
Spring presets (`.bouncy`, `.snappy`, `.smooth`)	iOS 17	core-animations.md
`withAnimation(_:completionCriteria:_:completion:)`	iOS 17	core-animations.md
`.symbolEffect()`	iOS 17	symbol-effects.md
`.transition(.blurReplace)`	iOS 17	transitions.md
`.contentTransition(.symbolEffect(.replace))`	iOS 17	transitions.md
`Transition` protocol / `TransitionPhase`	iOS 17	transitions.md
`TransactionKey`, scoped `.animation` / `.transaction` variants	iOS 17	core-animations.md
`KeyframeTimeline`, `.mapCameraKeyframeAnimator`	iOS 17	phase-keyframe-animators.md
`.scrollTransition`, `.visualEffect`	iOS 17	visual-effects.md
Shaders: `.colorEffect` / `.distortionEffect` / `.layerEffect`	iOS 17	visual-effects.md
`MeshGradient`	iOS 18	visual-effects.md
`TextRenderer` / `TextAttribute`	iOS 18	visual-effects.md
`.matchedTransitionSource`	iOS 18	transitions.md
`.navigationTransition(.zoom)` — push, sheet, fullScreenCover	iOS 18	transitions.md
`UIViewController.preferredTransition = .zoom`	iOS 18	transitions.md
`UIView.animate(_: Animation)` / `context.animate`	iOS 18	transitions.md

Top 5 Mistakes — Quick Reference

#	Mistake	Fix	Details
1	`spring(response:bounce:)` — mixing parameter generations	Use either `spring(response:dampingFraction:)` (iOS 13) or `spring(duration:bounce:)` (iOS 17)	core-animations.md
2	`.animation(.spring())` without `value:` parameter	Always pass `value:` — the no-value variant is deprecated (iOS 15)	core-animations.md
3	Wrong PhaseAnimator closure signature	`PhaseAnimator(phases) { content, phase in }` — not `{ phase in }`	phase-keyframe-animators.md
4	Using `matchedGeometryEffect` for NavigationStack transitions	Use `matchedTransitionSource` + `.navigationTransition(.zoom)` on iOS 18+	transitions.md
5	Using `withAnimation` for SF Symbol effects	Use `.symbolEffect()` modifier instead	symbol-effects.md

Review Checklist

When reviewing animation code, verify:

Reduce motion — animations respect AccessibilityMotionEffect or UIAccessibility.isReduceMotionEnabled; provide non-motion alternatives
Duration limits — no animation exceeds ~0.5s for UI feedback; longer only for decorative/ambient effects
Spring vs linear — springs for interactive/physical motion; linear/easeInOut only for opacity fades or progress indicators
No deprecated APIs — .animation(.spring()) without value: is deprecated; .animation(nil) is replaced by withTransaction
Correct spring generation — parameter names match the same API generation (never mix response with bounce)
Completion handlers — using withAnimation(_:completionCriteria:_:completion:) (iOS 17+), not inventing .onAnimationCompleted
Transition scope — .transition() only affects views inside if/switch controlled by state; not for views that are always present
Per-frame closures stay cheap — KeyframeAnimator content closures, visualEffect closures, TextRenderer.draw, and Animatable view bodies run every frame; no allocation, formatting, or layout math inside

Reference Files

File	Content
core-animations.md	withAnimation, springs, completions, transactions + TransactionKey, timing curves, Animatable mechanics, fluid-interface principles (momentum projection, rubber-banding, hysteresis)
phase-keyframe-animators.md	PhaseAnimator, KeyframeAnimator, KeyframeTimeline, MapKit camera keyframes, custom animations
transitions.md	View transitions, custom Transition protocol, matched geometry, navigation/zoom transitions (SwiftUI + UIKit), interruptibility, UIKit↔SwiftUI bridging, gesture-driven springs
symbol-effects.md	SF Symbol effects, accessibility
visual-effects.md	scrollTransition, visualEffect, MeshGradient, TextRenderer, shader effects (colorEffect/distortionEffect/layerEffect), effect pipelines, semantic alignment guides

What ships with it: 5 files

53.6 KB alongside SKILL.md

Gives 0 of the 12 instructions most css styling skills give in ~2.0k tokens

Counted across 512 of the 512 authors here whose files we hold, read 2026-09-06

Animate only transform and opacityin 32 of 512, across 30 files
Respect prefers-reduced-motionin 21 of 512
Support reduced motion preferencesin 16 of 512, across 6 files
Use Tailwind CSS for stylingin 14 of 512, across 13 files
Specify AnimatePresence mode explicitlyin 12 of 512, across 2 files
Set initial states explicitlyin 12 of 512, across 2 files
Use semantic HTML elementsin 11 of 512, across 10 files
Use oklch for color valuesin 11 of 512, across 10 files
Honor prefers-reduced-motion in animationsin 10 of 512
Provide a reduced-motion fallback for animationsin 10 of 512, across 9 files
Use property names in camelCasein 9 of 512, across 4 files
Ensure UI animations stay under 300msin 9 of 512, across 6 files

Said here and by no other author read

Avoid mixing spring parameter generations

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.