What are Overlays?
Overlays allow you to show new content on top of other content. Overlays are very similar to links, except they have a transparent background and appear on top of the original page.
Overlays can be used for many use cases: modal windows, drop-down menus, pop-up notifications, all without leaving your current screen.
In this example, the payment method is an overlay.
It is as easy as creating two links!
- Select the Layer that will trigger the Overlay
- Click Prototype tab > Flow > Links > Connect it to the Overlay artboard
- Mark the ‘Overlay’ check-box
Anima Panel > Prototype > Flow > Links > Overlays
- Click ‘Edit Transition’ to customize the animation between the two artboards. You can control the Direction, Duration, Delay and Curve.
Or even embed your own CSS if you like to.
- Select the Layer that will dismiss the Overlay, and link it to the ‘Dismiss Overlay’ option at the top menu bar
Change the artboard background color to a transparent color. So you could see the original artboard underneath. Make sure that it is “Include in export”.
Preview in Browser
When it’s ready — it’s time to see it come to life. Hit ‘Preview in Browser’.
👉Live preview here