SwiftUI ForEach Animation inside border

I'm having issues animating views inside a ForEach list that's inside a border. Here's my code:

struct ContentView: View {
    @State var showNewMethodOptions = false
    
    var body: some View {
        VStack {
            Button {
                showNewMethodOptions.toggle()
            } label: {
                HStack {
                    Image(systemName: showNewMethodOptions ? "chevron.up" : "plus")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 32)
                        .foregroundColor(.blue)
                    Text("Add new payment method")
                        .foregroundColor(.gray)
                        .padding(.leading, 6)
                    Spacer()
                }
                .padding(.horizontal)
                .padding(.top, 20)
                .padding(.bottom, showNewMethodOptions ? 10 : 20)
            }
            
            if showNewMethodOptions {
                ForEach(PaymentMethodType.allCases) { method in
                    NavigationLink {

                    } label: {
                        ZStack(alignment: .center) {
                            RoundedRectangle(cornerRadius: 5)
                                .stroke(.blue)
                            Text(method.rawValue)
                                .font(.title3)
                                .foregroundColor(.gray)
                        }
                        .frame(height: 45.0)
                        .background()
                        .padding(.horizontal)
                        .padding(.vertical, 5)
                        .transition(.slide)
                    }
                }
            }
        }
        .animation(.spring, value: showNewMethodOptions)
        .padding(.bottom, showNewMethodOptions ? 16 : 0)
        .padding(.horizontal)
        .overlay(
            RoundedRectangle(cornerRadius: 4)
                .stroke(.gray, lineWidth: 1)
                .padding(.vertical, 4)
                .padding(.horizontal)
        )
    }
}

enum PaymentMethodType: String, CaseIterable, Identifiable {
    var id: Self {
        return self
    }
    
    case checking = "Checking"
    case savings = "Savings"
    case creditOrDebitCard = "Card"
}

When the animation happens, the "add a new payment method" HStack animates nicely enough, but the payment method options fade in while it's still sliding up, which doesn't look great because it looks like everything's on top of each other. The options also don't seem to follow the transition animation I apply to them - it's always just a fade. Is there a way to get these elements to animate together?

Hi @KBartlett , have you tried using withAnimation? I tried out your sample using

Button {
   withAnimation(.bouncy) {
       showNewMethodOptions.toggle()
  }
}

and it looked closer to what you were looking for. There's many options you can try out for the animation, so definitely pass in some different values and play around with it

SwiftUI ForEach Animation inside border
 
 
Q