A playground showing how the .matchedGeometryEffect modifier works.

MatchedGeometryEffectDemo.swift

import SwiftUI
import PlaygroundSupport

final class Item: Identifiable {
    let color: Color
    let id = UUID()
    var displayDetail: Bool
    init(color: Color, displayDetail: Bool = false) {
        self.color = color
        self.displayDetail = displayDetail
    }
}

struct ItemView: View {
    let item: Item
    var body: some View {
        RoundedRectangle(cornerRadius: 18)
            .foregroundColor(item.color)
            .shadow(radius: 10)
    }
}

struct DemoView: View {
    @Namespace private var animation
    @State var showDetail = false
    let items: [Item] = [.orange, .green, .purple, .pink, .black, .blue].map {
        .init(color: $0)
    }
    let columns: [GridItem] = .init(repeating: .init(.fixed(200), spacing: 18),
                                    count: 2)

    var body: some View {
        VStack { if showDetail { detail } else { main } }
    }

    var main: some View {
        LazyVGrid(columns: columns, spacing: 18) {
            ForEach(items) { item in
                ItemView(item: item)
                    .frame(minWidth: 200, minHeight: 200)
                    .matchedGeometryEffect(id: item.id, in: animation)
                    .animation(.spring(response: 0.5, dampingFraction: 0.9))
                    .onTapGesture {
                        withAnimation {
                            item.displayDetail = true
                            showDetail = true
                        }
                    }
            }
        }.padding(.all, 18)
    }

    var detail: some View {
        ForEach(items) { item in
            if item.displayDetail {
                ItemView(item: item)
                    .frame(maxWidth: 260, maxHeight: 260)
                    .matchedGeometryEffect(id: item.id, in: animation)
                    .animation(.spring(response: 0.5, dampingFraction: 0.9))
                    .onTapGesture {
                        withAnimation {
                            item.displayDetail = false
                            showDetail = false
                        }
                    }
            }
        }
    }
}

PlaygroundPage.current.liveView = UIHostingController(rootView: DemoView())