Not every screen should slide in from the right. That’s why we also have ‘overlays,’ five more ways to transition to another screen.
The overlays come with a lightbox effect: a transparent gray background that darkens the screen.
Which also means you don’t have to transition to a full-size ‘screen.’ You can, for instance, slide in a menu from the left, or pop up an alert in the middle of the screen.
Tapping the gray background will dismiss the overlay.
Here are the five possible animations. You can slide in from any of the four screen edges, or have the overlay pop up in the center of the screen:
|Slide over from the top left, like the menu behind a hamburger button.|
|Slide over from the top right, like the menu behind the second hamburger button. 😄|
|Slide down from the top center, like a notification.|
|Slide up from the bottom center, like a (modal) edit screen or action sheet on iOS.|
|Pop up in the center, like an alert.|
In the following prototype, you always transition to the same artboard (named
Overlay) with the five different flows.
button_overlay_top.onTap -> flow.showOverlayTop Overlay button_overlay_left.onTap -> flow.showOverlayLeft Overlay …
Returning to the previous screen (i.e., removing the overlay), happens with the same
Overlay.onTap -> flow.showPrevious()
But, as you know, tapping the gray background will also trigger a
True to its name, an overlay will appear on top of the existing screen. Everything on your screen, including headers and footers you might have set, will be darkened by the gray background.
showNext(), an overlay won’t automatically make the screen scrollable.
But the same
scroll argument that we used to disable scrolling on a
showNext() can here be used to enable it:
button_top_scrollable.onTap -> flow.showOverlayTop screenB, scroll: yes
Or, when you want more control, you can completely prepare a screen before showing it, like in this example that shows three pages inside a PageComponent.
# A PageComponent with 3 pages pageScroller = new PageComponent size: First_page.size scrollVertical: no shadowColor: "#333" shadowBlur: 50 borderRadius: bottomLeft: 14 bottomRight: 14 pageScroller.addPage First_page pageScroller.addPage Second_page pageScroller.addPage Third_page
Button.onTap -> flow.showOverlayTop pageScroller
By default, you can tap the gray background to dismiss the overlay (the last example doesn’t even have a
showPrevious()), but you can make an overlay
modal so that you have to close it explicitly.
When doing this, you’ll want to ensure that the user can return by providing a close button with a
In this example, you have to tap on the ‘Cancel’ button to dismiss the overlay.
# Show the Action Sheet on tap Artboard.onTap -> # “modal” makes the background ignore taps flow.showOverlayBottom action_sheet, modal: yes
# Cancel action cancel_button.onTap flow.showPrevious
The gray background,
overlay, is a child layer of the FlowComponent. It’s always there (check your Layer Panel); it’s just kept invisible until needed.
It’s a common layer, so you can change its properties, including its
button_red.onTap -> flow.overlay.backgroundColor = "red" flow.showOverlayCenter Overlay
But whichever color you pick, it will always be made 50% transparent. To change the background’s opacity, you’ll have to create a custom transition.
Just as with a
showNext() you can show an overlay without animation.
flow.showOverlayCenter Overlay, animate: no