Custom transitions
Want more? You’re not limited to the built-in flows. You can make your own transitions.
You could, for instance, create a showOverlayCenter()
with a darker background, one that’s 80% opaque instead of the default 50%.
alt_showOverlayCenter = (nav) ->
overlay:
show:
options:
time: 0.1
opacity: .8
x: 0
y: 0
size: nav.size
…

showOverlayCenter()
The most basic custom transition
Let’s start with the simplest example: one that fades in the next screen.
First you define your new transition:
# Simple fade transition
fadeTransition = ->
layerB:
show:
opacity: 1
hide:
opacity: 0
And then you can use it with the transition()
function. Here we animate to screen_2
:
screen_1.onTap ->
flow.transition screen_2, fadeTransition
This transition()
function needs the layer to transition to (as always), followed by that custom transition you made (here fadeTransition
).

layerB
fades inThe transition you created is a function (note the ->
) that contains show
and hide
states for the screens you want to animate.
Take into account that you have to use these names for the screens:
layerA
— The current screenlayerB
— (mandatory) The screen we’re showingoverlay
— The transparent gray background
Screens you omit will not be animated.
So when you don’t provide show
and hide states
for layerA
, it will simply not move. (This is how it works with the built-in overlays.)
And when you don’t provide details for overlay
, it will stay invisible (as it is in the basic showNext()
flow).
Which makes our example the most simple custom transition you could make. We animate the opacity
of layerB
to 1
in its show
state and fade it out again in its hide
state.
Animation options
Animation options like time
, curve
, and the other usual suspects can be added as options
.
As an example, this is how our fade transition would take 5 seconds to show the new screen, but only half a second when returning to the previous screen:
fadeTransition = ->
layerB:
show:
opacity: 1
options:
time: 5
hide:
opacity: 0
options:
time: 0.5
Ah, by the way, to return you use showPrevious()
, as always. It will automatically use your custom animation.
Optional arguments for the transition function
If you want to have access to the layers’ properties inside your function, you can add them as arguments, like this:
customTransition = (nav, layerA, layerB, overlay) ->
You might be wondering what ‘nav
’ is. That’s the FlowComponent itself.
In the built-in overlay transitions, for instance, nav
is always used to make overlay
fit the size
of the FlowComponent:
Transitions.overlayCenter = (nav, layerA, layerB, overlay) ->
transition =
# …
overlay:
show:
options:
time: 0.1
# …
size: nav.size
An example with the transparent background
In the following not-very-useful-but-hopefully-educational examples, the screens are shown next to each other.
In this first one, the show
state for overlay
gets a delay
(in its options
) and is animated to an opacity
of 1
, so that you can see its true color: black.
transitionWithBackground = ->
# …
overlay:
show:
options:
curve: Spring(damping: 0.5)
time: 0.5
delay: 1
opacity: 1
width: Screen.width / 2
height: Screen.height / 2
x: Screen.width / 4
y: Screen.height / 4
# …
# …
And the hide
state for layerA
also got a delay
, so that the three animations run one after the other instead of simultaneously.
Notice that on the showPrevious()
, screen 2 (layerB
) is made invisible again only after the transition has finished. (Normally you would animate this screen’s opacity or position.)

overlay
An example with only the current and next screen
This transition is identical to the former one, but with overlay
omitted.
# Custom transition without Background
customTransition = ->
layerA:
hide:
options:
curve: Spring
time: 0.5
delay: 0.5
width: Screen.width / 2
height: Screen.height / 2
show:
size: Screen.size
# …
Note that screen 1 (layerA
) is now hidden at the end of the transition, and is only made visible again at the start of the showPrevious()
.

overlay
Recreating the built-in flows
I’ll give you something to start with when you want to make transitions that are almost like the included ones. This next prototype contains custom transitions that are copies of the built-in flows.
Creating them was easy: I just copy/pasted the code from the FlowComponent’s source code on GitHub. (They’re at the end of that CoffeeScript file.)
By the way, the default transitions all use the same classic spring curve: "spring(300, 35, 0)"
, and the overlay
is always 50% opaque.
But again, you can tweak all of that.
button_show_next.onTap ->
flow.transition screen_2, transition_showNext
button_overlay_top.onTap ->
flow.transition Overlay,
transition_showOverlayTop
wrap: no
…
Disabling automatic wrap
Besides scroll
and modal
, there’s one more argument that you can add when transitioning to a screen: wrap
. (It’s not in the docs.)
For some reason, wrap
needs disabling when you animate to a smaller screen with a custom transition. That’s why it’s set to no
for the overlays in this prototype.
