How can I change the visibility of ornament with animation?

In the session around 19:15, the ornament for the app is displayed with fade animation. How can I achieve this? I can control the visibility using

ornament(visibility:attachmentAnchor:contentAlignment:ornament:)

with .visible or .hidden, but no animation.

Adding .transition to the content view also does have no effect.

What happens if you change the visibility in a “withAnimation” block?

I've managed to animate in the visibility using opacity:

.ornament(visibility: .visible, attachmentAnchor: .scene(alignment: .bottom)) {
    OrnamentView()
        .opacity(showingOrnament ? 1.0 : 0.0)
        .animation(.spring(duration:2), value: showingOrnament)
}

I haven't yet figured out a way to cause the window move/close handle to re-distance itself from the associated window once the ornament is hidden, but there may be a way to made the ornament hidden after the opacity animation is completed.

When showing ornament view by changing the flag in "withAnimation", it shows weird movement (translate from somewhere upper left). When hiding, no animation. Apparently doing something but not correct movement.

As mentioned by @J0hn, you should be able to use withAnimation or the animation modifier to animate the visibility property. Here is an example:

struct MyView: View {
    @State var showOrnament = true

    var body: some View {
        Button("Toggle ornament") {
            showOrnament.toggle()
        }
        .ornament(visibility: showOrnament ? .visible : .hidden, attachmentAnchor: .scene(.bottom)) {
            OrnamentView()
        }
        .animation(.default, value: showOrnament) // Fade the ornament with the default animation
    }
}

If this doesn't work for you, please file an issue in Feedback Assistant with a sample project.

How can I change the visibility of ornament with animation?
 
 
Q