how do i animate glass items in and out? give me code sample in swiftui

Asked on 06/26/2025

1 search

To animate glass items in and out using SwiftUI, you can leverage the new Liquid Glass effects introduced in the latest design updates. Here's a basic example of how you might animate a glass effect in SwiftUI:

import SwiftUI

struct GlassView: View {
    @State private var isVisible = false

    var body: some View {
        VStack {
            if isVisible {
                RoundedRectangle(cornerRadius: 25)
                    .fill(Color.white.opacity(0.3))
                    .frame(width: 200, height: 200)
                    .transition(.opacity)
                    .animation(.easeInOut(duration: 0.5), value: isVisible)
            }

            Button(action: {
                withAnimation {
                    isVisible.toggle()
                }
            }) {
                Text("Toggle Glass")
            }
            .padding()
        }
    }
}

struct ContentView: View {
    var body: some View {
        GlassView()
    }
}

In this example, a RoundedRectangle is used to simulate a glass effect. The transition(.opacity) modifier is applied to animate the appearance and disappearance of the glass view. The withAnimation block is used to toggle the visibility of the glass view with a smooth animation.

For more advanced animations and effects, you can explore the session Enhance your UI animations and transitions (08:10) which covers SwiftUI animations in detail.