matchedgeometryeffect doesn't work as expected - swiftui

Question

What do I want : Have a smooth animation between two views ( stack of cards and list of cards) so I used matchedgeometryeffect in SwiftUI but there is something wrong with my code that I couldn't fix.
I used same ID for two views also determine the isSource property.
struct ContentView: View {
#State var showCardByList = false
#Namespace var namespace
#State var cards : [Card] = [
Card(color: .green),
Card(color: .blue),
Card(color: .pink),
]
var body: some View {
VStack {
Text("Change")
.onTapGesture {
withAnimation(.spring()) {
showCardByList.toggle()
}
}
ZStack(alignment: .top) {
if showCardByList {
List(cards: $cards, namespace: namespace)
} else {
Stack(cards: $cards, namespace: namespace)
.padding(.top,150)
}
}
}
.frame(maxWidth: .infinity,maxHeight: .infinity,alignment: .top)
}
}
struct Card : Identifiable {
var id = UUID()
var color: Color
}
Stack view:
struct Stack: View {
#Binding var cards : [Card]
let namespace: Namespace.ID
func offset(index : Int) -> CGFloat {
switch index {
case 0:
return -50
case 1:
return -80
case 2:
return -110
default:
return 0
}
}
func getIndex(card : Card) -> Int {
if let index = cards.firstIndex(where: { $0.id == card.id }) {
return index
}
return 0
}
var body: some View {
VStack {
ZStack {
ForEach(cards,id: \.id) { card in
ZStack {
card.color.cornerRadius(20)
.matchedGeometryEffect(id: card.id, in: namespace,isSource: true)
}
.offset(y: offset(index: getIndex(card: card)))
.frame(width: 350, height: 210, alignment: .center)
}
}
}
}
}
List View:
struct List: View {
#Binding var cards : [Card]
let namespace: Namespace.ID
var body: some View {
VStack {
ScrollView {
VStack(spacing: 50) {
ForEach(cards,id: \.id) { card in
ZStack {
card.color.cornerRadius(20)
.matchedGeometryEffect(id: card.id, in: namespace,isSource: false)
}
.frame(width: 350, height: 100, alignment: .center)
}
}
}
}
}
}

Answer 1

Mark both of your .matchedGeometryEffects with isSource: true. The two views are never on the screen at the same time, and each serves as the source when switching to the other.
Change:
.matchedGeometryEffect(id: card.id, in: namespace,isSource: false)
to:
.matchedGeometryEffect(id: card.id, in: namespace,isSource: true)
To address the fading in/out of the views, add .transition(.slide) to the two views:
if showCardByList {
List(cards: $cards, namespace: namespace)
.transition(.slide)
} else {
Stack(cards: $cards, namespace: namespace)
.transition(.slide)
.padding(.top,150)
}
Note: The documentation doesn't say that you can't have two views marked with isSource: true, just that you shouldn't have two such views on screen at the same time.
Here it is running in the simulator: