Animation transition scale does not work in swiftui - swiftui

Question

I am trying to run the following transition in a View but does not work as expected. The HELLO WORLD Text should be at first visible. Then on tap of the button it should scale based on the private var zoomOutTransition. The transition is triggered but i see a second Text staying on the screen. Any help appreciated!!!
import SwiftUI
public struct SimpleAnimation: View {
#State
private var scaleEightImage = false
private var zoomOutTransition: AnyTransition {
return .asymmetric(
insertion: .identity.animation(nil),
removal: .scale(
scale: 1000, anchor: UnitPoint(x: 0.494, y: 0.05))
.animation(
.easeInOut(duration: 10.0)
.delay(0.1)
)
)
}
public var body: some View {
ZStack {
Color.clear
VStack {
Spacer()
if scaleEightImage {
Text("HELLO WORLD!")
.foregroundColor(Color.black)
.transition(zoomOutTransition)
} else if !scaleEightImage {
Text("HELLO WORLD!")
.foregroundColor(Color.black)
}
}
VStack {
Button {
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
withAnimation {
viewModel.scaleEightImage.toggle()
}
}
} label: {
Text("tappppp me")
.foregroundColor(Color.black)
}
}
}
}

Answer 1

The text stays on the screen because you have 2 Text() views - one that shows when scaleEightImage is true, another one for when scaleEightImage is false.
You just need to show the text only when scaleEightImage is false:
VStack {
Spacer()
if !scaleEightImage {
Text("HELLO WORLD!")
.foregroundColor(Color.black)
.transition(zoomOutTransition)
}
}