SwiftUI Fundamentals

Animations and Transitions

Use value-scoped animation, explicit transactions, transitions, and reduced-motion support to clarify interface changes.

Intermediate5 min read2 guided activities

Before you begin

What you will understand

Distinguish animation from transition.
Animate state changes explicitly or by value.
Create insertion and removal transitions.
Respect Reduce Motion and avoid distracting animation.

Learning stage

Concept Explanation

Animation interpolates animatable values as the interface changes between states. withAnimation wraps a state mutation in an animation transaction. animation(_:value:) associates animation with changes to one specific value, avoiding the broad implicit-animation behavior that can animate unrelated updates.

A transition describes how a view enters or leaves the hierarchy. It only runs when identity or conditional structure actually inserts or removes that view. Changing opacity on an always-present view is animation, not insertion or removal.

Motion should communicate causality, hierarchy, continuity, or feedback. It should not delay common work. Read the accessibility Reduce Motion environment value and provide a quieter alternative when large movement is not essential.

withAnimation: animates changes caused by an explicit state mutation.
animation(_:value:): scopes implicit animation to one observed value.
transition: defines insertion and removal behavior.
Transaction: carries animation configuration through an update.
Reduce Motion: user preference requesting less nonessential movement.

Learning stage

Syntax & Examples

The expandable section animates one state change and substitutes opacity for movement when Reduce Motion is enabled.

ExpandableLesson.swiftswift

import SwiftUI

struct ExpandableLesson: View {
  @State private var isExpanded = false
  @Environment(.accessibilityReduceMotion) private var reduceMotion

  var body: some View {
    VStack(alignment: .leading, spacing: 12) {
      Button {
        withAnimation(reduceMotion ? .easeOut(duration: 0.15) : .spring) {
          isExpanded.toggle()
        }
      } label: {
        Label("Key takeaways", systemImage: isExpanded ? "chevron.up" : "chevron.down")
      }

      if isExpanded {
        Text("State drives the interface.")
          .transition(reduceMotion ? .opacity : .move(edge: .top).combined(with: .opacity))
      }
    }
  }
}

The button's mutation defines the animation transaction, while the conditional view uses a transition appropriate to the motion preference.

Learning stage

Real-World Usage

Connect the SwiftUI concept to complete, maintainable application features.

Explain expansion, selection, insertion, deletion, and progress changes.
Maintain visual continuity between list and detail states.
Provide subtle success or validation feedback.
Coordinate phase-based or keyframe animation only when a simple state animation is insufficient.

Learning stage

Common Mistakes

Identify patterns that weaken ownership, identity, adaptation, accessibility, or user experience.

Applying animation without a value and unintentionally animating unrelated changes.
Expecting a transition on a view that never enters or leaves the hierarchy.
Animating layout so aggressively that text becomes hard to track.
Ignoring Reduce Motion.
Using animation to hide slow work instead of improving feedback and performance.

Learning stage

Practice Exercises

Build the behavior in a small Xcode project and review it in multiple states.

Activity 1

Animate collection changes

Add and remove identified cards with a value-scoped animation and an insertion/removal transition. Verify stable IDs.

Hint: The data mutation and transition work together; identity determines which view changed.

Activity 2

Create a reduced-motion alternative

Build an expanding panel that uses movement normally and a short fade when Reduce Motion is enabled.

Hint: Preserve feedback and state clarity even when removing large motion.

Learning stage

Knowledge Check

Answer each question before revealing the explanation.

QUESTION 1

When does a SwiftUI transition apply?

A.When a view is inserted into or removed from the hierarchy
B.Whenever text changes
C.Only during navigation
D.Whenever body is evaluated

Reveal answer

When a view is inserted into or removed from the hierarchy

A transition describes appearance and disappearance associated with structural identity changes.

QUESTION 2

Why use animation(_:value:)?

Reveal answer

It scopes the animation to changes in a specific value instead of potentially animating unrelated updates.

Explicit scope makes motion more predictable as a view grows.

Learning stage

Interview Preparation

Explain the design in terms of data flow, identity, lifecycle, platform behavior, and trade-offs.

What is the difference between animation and transition in SwiftUI?

Short answer: Animation interpolates changed values; a transition defines how a view enters or leaves the hierarchy.

Explore the detailed answer

A state mutation can animate properties such as scale, position, or color. If conditional structure inserts or removes a view, its transition supplies the insertion and removal effects, and an animation transaction drives them. Stable identity and structure determine which behavior applies.

Possible follow-ups

• How do you avoid broad implicit animations?
• How should Reduce Motion affect the design?

Learning stage

Key Takeaways

Effective SwiftUI motion explains change. Scope animations to meaningful values, use transitions for structural insertion and removal, and preserve comprehension for people who reduce motion.

Animate meaningful state changes, not every update.
Prefer explicit or value-scoped animation.
Transitions require insertion or removal.
Stable identity affects animated changes.
Respect Reduce Motion with a clear alternative.