This is for macOS. I want to have a toolbar button that toggles showing the right pane, causing it to slide in/out (similarly to the SF Symbols app) using animation.

But I'm not able to trigger any animation. Regardless of what I've tried, the pane just pops in or out.

I could use some direction, please!

    @State var showingBlue: Bool = true

    var body: some View {
        HSplitView() {
            Color.red

            Color.white

            if (showingBlue) {
                Color.blue.transition(.slide)
            }
        }
        .toolbar(content: {
            ToolbarItem(placement: .navigation) {
                Button("Toggle Blue") {
                    withAnimation(Animation.easeInOut(duration: 2.0)) {
                        showingBlue.toggle()
                    }
                }
            }
        })
    }

I'm facing the same challenge. Something strange is that when using a simple HStack, the animation does work. Another thing also to note is that if you resize the right panel, close, then reopen, the width is reset.