After Five

struct AfterFiveIntroAnimation: View {
    @State private var appearText = false
    @State private var goLeft = false
    @State private var goRight = false
    
    @State private var showStartPageScreen = false
    @Namespace var startPageAppear
    
    var body: some View {
        VStack {
            if showStartPageScreen == false {
            ZStack {
                Color.red
                    .ignoresSafeArea()
                    .opacity(0.9)
                
                VStack {
                    HStack(spacing: 15) {
                        Text("After")
                            .font(.system(size: 50))
                            .bold()
                            .opacity(appearText ? 0 : 1)
                            .animation(.easeOut(duration: 0.4).delay(2.6), value: appearText)
                        
                        ZStack {
                            Rectangle()
                                .frame(width: 8, height: 55)
                                .cornerRadius(2)
                                .offset(x: appearText ? 114 : 0)
                                .animation(.easeInOut(duration: 0.5).delay(1.8), value: appearText)
                                .opacity(goLeft ? 0 : 0.9)
                                .animation(.easeInOut(duration: 1).delay(2.1), value: goLeft)
                            
                            Rectangle()
                                .frame(width: 8, height: 55)
                                .cornerRadius(2)
                                .offset(x: 114)
                                .opacity(goLeft ? 1 : 0)
                                .offset(x: goLeft ? -300 : 0)
                                .animation(.easeInOut(duration: 1.3).delay(2), value: goLeft)
                                .opacity(goRight ? 0 : 1)
                                .animation(.default.delay(3.2), value: goRight)
                                //.matchedGeometryEffect(id: "STARTPAGE", in: startPageAppear)
                        }
                        
                        Text("Five")
                            .font(.system(size: 50))
                            .bold()
                            .opacity(appearText ? 0 : 1)
                            .animation(.easeOut(duration: 0.3).delay(1.8), value: appearText)
                    }
                    .foregroundColor(.white)
                    .opacity(appearText ? 0.9 : 0)
                    .animation(.easeOut(duration: 1.5).delay(0.3), value: appearText)
                    .onAppear {
                        appearText = true
                        goLeft = true
                        goRight = true
                        
                        DispatchQueue.main.asyncAfter(deadline: .now() + 3.5) {
                            withAnimation(.easeInOut(duration: 1)) {
                                showStartPageScreen = true
                                }
                            }
                        }
                    }
                }
                
            } else {
                VStack {
                    AfterFiveStartPage(showStartPageScreen: $showStartPageScreen, startPageAppear: startPageAppear)
                }
            }
        }
        .matchedGeometryEffect(id: "STARTPAGE", in: startPageAppear)
    }
}

gistfile1.txt

struct AfterFiveStartPage: View {
    @Binding var showStartPageScreen: Bool
    var startPageAppear: Namespace.ID
    
    var body: some View {
        TabView {
            AfterFiveHome()
                .tabItem {
                    Label("Home", systemImage: "house")
                }
            
            AfterFiveNews()
                .tabItem {
                    Label("News", systemImage: "globe.europe.africa.fill")
                }
            }
            .ignoresSafeArea()
            .matchedGeometryEffect(id: "STARTPAGE", in: startPageAppear)
        
    }
}

gistfile2.txt

struct AfterFiveHome: View {
    var body: some View {
        NavigationView {
            ZStack {
                VStack {
                    Text("")
                        .font(.title)
                }
            }
            .navigationTitle("Welcome")
        }
    }
}

gistfile3.txt

struct AfterFiveNews: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Whats happening today?")
            }
            .navigationTitle("News")
        }
    }
}