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!
Creating Overlays
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.
Edit Transition
Dismiss Overlay
Select the Layer that will dismiss the Overlay, and link it to the ‘Dismiss Overlay’ option at the top menu bar
Tip!
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
❗️Please note:
Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.
Learn More