Animations & Transitions

SwiftUI makes motion almost free: change state and the framework interpolates the difference for you. You'll animate changes implicitly with the .animation modifier and explicitly with withAnimation , animate views in and out with transitions , and create hero effects with matchedGeometryEffect .

Learn Animations & Transitions in our free Swift course — a beginner-friendly interactive lesson with worked examples, a practice exercise and a quick…

Part of the free Swift course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Building iOS Apps with SwiftUI • Intermediate

What You'll Learn in This Lesson

1️⃣ Implicit Animation — the .animation Modifier

Attach .animation(_:value:) to a view and it animates whenever the tracked value changes. You describe the start and end states; SwiftUI tweens between them. Great for self-contained effects like a button pulse.

2️⃣ Explicit Animation — withAnimation

Wrap the state change in withAnimation and SwiftUI animates every view affected by that change, together, with the curve you choose. Use .spring() for bouncy, natural motion.

3️⃣ Transitions — Animating In & Out

A .transition controls how a view appears and disappears when it's added to or removed from the hierarchy. It only plays when that insertion/removal is part of an animated change — typically toggling an if inside withAnimation .

4️⃣ matchedGeometryEffect — Hero Animations

Give two views the same id within a shared @Namespace and SwiftUI animates a seamless morph between their frames — the classic "thumbnail grows into a full image" hero effect.

Your turn. Fill in the blanks to animate a spinning gear both explicitly and implicitly.

Build a card that toggles between a compact and an expanded state on tap. Use withAnimation(.spring()) to animate the size change, reveal an extra detail Text with a .transition(.opacity) when expanded, and bonus: use matchedGeometryEffect so an icon glides from the corner to the header as it grows.

Practice quiz

What does withAnimation { ... } do?

  • Pauses the app
  • Animates the UI changes caused by the state change inside the closure
  • Disables animation
  • Logs to the console

Answer: Animates the UI changes caused by the state change inside the closure. withAnimation wraps a state change so SwiftUI animates the resulting view updates.

What is an IMPLICIT animation?

  • An animation triggered by withAnimation
  • An .animation modifier attached to a view that animates its changes
  • A transition
  • A timer

Answer: An .animation modifier attached to a view that animates its changes. An implicit animation uses the .animation modifier on a view to animate changes to its values automatically.

What is an EXPLICIT animation?

  • The .animation modifier
  • A static layout
  • Wrapping a state change in withAnimation to animate that specific change
  • A gradient

Answer: Wrapping a state change in withAnimation to animate that specific change. An explicit animation wraps the state change itself in withAnimation, animating exactly that update.

Which is a valid animation curve you can pass?

  • .easeInOut
  • .fastSlow
  • .curve
  • .smoothify

Answer: .easeInOut. .easeInOut is a built-in timing curve, alongside .linear, .easeIn, .easeOut, and .spring().

What does .spring() provide?

  • A linear fade
  • An instant change
  • A delay only
  • A bouncy, physics-based animation

Answer: A bouncy, physics-based animation. .spring() gives a natural, springy motion based on physics parameters.

What does a transition control?

  • The font
  • How a view appears and disappears when it is inserted or removed
  • The list order
  • The keyboard

Answer: How a view appears and disappears when it is inserted or removed. A .transition defines how a view animates in and out as it's added to or removed from the hierarchy.

Which modifier sets how a view enters/leaves the hierarchy?

  • .transition(...)
  • .frame(...)
  • .padding(...)
  • .tag(...)

Answer: .transition(...). .transition(...) specifies the insertion/removal animation, e.g. .opacity or .slide.

For a transition to play, the insertion/removal should be...

  • Instant with no animation
  • Driven by an animated state change (e.g. inside withAnimation)
  • On a background thread
  • Inside a Form

Answer: Driven by an animated state change (e.g. inside withAnimation). Transitions animate only when the add/remove is part of an animated state change.

What does matchedGeometryEffect enable?

  • Matching fonts
  • Smoothly animating a view as it moves between two layouts sharing an id
  • Matching colors
  • Geometry math only

Answer: Smoothly animating a view as it moves between two layouts sharing an id. matchedGeometryEffect links two views by id so SwiftUI animates a seamless transition between their frames.

matchedGeometryEffect requires which shared piece of setup?

  • A common id and a Namespace
  • A timer
  • A NavigationStack
  • A Form

Answer: A common id and a Namespace. You give both views the same id within a shared @Namespace so SwiftUI can match them.