⏱ Reading Time: 4 mins

Liquid Glass brings new APIs for building user interfaces. Among them, the glassEffectID modifier enables SwiftUI views that use the glass effect to transform smoothly into one another, as long as they exist in the same container view. When used properly, it brings fluidity and a sense of natural transition to related elements, which users expect from interfaces that use Liquid Glass.

In this post we’ll explore how to use glassEffectID together with other modern APIs, and how to transform a single button into a set of buttons that appear and disappear with a beautiful transition.

The next preview demonstrates what we’ll build in this post:

---

Setting the ground

There is a series of steps to take in order to put the new Liquid Glass morph effect in motion. However, we can summarize them in these three:

1. Include views to animate in the same container view, also new as of iOS 26, called GlassEffectContainer.
2. Use the glassEffectID modifier in all views to provide an animation context in combination with a common @Namespace property.
3. Show views participating to transition conditionally.

To demonstrate everything but keep it simple, suppose that we have a SwiftUI view that displays an image:

The goal is to add a button that floats above image, and toggles the appearance of various action buttons on tap. For convenience, and to avoid repetitive code, the following implements and returns a glass button; the system image to show as label and the action exist as parameters:

Next, we’ll declare the following two state properties in the view:

• showActions is the flag to toggle in order to show and hide action buttons conditionally.
• The namespace is an animation space, common to views participating in the morph effect. We’ll use it in the glassEffectID modifier next.

The GlassContainerView and the glassEffectID modifier

With the ground set, next we’ll add the container view that will host the views of the transition. This is not any container view, but a GlassEffectContainer, another new API in Liquid Glass:

We’ll start simple, and we’ll just add the button that toggles the appearance of the rest animated. Of course, right now no other buttons still exist, but we’ll fix that next:

Notice the use of the glassEffectID(_:in:) modifier for the first time here. We provide two arguments:

• A unique string value as identifier.
• The shared namespace for the animation.

Also see that the button’s icon changes depending on the showActions value.

With the morph effect in Liquid Glass, it will look like this button transforms into five buttons next. At the moment, all we have is what you see next; tapping on the button still has no visual results.

Adding the missing buttons

With the glass effect container view and the button to toggle transition in place, here it comes the last and most creative step. We are going to add the buttons that will appear conditionally, and there is no rule on how to lay them out. Just keep everything in the GlassEffectContainer. In this demonstration, we’ll use vertical and horizontal stacks to make them appear around the toggle button and form a cross. But, it’s really up to you to decide how they will appear in the interfaces you’re building.

That said, it’s crucial to keep in mind an important detail; always use the glassEffectID in every button or view that’s meant to appear and disappear animated. And always make sure to provide a unique string value as identifier.

Replacing the GlassEffectContainer content, here’s the new set of views to add there. Notice that almost all buttons appear when showActions is true, while the toggle button remains always visible:

Since this is a UI-related post, button actions are not important here, so they remain empty.

☝️ Note:
To achieve a proper spacing in stacks inside a glass effect container, make sure that their spacing values are the same.

See that each button instance has the glassEffectID attached. Once again, it’s essential not to omit it, otherwise the view won’t be part of the transition.

Wrapping up

With the glassEffectID modifier and a few bits of configuration, Liquid Glass enables us to use the morph effect and transform a single button, or any view in general, into a set of buttons that appear and disappear animated beautifully. The actual animation process is handled by the system. We just need to apply the glassEffectID properly, use the GlassContainerView and a @Namespace property, and lay out views in any preferable way. I hope you found this post useful. Thanks for reading!

---