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.
Element Properties
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.
Expression Editor Properties
No glass effect container specific Expression Editor properties. See all object properties.
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 Drag Around prefab) to the container’s elements. As elements move closer together or farther apart, the morphing updates dynamically in real time.