Creating a hero view transition with .matchedGeometryEffect

Do you know what a hero transition is? If you don’t know the term, you have still probably seen it many times: maybe in an e-commerce app, where, with a list of products for sale, each product also has a thumbnail to show the product. Selecting a product thumbnail flies to a details page, with a big image of the same product. The smooth animation from the thumbnail to the big image is called a hero transition.

Another example is the cover image animation in the Apple Music player: transitioning from the mini player to the full player.

SwiftUI provides a view modifier, .matchedGeometryEffect(id:in:properties:anchor:isSource:), which makes it very easy to implement a hero view animation with little effort.

Getting ready

This recipe uses a few images, courtesy of Pixabay (https://pixabay.com).

You can find the images in the GitHub repository at https://github.com/PacktPublishing/SwiftUI-Cookbook-3rd...