Skills

Swiftui Motion

SwiftUI animation foundations - withAnimation, transitions, matchedGeometryEffect...

Install

npx skills add AThevon/genjutsu --skill swiftui-motion -g -a claude-code -y
Repository
AThevon/genjutsu721
Category
Design
Updated
3d ago
License
See repository
Context cost
Mediumabout 3,000 tokens
Runs scripts
No, instructions only

What it does

SwiftUI animation foundations - withAnimation, transitions, matchedGeometryEffect, PhaseAnimator, KeyframeAnimator, springs, gestures.

Version-sensitive. Every API name, SDK gate and browser-support claim below was verified on 2026-09-08 against primary sources. What against, and when, is in _jutsu/VERSIONS.md. If that date is old, re-verify before acting on a version number.

SwiftUI Motion

SwiftUI animation core. Loaded for any SwiftUI project (iOS, macOS, multi-target Apple). Concise rules here. Deep-dive in references/. Pair with ../motion-principles/SKILL.md (foundation) and ../mobile-principles/SKILL.md (touch UX).


Animation API decision tree

NeedAPI
Single value over timewithAnimation { } + @State or .animation(_, value:)
Multiple coordinated statesPhaseAnimator(phases) (iOS 17+)
Time-based keyframesKeyframeAnimator(initialValue:repeating:content:) (iOS 17+)
Custom property animations@Animatable macro (needs Xcode 26 / SwiftUI 2025 SDK to compile; runtime availability iOS 13.0+ / macOS 10.15+ / watchOS 6.0+) or the Animatable protocol by hand (iOS 13+)
Shared element transitionsmatchedGeometryEffect(id:in:)
Gesture-drivenDragGesture / MagnifyGesture + .offset / .scaleEffect
Loop forever.animation(.linear.repeatForever(autoreverses: true), value: ...) or .phaseAnimator

Rule: start with withAnimation. Reach for PhaseAnimator only when you have 3+ ordered states. Reach for KeyframeAnimator only when you need parallel time-based tracks.


Springs (the only easing you should care about)

SwiftUI ships named spring presets (iOS 17+): .snappy, .bouncy, .smooth, plus the parameterised .spring(duration:bounce:blendDuration:) and .interactiveSpring(...). Each of the three named ones also takes (duration:extraBounce:) overloads. Use them. Tune response / dampingFraction only when a preset is wrong.

Read the whole SKILL.md on GitHub

More in Design