
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
| Need | API |
|---|---|
| Single value over time | withAnimation { } + @State or .animation(_, value:) |
| Multiple coordinated states | PhaseAnimator(phases) (iOS 17+) |
| Time-based keyframes | KeyframeAnimator(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 transitions | matchedGeometryEffect(id:in:) |
| Gesture-driven | DragGesture / 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.


