I'm trying to create an animation for prompts in a search bar like in Instagram

Viewed 47

This is what my code creates

this is what my code creates

I want the prompts to keep moving up one after the other in a continuous cycle like on Instagram but am not able to move the text up a second time and it comes back down. Is it possible to have two offset modifiers for the same text so that after moving up into the bar I can move it up a second time so it moves out of the view?

     @State private var list: [String] = ["Search \"puppy biting\"","Search \"deworming\""]
     @State private var currentPrompt:Int = 0
     @State private var timer: Timer?
     @State private var playAnimation : Bool = false
     @State private var playAnimation2 : Bool = false
         
    ZStack { 
              VStack {
                    HStack  {
                                        if !list.isEmpty {
                                                HStack {
                                                    ZStack {
                                                        Text(list[0])
                                                            .foregroundColor(.gray)
                                                            .font(.fontFor(.regular, size: 
                                                            .frame(alignment: .leading)
                                                            .offset(y: playAnimation ? 30:0)
                                                            .opacity(playAnimation ? 0:1)
                                                        Text(list[1])
                                                            .foregroundColor(.gray)
                                                            .font(.fontFor(.regular, size: 
                                                            .frame(alignment: .leading)
                                                            .offset(y: playAnimation2 ? 30:0) 
                                                            .opacity(playAnimation ? 1:0)
                                                    }
                                                    Spacer()
                                                }
                                            .frame(height: 20, alignment: .leading)
                                            Spacer()
                                        }
                            }.padding(.horizontal)
                                .padding(.vertical,10)
                                .background(Color("searchBg"))
                                .cornerRadius(30)
                    }
                    .padding(.horizontal, 20)
                    .padding(.bottom, 20)
                    .background(Color.white.ignoresSafeArea(edges: .top))
            }
            .onAppear {
                timer = Timer.scheduledTimer(withTimeInterval: 3, repeats: true) { timer in
                    withAnimation(.easeInOut.delay(1)) {
                        playAnimation.toggle()
                        if playAnimation {
                            playAnimation2.toggle()
                        }
                        if playAnimation2 {
                            playAnimation3.toggle()
                        }
                    }
                }
            }
0 Answers
Related