In SwiftUI, how do I morph 2 glass buttons besides in each other when interacting with one. Give a code example.
Asked on 2025-09-12
1 search
To morph two glass buttons in SwiftUI when interacting with one, you can use the new Liquid Glass effect introduced in the WWDC 2025 sessions. The Liquid Glass effect allows for fluid morphing transitions between UI elements, creating a seamless and dynamic user experience.
Here's a basic example of how you might achieve this using SwiftUI:
import SwiftUI
struct ContentView: View {
@Namespace private var glassNamespace
@State private var isExpanded = false
var body: some View {
VStack {
if isExpanded {
Button(action: {
withAnimation {
isExpanded.toggle()
}
}) {
Text("Button 1")
.padding()
.background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 10))
.matchedGeometryEffect(id: "glassEffect", in: glassNamespace)
}
} else {
Button(action: {
withAnimation {
isExpanded.toggle()
}
}) {
Text("Button 2")
.padding()
.background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 10))
.matchedGeometryEffect(id: "glassEffect", in: glassNamespace)
}
}
}
}
}
Explanation:
-
Namespace: A
@Namespace
is declared to allow for matched geometry effects, which are used to create smooth transitions between views. -
State: A
@State
variableisExpanded
is used to toggle between the two button states. -
Matched Geometry Effect: The
matchedGeometryEffect
modifier is applied to both buttons with the sameid
andnamespace
. This allows SwiftUI to animate the transition between the two views smoothly. -
Animation: The
withAnimation
block is used to animate the state change, which triggers the morphing effect.
This example demonstrates how to use the Liquid Glass effect to create a morphing transition between two buttons. For more detailed information, you can refer to the session Build a SwiftUI app with the new design (17:57) from WWDC 2025.

Build a SwiftUI app with the new design
Explore the ways Liquid Glass transforms the look and feel of your app. Discover how this stunning new material enhances toolbars, controls, and app structures across platforms, providing delightful interactions and seamlessly integrating your app with the system. Learn how to adopt new APIs that can help you make the most of Liquid Glass.

Build a UIKit app with the new design
Update your UIKit app to take full advantage of the new design system. We’ll dive into key changes to tab views, split views, bars, presentations, search, and controls, and show you how to use Liquid Glass in your custom UI. To get the most out of this video, we recommend first watching “Get to know the new design system” for general design guidance.

Meet Liquid Glass
Liquid Glass unifies Apple platform design language while providing a more dynamic and expressive user experience. Get to know the design principles of Liquid Glass, explore its core optical and physical properties, and learn where to use it and why.