XCode (Bug?) (SwiftUI): Rather than Scale and Change Opacity where they are, my Views are coming in from the edge of the screen

Question

I am trying to have a circle on my screen with two circles behind it in a ZStack that ease in and out with the ScaleEffect(), and change opacity. I made this in a separate SwiftUI file, where there seemed to be no issues, but once I put it in my ContentView() it this weird bug seemed to occur.

Please ignore the circles in the background, that's just my background view. But see those two circles of slightly different shades of blue? They keep entering and exiting the screen, coming behind the dark blue "plus" icon and then leaving again. Meanwhile, I'd like them to simply be behind the "plus" circle.

enter image description here

enter image description here

enter image description here Is this because of some kind of XCode bug? Or did I write something wrong in my code? I would really appreciate it if somebody could clarify :)

Here is my code. I made an @State private var buttonIsAnimating and defaulted it to false, and said that once the button appears, the circles should start animating. Is something wrong with the code?

 ZStack {
                            Group {
                                Circle()
                                        .fill(Color("Background2").opacity(self.buttonIsAnimating ? 0.6 : 0))
                                        .frame(width: 75, height: 75, alignment: .center)
                                    .scaleEffect(self.buttonIsAnimating ? 1 : 0)
                                Circle()
                                    .fill(Color("Background3").opacity(self.buttonIsAnimating ? 0.7 : 0))
                                    .frame(width: 89, height: 89, alignment: .center)
                                    .scaleEffect(self.buttonIsAnimating ? 1 : 0)
                            }
                            .animation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true))
                            Button(action: {
                                self.showingAddANewToDoView.toggle()
                            }) {
                                Image(systemName: "plus.circle.fill")
                                    .resizable()
                                    .scaledToFit()
                                    .background(Circle().fill(Color("Background")))
                                    .foregroundColor(Color("Background4"))
                                    .frame(width: 60, height: 60)
                                    .padding(5)
                            }//: Button
                            .onAppear {
                                self.buttonIsAnimating.toggle()
                            }
                        }

Answer 1

Try with link animation to state, like

Group {
    Circle()
            .fill(Color("Background2").opacity(self.buttonIsAnimating ? 0.6 : 0))
            .frame(width: 75, height: 75, alignment: .center)
        .scaleEffect(self.buttonIsAnimating ? 1 : 0)
    Circle()
        .fill(Color("Background3").opacity(self.buttonIsAnimating ? 0.7 : 0))
        .frame(width: 89, height: 89, alignment: .center)
        .scaleEffect(self.buttonIsAnimating ? 1 : 0)
}
.animation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true), 
   value: self.buttonIsAnimating)