Zoom navigation transition in SwiftUI

WWDC’24 brought a lot of new and SwiftUI received many updates. One of which, is the new NavigationTransition protocol and the zoom transition. And that is pretty much what it contains at the moment. A built-in way to add a zoom transition to the view. Easy to get going, but does not provide customization, at least for now.

Here is an example of a grid view which opens a DetailView with zoom transition. Here we can see that we need to add navigationTransition view modifier to the destination view and matchedTransitionSource view modifier to the view it starts the transition from.

	struct ContentView: View {
	let colors: [[Color]] = [
	[.red, .blue, .green],
	[.yellow, .purple, .brown],
	[.cyan, .gray]
	]
	@Namespace() var namespace
	var body: some View {
	NavigationStack {
	Grid(horizontalSpacing: 50, verticalSpacing: 50) {
	ForEach(colors, id: \.hashValue) { rowColors in
	GridRow {
	ForEach(rowColors, id: \.self) { color in
	NavigationLink {
	DetailView()
	.navigationTransition(
	.zoom(
	sourceID: color,
	in: namespace
	)
	)
	} label: {
	RoundedRectangle(cornerRadius: 5)
	.foregroundStyle(color)
	.frame(width: 48, height: 48)
	}
	.matchedTransitionSource(id: color, in: namespace)
	}
	}
	}
	}
	}
	}
	}

view raw Zoom.swift hosted with ❤ by GitHub

Just a few lines of code and we have a nice zoom transition in place.

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.