Navigation with matchedGeometryEffect?

[alelordelo]

Ciao Matteo!

Is it possible to do a navigation with scaling animation using matchedGeometryEffect?

On the example bellow I made it work with a Stack, works fine. But I cannot get it to work as a navigation between views.

Maybe there is already a way to do using your library?

cheers from Stockholm!

import SwiftUI


class CoverData: ObservableObject {
    @Published var images = ["cover", "cover2"]
    @Published var selected = ""
    @Published var showDetails: Bool = false
}

struct Grid: View {
    @EnvironmentObject var viewModel: CoverData
    
    let namespace: Namespace.ID
    
    var body: some View {
        
        List {
            ForEach(viewModel.images.indices) { index in
                let image = viewModel.images[index]
                Image(image)
                    .resizable()
                    .frame(width: 50, height: 50)
                    .cornerRadius(4)
                    .padding()
                    .matchedGeometryEffect(id: image, in: namespace)
                    .onTapGesture {
                        viewModel.selected = image
                        withAnimation(.spring()) {
                            viewModel.showDetails.toggle()
                        }
                    }
            }
        }
   }
}

struct Detail: View {
    @EnvironmentObject var viewModel: CoverData

    let namespace: Namespace.ID
    
    var body: some View {
        
            Image(viewModel.selected)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .cornerRadius(10)
                .padding(40)
                .matchedGeometryEffect(id: viewModel.selected, in: namespace)
        
      
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(#colorLiteral(red: 0.234857142, green: 0.043259345, blue: 0.04711621255, alpha: 1)))
    }
}

struct ContentView: View {
    
    @Namespace private var ns
    @StateObject private var coverData = CoverData()
    
    var body: some View {
        ZStack {
            Spacer()
            if coverData.showDetails {
                Detail(namespace: ns)
                .onTapGesture {
                    withAnimation(.spring()) {
                        coverData.showDetails.toggle()
                    }
                }
            }
            else {
                Grid(namespace: ns)
            }
        }
        .environmentObject(coverData)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}