Transition issue on overlay - swift

Question

I have an overlay that displays when a toggle is turned to true. When it is displayed, it's supposed to have a transition from right to left of the view for a nice transition between the views. The issue is the animation animates from the top right corner and shoots down, in a diagonal motion.
I'm assuming either the animation is incorrect or theres something throwing off the animation of the overlay.
Thank you in advance for your help.
struct createUserAccount: View {
let transition: AnyTransition = .asymmetric(insertion: .move(edge:.trailing), removal: .move(edge: .leading))
//Stores form info as userInfo, stored in userModel
#ObservedObject var userInformation = FormViewModel()
#ObservedObject var keyboardResponder = KeyboardResponder()
#State private var showFitnessForm = false
#Environment (\.managedObjectContext) var moc //calls managed Object context (datacore)
#Environment (\.dismiss) var dismiss
#FetchRequest(sortDescriptors: []) var allUsers: FetchedResults <User>
init(){
UITableView.appearance().backgroundColor = .clear
}
var body: some View {
ZStack{
Form{
Section(){
TextField("FirstName", text: $userInformation.firstname)
TextField("LastName", text: $userInformation.lastname)
TextField("Email", text: $userInformation.email)
if userInformation.emailPrompt != "" {
Text(userInformation.emailPrompt)
.font(.caption).italic().foregroundColor(.red)
}
SecureField("Passsword", text: $userInformation.password
).autocapitalization(.none)
if userInformation.passwordPrompt != "" {
Text(userInformation.passwordPrompt)
.font(.caption).italic().foregroundColor(.red)
}
}
.listRowBackground(Color.clear)
.padding()
.navigationBarTitle(Text("Lets Get Started"))
.navigationBarTitleDisplayMode(.automatic)
.font(.system(size:18))
.listStyle(GroupedListStyle())
}
Button("Continue"){
let newUser = User(context: moc)
newUser.id = UUID()
newUser.firstName = userInformation.firstname
newUser.lastName = userInformation.lastname
newUser.email = userInformation.email
newUser.password = userInformation.password
showFitnessForm.toggle()
// dismiss()
}
.frame(width: 150, height: 20)
.foregroundColor(.white)
.padding()
.background(LinearGradient(gradient: Gradient(colors: [.orange, .pink]), startPoint: .leading, endPoint: .bottom))
.font(.title3)
.background(.clear)
.cornerRadius(5)
.offset(y:30)
.opacity(userInformation.isSignUpComplete ? 1 : 0.5)
.offset(y: keyboardResponder.currentHeight*2)
.disabled(!userInformation.isSignUpComplete)
.frame(height: 300)
HStack{
Text("Already a User?").italic().font(.callout)
NavigationLink(destination: userLogin() .navigationBarHidden(true)){
Text("Login")
.foregroundColor(.pink).font(.callout)
}
}
.offset(y:80)
.offset(y: keyboardResponder.currentHeight*2)
}
.overlay(
showFitnessForm ? FitnessForm(
userFirstName: $userInformation.firstname,
userLastName: $userInformation.lastname,
userEmailAddress: $userInformation.email,
userLoginPassword: $userInformation.password
) .animation(Animation.easeInOut(duration: 1.0), value: offset)
.transition(transition) : nil )
}
}

Answer 1

Try this
.overlay(
VStack {
if showFitnessForm {
FitnessForm(...)
.transition(transition) // << here !!
}
}
.animation(Animation.easeInOut(duration: 1.0), value: showFitnessForm) // << here !!
)
*about diagoanal movement - I assume your view is in NavigationView, so look at this one Broken animation in NavigationView