Explanation
I'm trying to animate the contents of a view off the screen while animating new contents in from the other side (see playground code and select "Next Question" while running the view). Most of the views behave as expected but the LazyVGrid leaves the screen with animation but doesn't enter the screen with the rest of the animation; instead, it immediately appears at the final location while the rest of the views animate in.
In the final code, I also change the question text and the possible answers in the LazyVGrid.
Playground Code
Code Block import SwiftUI import PlaygroundSupport struct ContentView: View { var body: some View { VStack (alignment: .leading) { Text("History Questionaire").font(.title).padding([.top, .leading]).foregroundColor(.white) QuestionView() .transition( .asymmetric( insertion: .move(edge: .trailing), removal: .move(edge: .leading) ) ) } .background(Color(.lightGray)) .cornerRadius(8.0) .padding() } } struct QuestionView: View { @State var questionViewID = 1 var body: some View { VStack (alignment: .leading){ Text("Question").font(.title2).padding(.bottom) VStack (alignment: .leading) { Text("Have you had a doctor appointment this year?").font(.body).foregroundColor(Color(.darkGray)) // Question: How do I get the items in the grid to animate in with the rest of the items in the VStack? LazyVGrid(columns: [GridItem(.adaptive(minimum: 150, maximum: 300))], alignment: .leading, content: { Text("Yes") .padding() .background(Color.white) .cornerRadius(4.0) Text("No") .padding() .background(Color.white) .cornerRadius(4.0) }) } .padding(.bottom) HStack { Spacer() Button(action: { withAnimation(Animation.easeIn(duration: 2)) { questionViewID += 1 } }, label: { Text("Next Question") .font(.body) .fontWeight(.bold) .foregroundColor(.blue) }) Spacer() } .padding(.vertical) } .id(questionViewID) .padding() } } PlaygroundPage.current.setLiveView(ContentView())