Using Overlays

Create an Overlay

To create a new overlay, select the element that should trigger the overlay and click on the overlay section in the property panel. This will take you into a viewport layout that comes with a default dark background and pre-configured enter and exit animations. Add any layers you would like to see in this overlay and press Done when you are finished. You can always access this view again by clicking on the layer with the overlay and clicking on the Overlay property.

Previewing the overlay now should now work as expected. This feature comes with a built in click to dismiss functionality, which means you can click on the backdrop to close the overlay as well.

More Examples

Watch the following tutorial for more examples on what you can build with overlays, including slide-in sidebars, slide-in top bars, centered modal windows and more. You can also refer to this website for live examples on what you can build with the overlay feature.