Reversed animation with repeatForever()

Question

I'm trying to implement an error badge with a pulsating circle in the background. whenever I click on it multiple time it pulses inwards rather than outwards. I'm unable to understand this behaviour. Please suggest me the correct approach.

                            Image(systemName: "exclamationmark")
                                .background(
                                
                                    ZStack{
                                        Circle()
                                            .fill(Color.red.opacity(0.3))
                                            .frame(width: 20, height: 20)
                                        
                                        Circle()
                                            .fill(Color.red.opacity(0.4))
                                            .frame(width: 20, height: 20)
                                            .scaleEffect(carError ? 1.5 : 1)
                                            .onTapGesture(perform: {
                                                carError.toggle()
                                            })
                                        
                                        
                                    }
                                    .animation(carError ? Animation.easeIn(duration: 0.7).repeatForever() : nil)
                                    
                                    
                                )
                                
                                .font(.footnote)
                                .foregroundColor(Color("ColorError"))
                                .position(x: 100, y: 100)

Answer 1

You just need to toggle back to .default animation instead of nil

.animation(carError ? Animation.easeIn(duration: 0.7).repeatForever() : .default)