ios-motion-and-animation

Installation
SKILL.md

iOS motion & animation — spring-first, purposeful, reduce-motion-safe

Source: Apple HIG Motion (developer.apple.com/design/human-interface-guidelines/motion), SwiftUI Animation reference, WWDC23 "Animate with springs" (10158), WWDC25 "Build a SwiftUI app with the new design" (323) + "Get to know the new design system" (356), WWDC26 "What's new in SwiftUI" + "Build powerful drag and drop in SwiftUI" (271) + the iOS 27 Liquid Glass refinements keynote, cross-checked across research passes against technical references (createwithswift, nilcoalescing, GetStream spring catalog, swiftwithmajid, arshtechpro) — June 2026. iOS 26 = shipping baseline; iOS 27 (WWDC 2026, June 8–12 2026) = current cycle — the spring model, transitions, matchedGeometryEffect, .numericText(), .symbolEffect, and Liquid Glass morphing all carry forward; iOS 27 adds Liquid Glass v2 motion tuning + drag-to-reorder/scroll-minimize transition APIs (§§10, 16). Apple's rule: motion is purposeful — it conveys feedback, status, and continuity; it is never decoration; and it is always optional (Reduce Motion).

1. The SwiftUI animation model

Two ways to animate; both interpolate from the current value to the new one when state changes.

// (a) withAnimation — wrap the state mutation; everything depending on it animates
withAnimation(.snappy) { isExpanded.toggle() }

// (b) .animation(_:value:) — scoped, declarative; fires only when `value` changes
ringFill
    .animation(.smooth(duration: 0.4), value: caloriesConsumed)  // PREFER — scoped

Always use the value: form. The deprecated .animation(_) (no value) animates on every change and is a top source of jank. Animate the smallest view that needs it, not a whole screen. withAnimation returns its closure's result and takes an optional completion: (iOS 17+) for chaining.

2. Curves vs springs — prefer springs

Easing curves (use only for non-spatial, finite changes — opacity, color):

Installs
5
First Seen
Oct 8, 2026