The image inside the HStack animates but the text just snaps from its original and new position. I’ve boiled it down to the .disabled modifier being the culprit for the strange behavior. The spacing in the VStack is exaggerated for the problem to be clearly visible.

The following code contains the minimum reproducible code,

demo

struct ContentView: View {

    @State var showTitle: Bool = false
    
    var body: some View {
        VStack(spacing: 50) {
            if(showTitle) {
                Text("Title")
            }
                Button {} label: {
                    HStack {
                        Image(systemName: "cloud")
                        Text("Cloud")
                    }
                    .disabled(showTitle)
                    .animation(.default, value: showTitle)
                }
            Button("Toggle"){
                showTitle.toggle()
            }
        }
    }
}

I’ve tried .drawingGroup, which works but it ruins some other styling elements like .clipShape which I would like to use.

Running the code without the .disabled modifier, is how I expect the animation to look like.