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 )
    }
}

CodePudding user response：

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