Skip to main content

​
Overview

A Glass Effect Container groups together elements with a glass effect applied. As these elements move closer together, they morph into one another, forming a single shape with a glass effect. You can control the distance at which the morphing begins using the Spacing property.

​
Properties

In addition to the properties below, glass effect containers also have access to general object properties in the Expression Editor.

​
Spacing

Set the distance (in points) at which the two glass effect elements begin morphing into a single shape. A container with a high spacing value will begin morphing the shapes when they’re further apart. Glass Container (1).jpg

​
Using Glass Effect Containers

A glass effect container works like a Z stack without alignment properties: its elements can be placed anywhere inside the container. If you want a more structured layout, you can nest a stack inside the glass effect container and add elements there. Each element in the container should have a glass effect applied. The container’s spacing property controls the distance (in points) at which shapes begin morphing into one another. When the distance between two shapes is less than the spacing value, they blend into a single glass shape. You can also add interactions (like our Make Draggable prefab) to the container’s elements. As elements move closer together or farther apart, the morphing updates dynamically in real time.