Article

SwiftUI Animation Composition

Bitesize

SwiftUI animations look better when they support one clear change in state.

withAnimation(.easeInOut(duration: 0.25)) {
    isExpanded.toggle()
}

Start with one intentional state change instead of animating lots of unrelated details.

More detail

A motion study showing one state change driving several coordinated animations

Good animation composition usually comes from consistency:

  • animate container state instead of every child independently
  • reuse timing where elements belong to the same interaction
  • save stronger spring effects for emphasis

The goal is not maximum motion. It is a clear feeling of response.

That is why many polished interfaces feel calmer than expected. They are not trying to animate every possibility. They choose a small number of motion behaviors and repeat them with discipline.

This creates trust. When similar interactions move in similar ways, users stop consciously noticing the animation and start feeling that the interface is coherent.

In SwiftUI, that usually means thinking about animation at the container or state-transition level, not scattering different animation modifiers across many nested views.

Deep dive

Animation quality often comes down to restraint. Too many locally defined animations can make a screen feel noisy because each part is reacting on its own terms.

A better approach is to decide what the user is actually doing:

  • revealing content
  • confirming an action
  • changing context

Then choose a motion system around that intent. When animation is composed at that level, interfaces feel more coherent and more polished.

This is also where timing becomes expressive. A quick ease can feel responsive and lightweight, while a softer curve with more settle can make a transition feel more premium or reflective. Timing is not decoration; it carries tone.

Another useful principle is to keep motion aligned with hierarchy. Larger or more important layout changes can carry broader movement, while small local details should move less. When everything moves equally, the eye has no clear priority.

There is also a performance angle. Simpler, more deliberate animation patterns are often easier for SwiftUI to render smoothly than lots of competing, state-driven effects. So restraint improves both aesthetics and reliability.

Over time, the best animation systems in apps start to resemble design systems. They define not just durations and curves, but also when motion should happen at all and what it is trying to communicate.

That is why animation composition is a valuable skill. It helps you move from “this view animates” to “this interface has a coherent motion language.”

Finished the deep dive?

You made it to the end.

Mark this article as read once you have worked through the full piece. It is a small way to keep track of what you have genuinely finished.

More in this area

Keep the thread going.

Jump sideways into the related ideas that sit closest to this piece and keep the same mental context alive.

  1. 01 Animation & feedback Explore topic