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 …
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_1.onTap -> flow.transition screen_2, fadeTransition
transition() function needs the layer to transition to (as always), followed by that custom transition you made (here
The transition you created is a function (note the
->) that contains
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 screen
layerB— (mandatory) The screen we’re showing
overlay— The transparent gray background
Screens you omit will not be animated.
So when you don’t provide
show and hide
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
Which makes our example the most simple custom transition you could make. We animate the
1 in its
show state and fade it out again in its
Animation options like
curve, and the other usual suspects can be added as
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
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 # … # …
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.)
An example with only the current and next screen
This transition is identical to the former one, but with
# 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
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
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.