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